From d7715fcfbae98eebfc2471263e68efaa2ae63796 Mon Sep 17 00:00:00 2001 From: praveenjuge Date: Fri, 11 Dec 2020 22:24:39 +0530 Subject: [PATCH] Added Buttons and Navbar Signed-off-by: praveenjuge --- docs/config.toml | 1 + docs/content/_index.md | 38 +++++ docs/layouts/404.html | 2 +- docs/layouts/_default/baseof.html | 4 +- docs/layouts/index.html | 108 ++++++------ docs/layouts/shortcodes/code.html | 2 +- docs/static/tailwind.css | 267 ++++++++++++++++++++++++++++++ index.js | 3 +- package.json | 13 +- 9 files changed, 370 insertions(+), 68 deletions(-) create mode 100644 docs/static/tailwind.css diff --git a/docs/config.toml b/docs/config.toml index b4ad8fb..eb85997 100644 --- a/docs/config.toml +++ b/docs/config.toml @@ -7,6 +7,7 @@ enableEmoji = true enableGitInfo = true enableRobotsTXT = true canonifyURLs = true +pygmentsUseClasses=true [params] author = "Praveen Juge" diff --git a/docs/content/_index.md b/docs/content/_index.md index 1de24d3..7b40295 100644 --- a/docs/content/_index.md +++ b/docs/content/_index.md @@ -46,6 +46,25 @@ Requires Bootstrap JS 5.0.0-beta1 which is not included in this package. Learn h {{< /code >}} +## Buttons + +Tailwind needs an `active` class with your own color. Learn more about adding [custom styles here](https://tailwindcss.com/docs/extracting-components#extracting-component-classes-with-apply). + +```css +/* tailwind.css */ +@layer components { + .active { + @apply bg-indigo-900 !important; + } +} +``` + +{{< code html >}} + + + +{{< /code >}} + ## Collapse {{< code html >}} @@ -102,7 +121,26 @@ Requires Bootstrap JS 5.0.0-beta1 which is not included in this package. Learn h +{{< /code >}} + +## Navbar + +Responsive `navbar-collapse` classes are available for specifying collapsible breakpoint. +{{< code html >}} + + {{< /code >}} ## Popovers diff --git a/docs/layouts/404.html b/docs/layouts/404.html index 9298e49..bedd97e 100644 --- a/docs/layouts/404.html +++ b/docs/layouts/404.html @@ -1,6 +1,6 @@ {{ define "main"}} -
+

Page Not Found (404)

Sorry about that.

diff --git a/docs/layouts/_default/baseof.html b/docs/layouts/_default/baseof.html index a26c1a9..fb79764 100644 --- a/docs/layouts/_default/baseof.html +++ b/docs/layouts/_default/baseof.html @@ -1,9 +1,9 @@ - + {{ partial "meta" . }} - + {{ block "main" . }}{{ end }} {{ partial "js" . }} diff --git a/docs/layouts/index.html b/docs/layouts/index.html index de1aff6..9334807 100644 --- a/docs/layouts/index.html +++ b/docs/layouts/index.html @@ -1,65 +1,63 @@ {{ define "main"}} -
- -
-
-

{{ .Title }}

- + +
+
+

{{ .Title }}

+ + + GitHub + +
+
{{ .Content }}
+
-
{{ .Content }}
- -
-
+ Follow on Twitter + + + + + + +
{{ end }} diff --git a/docs/layouts/shortcodes/code.html b/docs/layouts/shortcodes/code.html index 178aeba..c785370 100644 --- a/docs/layouts/shortcodes/code.html +++ b/docs/layouts/shortcodes/code.html @@ -1,5 +1,5 @@ -
{{ .Inner }}
+
{{ .Inner }}
{{ if len .Params | eq 2 }} {{ highlight (trim .Inner "\n\r") (.Get 0) (.Get 1) }} {{ else }} {{ highlight (trim .Inner "\n\r") (.Get 0) "" }} {{ end }} diff --git a/docs/static/tailwind.css b/docs/static/tailwind.css new file mode 100644 index 0000000..9e8a28d --- /dev/null +++ b/docs/static/tailwind.css @@ -0,0 +1,267 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer components { + .active { + @apply bg-indigo-900 !important; + } + /* LineTableTD */ + .chroma .lntd { + vertical-align: top; + padding: 0; + margin: 0; + border: 0; + } + /* LineTable */ + .chroma .lntable { + border-spacing: 0; + padding: 0; + margin: 0; + border: 0; + width: auto; + overflow: auto; + display: block; + } + /* LineHighlight */ + .chroma .hl { + display: block; + width: 100%; + background-color: #ffffcc; + } + /* LineNumbersTable */ + .chroma .lnt { + margin-right: 0.4em; + padding: 0 0.4em 0 0.4em; + color: #7f7f7f; + } + /* LineNumbers */ + .chroma .ln { + margin-right: 0.4em; + padding: 0 0.4em 0 0.4em; + color: #7f7f7f; + } + /* Keyword */ + .chroma .k { + color: #ff79c6; + } + /* KeywordConstant */ + .chroma .kc { + color: #ff79c6; + } + /* KeywordDeclaration */ + .chroma .kd { + color: #8be9fd; + font-style: italic; + } + /* KeywordNamespace */ + .chroma .kn { + color: #ff79c6; + } + /* KeywordPseudo */ + .chroma .kp { + color: #ff79c6; + } + /* KeywordReserved */ + .chroma .kr { + color: #ff79c6; + } + /* KeywordType */ + .chroma .kt { + color: #8be9fd; + } + /* NameAttribute */ + .chroma .na { + color: #50fa7b; + } + /* NameBuiltin */ + .chroma .nb { + color: #8be9fd; + font-style: italic; + } + /* NameClass */ + .chroma .nc { + color: #50fa7b; + } + /* NameFunction */ + .chroma .nf { + color: #50fa7b; + } + /* NameLabel */ + .chroma .nl { + color: #8be9fd; + font-style: italic; + } + /* NameTag */ + .chroma .nt { + color: #ff79c6; + } + /* NameVariable */ + .chroma .nv { + color: #8be9fd; + font-style: italic; + } + /* NameVariableClass */ + .chroma .vc { + color: #8be9fd; + font-style: italic; + } + /* NameVariableGlobal */ + .chroma .vg { + color: #8be9fd; + font-style: italic; + } + /* NameVariableInstance */ + .chroma .vi { + color: #8be9fd; + font-style: italic; + } + /* LiteralString */ + .chroma .s { + color: #f1fa8c; + } + /* LiteralStringAffix */ + .chroma .sa { + color: #f1fa8c; + } + /* LiteralStringBacktick */ + .chroma .sb { + color: #f1fa8c; + } + /* LiteralStringChar */ + .chroma .sc { + color: #f1fa8c; + } + /* LiteralStringDelimiter */ + .chroma .dl { + color: #f1fa8c; + } + /* LiteralStringDoc */ + .chroma .sd { + color: #f1fa8c; + } + /* LiteralStringDouble */ + .chroma .s2 { + color: #f1fa8c; + } + /* LiteralStringEscape */ + .chroma .se { + color: #f1fa8c; + } + /* LiteralStringHeredoc */ + .chroma .sh { + color: #f1fa8c; + } + /* LiteralStringInterpol */ + .chroma .si { + color: #f1fa8c; + } + /* LiteralStringOther */ + .chroma .sx { + color: #f1fa8c; + } + /* LiteralStringRegex */ + .chroma .sr { + color: #f1fa8c; + } + /* LiteralStringSingle */ + .chroma .s1 { + color: #f1fa8c; + } + /* LiteralStringSymbol */ + .chroma .ss { + color: #f1fa8c; + } + /* LiteralNumber */ + .chroma .m { + color: #bd93f9; + } + /* LiteralNumberBin */ + .chroma .mb { + color: #bd93f9; + } + /* LiteralNumberFloat */ + .chroma .mf { + color: #bd93f9; + } + /* LiteralNumberHex */ + .chroma .mh { + color: #bd93f9; + } + /* LiteralNumberInteger */ + .chroma .mi { + color: #bd93f9; + } + /* LiteralNumberIntegerLong */ + .chroma .il { + color: #bd93f9; + } + /* LiteralNumberOct */ + .chroma .mo { + color: #bd93f9; + } + /* Operator */ + .chroma .o { + color: #ff79c6; + } + /* OperatorWord */ + .chroma .ow { + color: #ff79c6; + } + /* Comment */ + .chroma .c { + color: #6272a4; + } + /* CommentHashbang */ + .chroma .ch { + color: #6272a4; + } + /* CommentMultiline */ + .chroma .cm { + color: #6272a4; + } + /* CommentSingle */ + .chroma .c1 { + color: #6272a4; + } + /* CommentSpecial */ + .chroma .cs { + color: #6272a4; + } + /* CommentPreproc */ + .chroma .cp { + color: #ff79c6; + } + /* CommentPreprocFile */ + .chroma .cpf { + color: #ff79c6; + } + /* GenericDeleted */ + .chroma .gd { + color: #8b080b; + } + /* GenericEmph */ + .chroma .ge { + text-decoration: underline; + } + /* GenericHeading */ + .chroma .gh { + font-weight: bold; + } + /* GenericInserted */ + .chroma .gi { + font-weight: bold; + } + /* GenericOutput */ + .chroma .go { + color: #44475a; + } + /* GenericSubheading */ + .chroma .gu { + font-weight: bold; + } + /* GenericUnderline */ + .chroma .gl { + text-decoration: underline; + } +} diff --git a/index.js b/index.js index b0fa5d1..dcfeea8 100644 --- a/index.js +++ b/index.js @@ -1,3 +1,4 @@ -module.exports = require("tailwindcss/plugin")(function ({ addComponents }) { +module.exports = require("tailwindcss/plugin")(function ({ addComponents, addUtilities }) { addComponents([require("./src/base.js")(), require("./src/dropdown.js")(), require("./src/modal.js")(), require("./src/popover.js")(), require("./src/toast.js")(), require("./src/tooltip.js")()]); + addUtilities({ ".navbar-collapse": { display: "flex !important" } }, { variants: ["responsive"] }); }); diff --git a/package.json b/package.json index 7109020..2029727 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "windstrap", - "version": "0.0.3", + "version": "0.0.4", "description": "Tailwind CSS with Bootstrap JS", "main": "index.js", "author": "praveenjuge", @@ -28,18 +28,15 @@ "scripts": { "start": "cross-env NODE_ENV=development concurrently \"nodemon -e js,html,md --exec 'npm run tailwind'\" \"cd docs && hugo server --disableFastRender\"", "production": "cross-env NODE_ENV=production npm run tailwind && cd docs && hugo --minify", - "tailwind": "./node_modules/tailwindcss/lib/cli.js build -o ./docs/static/build.css --config ./docs/tailwind.config.js" + "tailwind": "npx tailwindcss-cli@latest build ./docs/static/tailwind.css -o ./docs/static/build.css --config ./docs/tailwind.config.js" }, "devDependencies": { - "autoprefixer": "^10.1.0", + "@tailwindcss/typography": "^0.3.1", "concurrently": "^5.3.0", "cross-env": "^7.0.3", - "nodemon": "^2.0.6", - "postcss": "^8.2.1", - "tailwindcss": "^2.0.1", - "@tailwindcss/typography": "^0.3.1" + "nodemon": "^2.0.6" }, "peerDependencies": { - "tailwindcss": "^2.0.1" + "tailwindcss": "^2.0.2" } }