Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found
Select Git revision

Target

Select target project
  • to/weby/ui-styleguide
  • va-fighters/ui-styleguide
2 results
Select Git revision
Show changes
Commits on Source (136)
36 additional commits have been omitted to prevent performance issues.
Expand all Show whitespace changes
Inline Side-by-side
Showing
with 15406 additions and 4525 deletions
.gitlab-ci.yml
View file @ aac6d1d3
...@@ -15,7 +15,7 @@ build: ...@@ -15,7 +15,7 @@ build:
- npm run build - npm run build
after_script: after_script:
- TAG=`git describe --tags $(git rev-list --tags --max-count=1)` - TAG=`git describe --tags $(git rev-list --tags --max-count=1)`
- echo "{\"job_token\":\"$CI_JOB_TOKEN\", \"name\":\"$SITE_NAME\", \"tag\":\"$TAG\" }" > request.json - echo "{\"name\":\"$SITE_NAME\", \"tag\":\"$TAG\" }" > request.json
- "curl -H 'Content-Type: application/json' -X POST -d @request.json $WEBHOOK_URL" - "curl -H 'Content-Type: application/json' -X POST -d @request.json $WEBHOOK_URL"
artifacts: artifacts:
expire_in: 30 min expire_in: 30 min
......
LICENSE 100755 → 100644
View file @ aac6d1d3
File mode changed from 100755 to 100644
README.md
View file @ aac6d1d3
...@@ -35,7 +35,6 @@ The `npm` command will install project dependencies and the `npm run develop` ...@@ -35,7 +35,6 @@ The `npm` command will install project dependencies and the `npm run develop`
command builds the project, sets up a local server for the Patternlab UI and command builds the project, sets up a local server for the Patternlab UI and
watches relevant template files to rebuild on any changes. watches relevant template files to rebuild on any changes.
### Build ### Build
The build command compiles the styleguide CSS and the Patternlab output but it The build command compiles the styleguide CSS and the Patternlab output but it
...@@ -64,6 +63,7 @@ This will create a new git tag which will be recongnized by the build server and ...@@ -64,6 +63,7 @@ This will create a new git tag which will be recongnized by the build server and
- update `latest` pointer - update `latest` pointer
- update minor version pointer like `1.x.x` in case this was a patch update or minor update - update minor version pointer like `1.x.x` in case this was a patch update or minor update
- update patch version pointer like `1.3.x` in case this was the patch update - update patch version pointer like `1.3.x` in case this was the patch update
- add `1.3.3` version if the tag name was `1.3.3`
### Running locally with Docker ### Running locally with Docker
...@@ -91,3 +91,43 @@ current project settings. Add/modify icons and finally download your new icon ...@@ -91,3 +91,43 @@ current project settings. Add/modify icons and finally download your new icon
font. Delete contents of the `source/icons` and put all the content from your font. Delete contents of the `source/icons` and put all the content from your
downloaded font. When finished, run `npm run update-iconset` that will update downloaded font. When finished, run `npm run update-iconset` that will update
both the style and pattern file automatically. both the style and pattern file automatically.
## Developing other websites with pirati-ui
In order to integrate `pirati-ui` with other websites, you will need to include
at least the CSS source that defines look and feel. Simply place the following
code in your `<head>`:
```html
<link rel="stylesheet" href="[ROOT_URL]/css/styles.css">
```
If you want to use the JS enahancements as well, you will also need to:
1. Include Vue.js:
```html
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script>
```
2. Include `pirati-ui` JS bundle:
```html
<script src="[ROOT_URL]/js/main.bundle.js"></script>
```
Make sure that Vue.js is included *before* the JS bundle. The best place for
both of the JS sources is at the end of your HTML document.
The `[ROOT_URL]` should point to the root address of your `pirati-ui` installation. This can either be
one of official bundles hosted at `https://styleguide.pir-test.eu`:
- https://styleguide.pir-test.eu/latest/
- https://styleguide.pir-test.eu/1.x.x/
- ... and so on
Alternatively, you can run the `pirati-ui` locally. In this case, just run
`npm run develop` and use whatever opens in the browser as your `ROOT_URL`.
Usually, this will be `http://localhost:3000/`.
gulpfile.js 100755 → 100644
View file @ aac6d1d3
...@@ -23,30 +23,6 @@ const postcss = require("gulp-postcss"); ...@@ -23,30 +23,6 @@ const postcss = require("gulp-postcss");
const tailwindcss = require("tailwindcss"); const tailwindcss = require("tailwindcss");
const rename = require("gulp-rename"); const rename = require("gulp-rename");
const assets = require("postcss-assets"); const assets = require("postcss-assets");
const postcssPurgecss = require("@fullhuman/postcss-purgecss")({
content: [
"./source/**/*.mustache",
"./source/**/*.json",
"./source/**/*.js",
"./source/**/*.vue",
"./public/**/*.html",
],
defaultExtractor: (content) => content.match(/[A-Za-z0-9-_:/]+/g) || [],
whitelistPatterns: [
/(sm|md|lg|xl)?(\\:)?w-\d\d?$/, // width
/(sm|md|lg|xl)?(\\:)?h-\d\d?$/, // height
/(sm|md|lg|xl)?(\\:)m.?-\d\d?$/, // margins
/(sm|md|lg|xl)?(\\:)p.?-\d\d?$/, // paddings
/max-w-*/, // maximum width
/grid-cols-\d\d?/, // grid columns
/col-span-\d\d?/, // grid spans
/row-span-\d\d?/, // grid spans
/grid-flow/, // grid flow
/(sm|md|lg|xl)(\\:)text-.*/,
// /text-*/,
/ico--*/, // icons
],
});
function resolvePath(pathInput) { function resolvePath(pathInput) {
...@@ -222,30 +198,7 @@ function reloadJS(done) { ...@@ -222,30 +198,7 @@ function reloadJS(done) {
* TAILWIND AND POSTCSS TASKS * TAILWIND AND POSTCSS TASKS
******************************************************/ ******************************************************/
gulp.task("tailwind-postcss:build", function (done) { gulp.task("tailwind-postcss", function (done) {
return gulp
.src("./source/css/style.pcss")
.pipe(
postcss([
require("postcss-import"),
tailwindcss("./tailwind.config.js"),
require("postcss-nested"),
// require('postcss-preset-env'),
require("postcss-custom-properties"),
require("autoprefixer"),
assets({
basePath: "source/",
loadPaths: ["images/"],
}),
require("postcss-clean"),
])
)
.pipe(rename("styles.css"))
.pipe(gulp.dest(resolvePath(paths().public.css)))
.on("end", done);
});
gulp.task("tailwind-postcss:build:production", function (done) {
return gulp return gulp
.src("./source/css/style.pcss") .src("./source/css/style.pcss")
.pipe( .pipe(
...@@ -261,7 +214,6 @@ gulp.task("tailwind-postcss:build:production", function (done) { ...@@ -261,7 +214,6 @@ gulp.task("tailwind-postcss:build:production", function (done) {
loadPaths: ["images/"], loadPaths: ["images/"],
}), }),
require("postcss-clean"), require("postcss-clean"),
postcssPurgecss,
]) ])
) )
.pipe(rename("styles.css")) .pipe(rename("styles.css"))
...@@ -296,7 +248,7 @@ function watch () { ...@@ -296,7 +248,7 @@ function watch () {
gulp.watch( gulp.watch(
postcssPaths, postcssPaths,
{useFsEvents: false}, {useFsEvents: false},
gulp.series("tailwind-postcss:build", reloadCSS) gulp.series("tailwind-postcss", reloadCSS)
); );
console.log("Watching following source files:", jsPaths.concat(postcssPaths)); console.log("Watching following source files:", jsPaths.concat(postcssPaths));
...@@ -341,6 +293,7 @@ gulp.task( ...@@ -341,6 +293,7 @@ gulp.task(
server: { server: {
baseDir: resolvePath(paths().public.root), baseDir: resolvePath(paths().public.root),
}, },
cors: true,
snippetOptions: { snippetOptions: {
// Ignore all HTML files within the templates folder // Ignore all HTML files within the templates folder
blacklist: ["/index.html", "/", "/?*"], blacklist: ["/index.html", "/", "/?*"],
...@@ -378,7 +331,8 @@ const buildJSBundle = (env) => { ...@@ -378,7 +331,8 @@ const buildJSBundle = (env) => {
exclude: "node_modules/**/*", exclude: "node_modules/**/*",
target: { target: {
chrome: 71, chrome: 71,
firefox: 64 firefox: 64,
edge: 19
}, },
}), }),
commonjs(), commonjs(),
...@@ -425,13 +379,13 @@ gulp.task('rollup:build:production', buildJSBundle("production")); ...@@ -425,13 +379,13 @@ gulp.task('rollup:build:production', buildJSBundle("production"));
gulp.task( gulp.task(
"site:build", "site:build",
gulp.parallel("tailwind-postcss:build", "patternlab:build", "rollup:build") gulp.parallel("tailwind-postcss", "patternlab:build", "rollup:build")
); );
gulp.task( gulp.task(
"site:build:production", "site:build:production",
// Build patternlab first to have all the necessary CSS classes ready for auto purge. // Build patternlab first to have all the necessary CSS classes ready for auto purge.
gulp.series("patternlab:build", gulp.parallel("tailwind-postcss:build:production", "rollup:build:production")) gulp.series("patternlab:build", gulp.parallel("tailwind-postcss", "rollup:build:production"))
); );
/****************************************************** /******************************************************
......
package-lock.json
View file @ aac6d1d3
This diff is collapsed.
package.json 100755 → 100644
View file @ aac6d1d3
{ {
"name": "edition-node-gulp", "name": "edition-node-gulp",
"description": "The gulp wrapper around patternlab-node core, providing tasks to interact with the core library and move supporting frontend assets.", "description": "The gulp wrapper around patternlab-node core, providing tasks to interact with the core library and move supporting frontend assets.",
"version": "1.3.4", "version": "2.20.0",
"dependencies": { "dependencies": {
"@fullcalendar/core": "^6.1.5",
"@fullcalendar/daygrid": "^6.1.5",
"@fullcalendar/interaction": "^6.1.5",
"@fullcalendar/multimonth": "^6.1.6",
"@fullcalendar/vue": "^6.1.5",
"browser-sync": "^2.26.7", "browser-sync": "^2.26.7",
"gulp": "^4.0.2", "gulp": "^4.0.2",
"kind-of": "^6.0.3", "kind-of": "^6.0.3",
...@@ -12,7 +17,8 @@ ...@@ -12,7 +17,8 @@
"styleguidekit-assets-default": "^3.0.0", "styleguidekit-assets-default": "^3.0.0",
"styleguidekit-mustache-default": "^3.0.0", "styleguidekit-mustache-default": "^3.0.0",
"tailwindcss-elevation": "^0.3.4", "tailwindcss-elevation": "^0.3.4",
"vue": "^2.6.11", "tippy.js": "^6.3.7",
"vue": "^2.7.14",
"vue2-flip-countdown": "^0.10.0" "vue2-flip-countdown": "^0.10.0"
}, },
"resolutions": { "resolutions": {
...@@ -35,8 +41,8 @@ ...@@ -35,8 +41,8 @@
"scripts": { "scripts": {
"postinstall": "node scripts/postinstall.js", "postinstall": "node scripts/postinstall.js",
"gulp": "gulp -- ", "gulp": "gulp -- ",
"develop": "gulp patternlab:serve", "develop": "NODE_ENV=development gulp patternlab:serve",
"build": "gulp", "build": "NODE_ENV=production gulp",
"make-version": "scripts/make-version.sh", "make-version": "scripts/make-version.sh",
"update-iconset": "scripts/update-iconset.js" "update-iconset": "scripts/update-iconset.js"
}, },
...@@ -53,10 +59,11 @@ ...@@ -53,10 +59,11 @@
"@rollup/stream": "^1.0.0", "@rollup/stream": "^1.0.0",
"acorn": "^6.4.1", "acorn": "^6.4.1",
"autoprefixer": "^9.5.1", "autoprefixer": "^9.5.1",
"chart.js": "^4.2.0",
"color": "^3.1.2", "color": "^3.1.2",
"gulp-add-src": "^1.0.0", "gulp-add-src": "^1.0.0",
"gulp-concat": "^2.6.1", "gulp-concat": "^2.6.1",
"gulp-postcss": "^8.0.0", "gulp-postcss": "^9.0.0",
"gulp-rename": "^2.0.0", "gulp-rename": "^2.0.0",
"lodash": "^4.17.15", "lodash": "^4.17.15",
"postcss-assets": "^5.0.0", "postcss-assets": "^5.0.0",
...@@ -69,10 +76,10 @@ ...@@ -69,10 +76,10 @@
"rollup-plugin-terser": "^6.1.0", "rollup-plugin-terser": "^6.1.0",
"rollup-plugin-vue": "^5.1.9", "rollup-plugin-vue": "^5.1.9",
"tailwind-css-variables": "^2.0.3", "tailwind-css-variables": "^2.0.3",
"tailwindcss": "^1.4.6", "tailwindcss": "^3.3.3",
"tailwindcss-typography": "^3.1.0", "@tailwindcss/typography": "^0.5.10",
"vinyl-buffer": "^1.0.1", "vinyl-buffer": "^1.0.1",
"vinyl-source-stream": "^2.0.0", "vinyl-source-stream": "^2.0.0",
"vue-template-compiler": "^2.6.11" "vue-template-compiler": "^2.7.14"
} }
} }
patternlab-config.json 100755 → 100644
View file @ aac6d1d3
File mode changed from 100755 to 100644
scripts/postinstall.js 100755 → 100644
View file @ aac6d1d3
File mode changed from 100755 to 100644
source/_annotations/annotations.js 100755 → 100644
View file @ aac6d1d3
File mode changed from 100755 to 100644
source/_data/data.json 100755 → 100644
View file @ aac6d1d3
...@@ -4,27 +4,27 @@ ...@@ -4,27 +4,27 @@
"title": "Nullizzle shizznit velizzle, hizzle, suscipit own yo', gravida vizzle, arcu.", "title": "Nullizzle shizznit velizzle, hizzle, suscipit own yo', gravida vizzle, arcu.",
"img": { "img": {
"avatar": { "avatar": {
"src": "http://placeimg.com/100/100/people", "src": "https://picsum.photos/100",
"alt": "Avatar" "alt": "Avatar"
}, },
"square": { "square": {
"src": "http://placeimg.com/300/300/nature", "src": "https://picsum.photos/300",
"alt": "Square" "alt": "Square"
}, },
"rectangle": { "rectangle": {
"src": "http://placeimg.com/400/300/tech", "src": "https://picsum.photos/400/300",
"alt": "Rectangle" "alt": "Rectangle"
}, },
"landscape-4x3": { "landscape-4x3": {
"src": "http://placeimg.com/400/300/tech", "src": "https://picsum.photos/400/300",
"alt": "4x3 Image" "alt": "4x3 Image"
}, },
"landscape-16x9": { "landscape-16x9": {
"src": "http://placeimg.com/640/360/tech", "src": "https://picsum.photos/640/360",
"alt": "16x9 Image" "alt": "16x9 Image"
}, },
"landscape-16x9-fullhd": { "landscape-16x9-fullhd": {
"src": "https://loremflickr.com/1920/1080", "src": "https://picsum.photos/1920/1080",
"alt": "16x9 Image Full HD" "alt": "16x9 Image Full HD"
} }
}, },
...@@ -32,6 +32,9 @@ ...@@ -32,6 +32,9 @@
"short": "Lorizzle pimpin' dolizzle sit amet I", "short": "Lorizzle pimpin' dolizzle sit amet I",
"medium": "Rizzle adipiscing elizzle. Nullam sapien velizzle, shit volutpizzle, my" "medium": "Rizzle adipiscing elizzle. Nullam sapien velizzle, shit volutpizzle, my"
}, },
"list": {
"item": "Shizz fo shizzle mah nizzle fo rizzle, <a href='#' class='underline'>mah home g-dizzle</a>, gravida vizzle, arcu. Pellentesque crunk tortizzle. Sed erizzle. Black izzle sheezy telliv."
},
"excerpt": { "excerpt": {
"short": "Shizz fo shizzle mah nizzle fo rizzle, mah home g-dizzle, gravida vizzle, arcu. Pellentesque crunk tortizzle. Sed erizzle. Black izzle sheezy telliv.", "short": "Shizz fo shizzle mah nizzle fo rizzle, mah home g-dizzle, gravida vizzle, arcu. Pellentesque crunk tortizzle. Sed erizzle. Black izzle sheezy telliv.",
"medium": "Izzle crazy tempizzle sizzle. We gonna chung gangsta get down get down fo shizzle turpizzle. Away break it down black. Pellentesque bling bling rhoncus fo shizzle. In hac the bizzle platea dictumst. Black dapibizzle. Crackalackin.", "medium": "Izzle crazy tempizzle sizzle. We gonna chung gangsta get down get down fo shizzle turpizzle. Away break it down black. Pellentesque bling bling rhoncus fo shizzle. In hac the bizzle platea dictumst. Black dapibizzle. Crackalackin.",
...@@ -49,10 +52,11 @@ ...@@ -49,10 +52,11 @@
"last": "Koolen", "last": "Koolen",
"lasti": "K", "lasti": "K",
"occupation": "Software company manager and open-source software expert", "occupation": "Software company manager and open-source software expert",
"email": "example@example.com", "email": "someone.from.the.party@pirati.cz",
"claim": "Evropská unie není vzdálená instituce žijící svým životem – jsme to my všichni. Přesto máme někdy problém se orientovat či přímo angažovat v evropské politice.", "claim": "Evropská unie není vzdálená instituce žijící svým životem – jsme to my všichni. Přesto máme někdy problém se orientovat či přímo angažovat v evropské politice.",
"party": "Pirátská strana", "party": "Pirátská strana",
"age": "30", "age": "30",
"city": "Valašské Meziříčí",
"position": "1" "position": "1"
}, },
"organization": { "organization": {
...@@ -93,6 +97,11 @@ ...@@ -93,6 +97,11 @@
"short": "20" "short": "20"
}, },
"seconds": "31", "seconds": "31",
"form": {
"label": "Název políčka",
"placeholder": "Placeholder"
},
"calendarData": "[{\"title\": \"event 1\", \"date\": \"2024-03-02\", \"url\": \"https://example.com\"}, {\"title\": \"event 2\", \"date\": \"2024-04-01\", \"url\": \"https://example.com\"}, {\"title\": \"event 3\", \"date\": \"2024-03-02\", \"url\": \"https://example.com\"}, {\"title\": \"event 4\", \"date\": \"2023-04-01\", \"url\": \"https://example.com\"}, {\"title\": \"event 5\", \"date\": \"2023-04-01\", \"url\": \"https://example.com\"}, {\"title\": \"event 2\", \"date\": \"2023-04-10\", \"url\": \"https://example.com\"}]",
"greyColors": [ "greyColors": [
{"cls": "grey-50", "hex": "#f7f7f7", "name": "Grey 50"}, {"cls": "grey-50", "hex": "#f7f7f7", "name": "Grey 50"},
{"cls": "grey-100", "hex": "#f3f3f3", "name": "Grey 100"}, {"cls": "grey-100", "hex": "#f3f3f3", "name": "Grey 100"},
...@@ -113,11 +122,27 @@ ...@@ -113,11 +122,27 @@
{"cls": "white", "name": "White", "hex": "#ffffff"} {"cls": "white", "name": "White", "hex": "#ffffff"}
] ]
}, },
{
"name": "Olive",
"variants": [
{"cls": "olive-100", "name": "Olive 100", "hex": "#d6e8b3"}
]
},
{ {
"name": "Green", "name": "Green",
"variants": [ "variants": [
{"cls": "green-100", "name": "Green 100", "hex": "#d6e8b3"}, {"cls": "green-200", "name": "Green 200", "hex": "#92c6ab"},
{"cls": "green-200", "name": "Green 200", "hex": "#92c6ab"} {"cls": "green-300", "name": "Green 300", "hex": "#76cc9f"},
{"cls": "green-400", "name": "Green 400", "hex": "#4ca971"}
]
},
{
"name": "Yellow",
"variants": [
{"cls": "yellow-100", "name": "Yellow 100", "hex": "#fff7bf"},
{"cls": "yellow-200", "name": "Yellow 200", "hex": "#f7f38a"},
{"cls": "yellow-300", "name": "Yellow 300", "hex": "#ffea5a"},
{"cls": "yellow-400", "name": "Yellow 400", "hex": "#fde119"}
] ]
}, },
{ {
...@@ -155,6 +180,18 @@ ...@@ -155,6 +180,18 @@
{"cls": "violet-400", "name": "Violet 400", "hex": "#840048"}, {"cls": "violet-400", "name": "Violet 400", "hex": "#840048"},
{"cls": "violet-500", "name": "Violet 500", "hex": "#670047"} {"cls": "violet-500", "name": "Violet 500", "hex": "#670047"}
] ]
},
{
"name": "Red",
"variants": [
{"cls": "red-600", "name": "Red 600", "hex": "#d60d53"}
]
},
{
"name": "Pirati",
"variants": [
{"cls": "pirati-yellow", "name": "Yellow", "hex": "#fec934"}
]
} }
] ]
} }
source/_data/listitems.json 100755 → 100644
View file @ aac6d1d3
File mode changed from 100755 to 100644
source/_meta/_00-head.mustache 100755 → 100644
View file @ aac6d1d3
File mode changed from 100755 to 100644
source/_meta/_01-foot.mustache 100755 → 100644
View file @ aac6d1d3
File mode changed from 100755 to 100644
source/_patterns/.gitkeep 100755 → 100644
View file @ aac6d1d3
File mode changed from 100755 to 100644
source/_patterns/00-atoms/01-text/text-shadow.mustache 0 → 100644
View file @ aac6d1d3
<div>
<h1 class="head-alt-xl text-shadow-xs">{{ headline.short }}</h1>
<h1 class="head-alt-xl text-shadow-sm">{{ headline.short }}</h1>
<h1 class="head-alt-xl text-shadow">{{ headline.short }}</h1>
<h1 class="head-alt-xl text-shadow-md">{{ headline.short }}</h1>
<h1 class="head-alt-xl text-shadow-lg">{{ headline.short }}</h1>
</div>
source/_patterns/00-atoms/03-buttons/00-basic-button.mustache
View file @ aac6d1d3
<button class="btn {{ classes }}"> <button class="btn {{ classes }}" {{# disabled }}disabled{{/ disabled }}>
<div class="btn__body {{ bodyClasses }}">{{ cta }}</div> <div class="btn__body {{ bodyClasses }}">{{ cta }}</div>
</button> </button>
source/_patterns/00-atoms/03-buttons/01-icon-button.mustache
View file @ aac6d1d3
<button class="btn btn--icon {{ classes }}"> <button class="btn btn--icon {{ classes }}" {{# disabled }}disabled{{/ disabled }}>
<div class="btn__body-wrap"> <div class="btn__body-wrap">
<div class="btn__body {{ bodyClasses }}">{{ cta }}</div> <div class="btn__body {{ bodyClasses }}">{{ cta }}</div>
<div class="btn__icon {{ iconClasses }}"> <div class="btn__icon {{ iconClasses }}">
......
source/_patterns/00-atoms/03-buttons/02-button-colors.mustache
View file @ aac6d1d3
...@@ -7,10 +7,27 @@ ...@@ -7,10 +7,27 @@
{{> atoms-basic-button(classes: "btn--white") }} {{> atoms-basic-button(classes: "btn--white") }}
{{> atoms-basic-button(classes: "btn--blue-300") }} {{> atoms-basic-button(classes: "btn--blue-300") }}
{{> atoms-basic-button(classes: "btn--cyan-200") }} {{> atoms-basic-button(classes: "btn--cyan-200") }}
{{> atoms-basic-button(classes: "btn--green-200") }} {{> atoms-basic-button(classes: "btn--green-400") }}
{{> atoms-basic-button(classes: "btn--green-300") }}
{{> atoms-basic-button(classes: "btn--orange-300") }} {{> atoms-basic-button(classes: "btn--orange-300") }}
{{> atoms-basic-button(classes: "btn--violet-400") }} {{> atoms-basic-button(classes: "btn--violet-400") }}
{{> atoms-basic-button(classes: "btn--violet-500") }} {{> atoms-basic-button(classes: "btn--violet-500") }}
{{> atoms-basic-button(classes: "btn--red-600") }}
</div>
<div class="inline-flex flex-col space-y-2">
{{> atoms-basic-button(classes: "btn--black", disabled: true) }}
{{> atoms-basic-button(classes: "btn--grey-700", disabled: true) }}
{{> atoms-basic-button(classes: "btn--grey-500", disabled: true) }}
{{> atoms-basic-button(classes: "btn--grey-125", disabled: true) }}
{{> atoms-basic-button(classes: "btn--white", disabled: true) }}
{{> atoms-basic-button(classes: "btn--blue-300", disabled: true) }}
{{> atoms-basic-button(classes: "btn--cyan-200", disabled: true) }}
{{> atoms-basic-button(classes: "btn--green-400", disabled: true) }}
{{> atoms-basic-button(classes: "btn--green-300", disabled: true) }}
{{> atoms-basic-button(classes: "btn--orange-300", disabled: true) }}
{{> atoms-basic-button(classes: "btn--violet-400", disabled: true) }}
{{> atoms-basic-button(classes: "btn--violet-500", disabled: true) }}
{{> atoms-basic-button(classes: "btn--red-600", disabled: true) }}
</div> </div>
<div class="inline-flex flex-col space-y-2"> <div class="inline-flex flex-col space-y-2">
{{> atoms-icon-button(classes: "btn--black") }} {{> atoms-icon-button(classes: "btn--black") }}
...@@ -20,9 +37,26 @@ ...@@ -20,9 +37,26 @@
{{> atoms-icon-button(classes: "btn--white") }} {{> atoms-icon-button(classes: "btn--white") }}
{{> atoms-icon-button(classes: "btn--blue-300") }} {{> atoms-icon-button(classes: "btn--blue-300") }}
{{> atoms-icon-button(classes: "btn--cyan-200") }} {{> atoms-icon-button(classes: "btn--cyan-200") }}
{{> atoms-icon-button(classes: "btn--green-200") }} {{> atoms-icon-button(classes: "btn--green-400") }}
{{> atoms-icon-button(classes: "btn--green-300") }}
{{> atoms-icon-button(classes: "btn--orange-300") }} {{> atoms-icon-button(classes: "btn--orange-300") }}
{{> atoms-icon-button(classes: "btn--violet-400") }} {{> atoms-icon-button(classes: "btn--violet-400") }}
{{> atoms-icon-button(classes: "btn--violet-500") }} {{> atoms-icon-button(classes: "btn--violet-500") }}
{{> atoms-icon-button(classes: "btn--red-600") }}
</div>
<div class="inline-flex flex-col space-y-2">
{{> atoms-icon-button(classes: "btn--black", disabled: true) }}
{{> atoms-icon-button(classes: "btn--grey-700", disabled: true) }}
{{> atoms-icon-button(classes: "btn--grey-500", disabled: true) }}
{{> atoms-icon-button(classes: "btn--grey-125", disabled: true) }}
{{> atoms-icon-button(classes: "btn--white", disabled: true) }}
{{> atoms-icon-button(classes: "btn--blue-300", disabled: true) }}
{{> atoms-icon-button(classes: "btn--cyan-200", disabled: true) }}
{{> atoms-icon-button(classes: "btn--green-400", disabled: true) }}
{{> atoms-icon-button(classes: "btn--green-300", disabled: true) }}
{{> atoms-icon-button(classes: "btn--orange-300", disabled: true) }}
{{> atoms-icon-button(classes: "btn--violet-400", disabled: true) }}
{{> atoms-icon-button(classes: "btn--violet-500", disabled: true) }}
{{> atoms-icon-button(classes: "btn--red-600", disabled: true) }}
</div> </div>
</div> </div>
source/_patterns/00-atoms/03-buttons/04-button-with-hover-effect.mustache
View file @ aac6d1d3
...@@ -7,7 +7,8 @@ ...@@ -7,7 +7,8 @@
{{> atoms-basic-button(classes: "btn--white btn--hoveractive") }} {{> atoms-basic-button(classes: "btn--white btn--hoveractive") }}
{{> atoms-basic-button(classes: "btn--blue-300 btn--hoveractive") }} {{> atoms-basic-button(classes: "btn--blue-300 btn--hoveractive") }}
{{> atoms-basic-button(classes: "btn--cyan-200 btn--hoveractive") }} {{> atoms-basic-button(classes: "btn--cyan-200 btn--hoveractive") }}
{{> atoms-basic-button(classes: "btn--green-200 btn--hoveractive") }} {{> atoms-basic-button(classes: "btn--green-400 btn--hoveractive") }}
{{> atoms-basic-button(classes: "btn--green-300 btn--hoveractive") }}
{{> atoms-basic-button(classes: "btn--orange-300 btn--hoveractive") }} {{> atoms-basic-button(classes: "btn--orange-300 btn--hoveractive") }}
{{> atoms-basic-button(classes: "btn--violet-400 btn--hoveractive") }} {{> atoms-basic-button(classes: "btn--violet-400 btn--hoveractive") }}
{{> atoms-basic-button(classes: "btn--violet-500 btn--hoveractive") }} {{> atoms-basic-button(classes: "btn--violet-500 btn--hoveractive") }}
...@@ -20,7 +21,8 @@ ...@@ -20,7 +21,8 @@
{{> atoms-icon-button(classes: "btn--white btn--hoveractive") }} {{> atoms-icon-button(classes: "btn--white btn--hoveractive") }}
{{> atoms-icon-button(classes: "btn--blue-300 btn--hoveractive") }} {{> atoms-icon-button(classes: "btn--blue-300 btn--hoveractive") }}
{{> atoms-icon-button(classes: "btn--cyan-200 btn--hoveractive") }} {{> atoms-icon-button(classes: "btn--cyan-200 btn--hoveractive") }}
{{> atoms-icon-button(classes: "btn--green-200 btn--hoveractive") }} {{> atoms-icon-button(classes: "btn--green-400 btn--hoveractive") }}
{{> atoms-icon-button(classes: "btn--green-300 btn--hoveractive") }}
{{> atoms-icon-button(classes: "btn--orange-300 btn--hoveractive") }} {{> atoms-icon-button(classes: "btn--orange-300 btn--hoveractive") }}
{{> atoms-icon-button(classes: "btn--violet-400 btn--hoveractive") }} {{> atoms-icon-button(classes: "btn--violet-400 btn--hoveractive") }}
{{> atoms-icon-button(classes: "btn--violet-500 btn--hoveractive") }} {{> atoms-icon-button(classes: "btn--violet-500 btn--hoveractive") }}
......

Pirátský GitLab - Home of the CopyLeft