diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..b585a76 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,13 @@ +# Editor configuration, see https://editorconfig.org +root = true + +[*] +charset = utf-8 +indent_style = space +indent_size = 4 +insert_final_newline = true +trim_trailing_whitespace = true + +[*.md] +max_line_length = off +trim_trailing_whitespace = false diff --git a/.eslintrc.json b/.eslintrc.json index 248febc..0f20600 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,8 +1,7 @@ { - "plugins": ["@typescript-eslint", "jest-dom"], + "plugins": ["jest-dom"], "extends": [ "next/core-web-vitals", - "plugin:@typescript-eslint/recommended", "prettier" ], "rules": { diff --git a/components/doc/aligncontent/centerdoc.js b/components/doc/aligncontent/centerdoc.js index 7a3c014..b5eeb11 100644 --- a/components/doc/aligncontent/centerdoc.js +++ b/components/doc/aligncontent/centerdoc.js @@ -25,7 +25,7 @@ export function CenterDoc(props) {

Flex lines are distributed at the center of the container.

-
+
1
2
3
diff --git a/components/doc/aligncontent/enddoc.js b/components/doc/aligncontent/enddoc.js index deada3c..98746e1 100644 --- a/components/doc/aligncontent/enddoc.js +++ b/components/doc/aligncontent/enddoc.js @@ -25,7 +25,7 @@ export function EndDoc(props) {

Flex lines are distributed at the end of the container.

-
+
1
2
3
diff --git a/components/doc/aligncontent/startdoc.js b/components/doc/aligncontent/startdoc.js index e0992d2..f4df922 100644 --- a/components/doc/aligncontent/startdoc.js +++ b/components/doc/aligncontent/startdoc.js @@ -25,7 +25,7 @@ export function StartDoc(props) {

Flex lines are distributed at the start of the container.

-
+
1
2
3
diff --git a/components/doc/alignitems/baselinedoc.js b/components/doc/alignitems/baselinedoc.js index 7766f82..0507b59 100644 --- a/components/doc/alignitems/baselinedoc.js +++ b/components/doc/alignitems/baselinedoc.js @@ -25,10 +25,16 @@ export function BaselineDoc(props) {

Items are located at the baseline of the container.

-
-
1
-
2
-
3
+
+
+ 1 +
+
+ 2 +
+
+ 3 +
diff --git a/components/doc/alignitems/centerdoc.js b/components/doc/alignitems/centerdoc.js index b1064e1..5d341ed 100644 --- a/components/doc/alignitems/centerdoc.js +++ b/components/doc/alignitems/centerdoc.js @@ -25,10 +25,16 @@ export function CenterDoc(props) {

Items are located at the center of the container.

-
-
1
-
2
-
3
+
+
+ 1 +
+
+ 2 +
+
+ 3 +
diff --git a/components/doc/alignitems/enddoc.js b/components/doc/alignitems/enddoc.js index ae19e3b..61ef0d1 100644 --- a/components/doc/alignitems/enddoc.js +++ b/components/doc/alignitems/enddoc.js @@ -25,10 +25,16 @@ export function EndDoc(props) {

Items are located at the end of the container.

-
-
1
-
2
-
3
+
+
+ 1 +
+
+ 2 +
+
+ 3 +
diff --git a/components/doc/alignitems/responsivedoc.js b/components/doc/alignitems/responsivedoc.js index eeee9d7..b7b36a7 100644 --- a/components/doc/alignitems/responsivedoc.js +++ b/components/doc/alignitems/responsivedoc.js @@ -53,9 +53,13 @@ export function ResponsiveDoc(props) {
-
-
1
-
2
+
+
+ 1 +
+
+ 2 +
diff --git a/components/doc/alignitems/startdoc.js b/components/doc/alignitems/startdoc.js index c0c6092..64029af 100644 --- a/components/doc/alignitems/startdoc.js +++ b/components/doc/alignitems/startdoc.js @@ -25,10 +25,16 @@ export function StartDoc(props) {

Items are located at the start of the container.

-
-
1
-
2
-
3
+
+
+ 1 +
+
+ 2 +
+
+ 3 +
diff --git a/components/doc/alignitems/stretchdoc.js b/components/doc/alignitems/stretchdoc.js index b890eac..9254d0e 100644 --- a/components/doc/alignitems/stretchdoc.js +++ b/components/doc/alignitems/stretchdoc.js @@ -25,10 +25,16 @@ export function StretchDoc(props) {

Items are stretched to fit the container.

-
-
1
-
2
-
3
+
+
+ 1 +
+
+ 2 +
+
+ 3 +
diff --git a/components/doc/alignself/baselinedoc.js b/components/doc/alignself/baselinedoc.js index 50d23e7..ce75af6 100644 --- a/components/doc/alignself/baselinedoc.js +++ b/components/doc/alignself/baselinedoc.js @@ -25,10 +25,16 @@ export function BaselineDoc(props) {

Item is located at the baseline of the container.

-
-
1
-
2
-
3
+
+
+ 1 +
+
+ 2 +
+
+ 3 +
diff --git a/components/doc/alignself/centerdoc.js b/components/doc/alignself/centerdoc.js index d60d6c3..ebec2b3 100644 --- a/components/doc/alignself/centerdoc.js +++ b/components/doc/alignself/centerdoc.js @@ -25,10 +25,16 @@ export function CenterDoc(props) {

Item is located at the center of the container.

-
-
1
-
2
-
3
+
+
+ 1 +
+
+ 2 +
+
+ 3 +
diff --git a/components/doc/alignself/enddoc.js b/components/doc/alignself/enddoc.js index 711c640..252f498 100644 --- a/components/doc/alignself/enddoc.js +++ b/components/doc/alignself/enddoc.js @@ -25,10 +25,16 @@ export function EndDoc(props) {

Item is located at the end of the container.

-
-
1
-
2
-
3
+
+
+ 1 +
+
+ 2 +
+
+ 3 +
diff --git a/components/doc/alignself/responsivedoc.js b/components/doc/alignself/responsivedoc.js index fe702d6..397e94e 100644 --- a/components/doc/alignself/responsivedoc.js +++ b/components/doc/alignself/responsivedoc.js @@ -55,10 +55,16 @@ export function ResponsiveDoc(props) {
-
-
1
-
2
-
3
+
+
+ 1 +
+
+ 2 +
+
+ 3 +
diff --git a/components/doc/alignself/startdoc.js b/components/doc/alignself/startdoc.js index bcb4164..64a14f2 100644 --- a/components/doc/alignself/startdoc.js +++ b/components/doc/alignself/startdoc.js @@ -25,10 +25,16 @@ export function StartDoc(props) {

Item is located at the start of the container.

-
-
1
-
2
-
3
+
+
+ 1 +
+
+ 2 +
+
+ 3 +
diff --git a/components/doc/alignself/stretchdoc.js b/components/doc/alignself/stretchdoc.js index 3a609a5..d2a3b12 100644 --- a/components/doc/alignself/stretchdoc.js +++ b/components/doc/alignself/stretchdoc.js @@ -25,10 +25,16 @@ export function StretchDoc(props) {

Item is stretched to fit the container.

-
-
1
-
2
-
3
+
+
+ 1 +
+
+ 2 +
+
+ 3 +
diff --git a/components/doc/animationdelay/examples.js b/components/doc/animationdelay/examples.js index fa353c6..7506a85 100644 --- a/components/doc/animationdelay/examples.js +++ b/components/doc/animationdelay/examples.js @@ -39,16 +39,22 @@ export function ExamplesDoc(props) {
-
+
scalein
-
+
scalein
-
+
scalein
diff --git a/components/doc/animationduration/examples.js b/components/doc/animationduration/examples.js index 5722985..55891ec 100644 --- a/components/doc/animationduration/examples.js +++ b/components/doc/animationduration/examples.js @@ -39,16 +39,22 @@ export function ExamplesDoc(props) {
-
+
scalein
-
+
scalein
-
+
scalein
diff --git a/components/doc/animationfill/examples.js b/components/doc/animationfill/examples.js index b2a32a9..42b1ba1 100644 --- a/components/doc/animationfill/examples.js +++ b/components/doc/animationfill/examples.js @@ -1,6 +1,6 @@ import { DocSectionCode } from '../common/docsectioncode'; import { DocSectionText } from '../common/docsectiontext'; -import Head from 'next/head' +import Head from 'next/head'; export function ExamplesDoc(props) { const code = { diff --git a/components/doc/animationiteration/examples.js b/components/doc/animationiteration/examples.js index 1acfa00..da3c73c 100644 --- a/components/doc/animationiteration/examples.js +++ b/components/doc/animationiteration/examples.js @@ -39,16 +39,22 @@ export function ExamplesDoc(props) {
-
+
iteration-1
-
+
iteration-2
-
+
iteration-infinite
diff --git a/components/doc/animations/classesdoc.js b/components/doc/animations/classesdoc.js index 0154ea6..bbfcc97 100644 --- a/components/doc/animations/classesdoc.js +++ b/components/doc/animations/classesdoc.js @@ -13,360 +13,624 @@ export function ClassesDoc(props) { - + fadein - animation: fadein 0.15s linear;

- @keyframes fadein {'{'}
-  0% {'{'}
-   opacity: 0;
-  {'}'}
-  100% {'{'}
-   opacity: 1;
-  {'}'}
- {'}'}
+ animation: fadein 0.15s linear; +
+
+ @keyframes fadein {'{'} +
+  0% {'{'} +
+   opacity: 0; +
+  {'}'} +
+  100% {'{'} +
+   opacity: 1; +
+  {'}'} +
+ {'}'} +
fadeout - animation: fadeout 0.15s linear;

- @keyframes fadeout {'{'}
-  0% {'{'}
-   opacity: 1;
-  {'}'}
-  100% {'{'}
-   opacity: 0;
-  {'}'}
- {'}'}
+ animation: fadeout 0.15s linear; +
+
+ @keyframes fadeout {'{'} +
+  0% {'{'} +
+   opacity: 1; +
+  {'}'} +
+  100% {'{'} +
+   opacity: 0; +
+  {'}'} +
+ {'}'} +
slidedown - animation: slidedown 0.45s linear;

- @keyframes slidedown {'{'}
-  0% {'{'}
-   max-height: 0;
-  {'}'}
-  100% {'{'}
-   max-height: auto;
-  {'}'}
- {'}'}
+ animation: slidedown 0.45s linear; +
+
+ @keyframes slidedown {'{'} +
+  0% {'{'} +
+   max-height: 0; +
+  {'}'} +
+  100% {'{'} +
+   max-height: auto; +
+  {'}'} +
+ {'}'} +
slidedown - animation: slideup 0.45s cubic-bezier(0, 1, 0, 1);

- @keyframes slideup {'{'}
-  0% {'{'}
-   max-height: 1000px;
-  {'}'}
-  100% {'{'}
-   max-height: 0;
-  {'}'}
- {'}'}
+ animation: slideup 0.45s cubic-bezier(0, 1, 0, 1); +
+
+ @keyframes slideup {'{'} +
+  0% {'{'} +
+   max-height: 1000px; +
+  {'}'} +
+  100% {'{'} +
+   max-height: 0; +
+  {'}'} +
+ {'}'} +
scalein - animation: scalein 0.15s linear;

- @keyframes scalein {'{'}
-  0% {'{'}
-   opacity: 0;
-   transform: scaleY(0.8);
-   transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
-  {'}'}
-  100% {'{'}
-   opacity: 1;
-   transform: scaleY(1);
-  {'}'}
- {'}'}
+ animation: scalein 0.15s linear; +
+
+ @keyframes scalein {'{'} +
+  0% {'{'} +
+   opacity: 0; +
+   transform: scaleY(0.8); +
+   transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1); +
+  {'}'} +
+  100% {'{'} +
+   opacity: 1; +
+   transform: scaleY(1); +
+  {'}'} +
+ {'}'} +
fadeinleft - animation: fadeinleft 0.15s linear;

- @keyframes fadeinleft {'{'}
-  0% {'{'}
-   opacity: 0;
-   transform: translateX(-100%);
-   transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
-  {'}'}
-  100% {'{'}
-   opacity: 1;
-   transform: translateX(0%);
-  {'}'}
- {'}'}
+ animation: fadeinleft 0.15s linear; +
+
+ @keyframes fadeinleft {'{'} +
+  0% {'{'} +
+   opacity: 0; +
+   transform: translateX(-100%); +
+   transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1); +
+  {'}'} +
+  100% {'{'} +
+   opacity: 1; +
+   transform: translateX(0%); +
+  {'}'} +
+ {'}'} +
fadeoutleft - animation: fadeoutleft 0.15s linear;

- @keyframes fadeoutleft {'{'}
-  0% {'{'}
-   opacity: 0;
-   transform: translateX(0%);
-   transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
-  {'}'}
-  100% {'{'}
-   opacity: 1;
-   transform: translateX(-100%);
-  {'}'}
- {'}'}
+ animation: fadeoutleft 0.15s linear; +
+
+ @keyframes fadeoutleft {'{'} +
+  0% {'{'} +
+   opacity: 0; +
+   transform: translateX(0%); +
+   transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1); +
+  {'}'} +
+  100% {'{'} +
+   opacity: 1; +
+   transform: translateX(-100%); +
+  {'}'} +
+ {'}'} +
fadeinright - animation: fadeinright 0.15s linear;

- @keyframes fadeinright {'{'}
-  0% {'{'}
-   opacity: 0;
-   transform: translateX(100%);
-   transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
-  {'}'}
-  100% {'{'}
-   opacity: 1;
-   transform: translateX(0%);
-  {'}'}
- {'}'}
+ animation: fadeinright 0.15s linear; +
+
+ @keyframes fadeinright {'{'} +
+  0% {'{'} +
+   opacity: 0; +
+   transform: translateX(100%); +
+   transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1); +
+  {'}'} +
+  100% {'{'} +
+   opacity: 1; +
+   transform: translateX(0%); +
+  {'}'} +
+ {'}'} +
fadeoutright - animation: fadeoutright 0.15s linear;

- @keyframes fadeoutright {'{'}
-  0% {'{'}
-   opacity: 0;
-   transform: translateX(0%);
-   transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
-  {'}'}
-  100% {'{'}
-   opacity: 1;
-   transform: translateX(100%);
-  {'}'}
- {'}'}
+ animation: fadeoutright 0.15s linear; +
+
+ @keyframes fadeoutright {'{'} +
+  0% {'{'} +
+   opacity: 0; +
+   transform: translateX(0%); +
+   transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1); +
+  {'}'} +
+  100% {'{'} +
+   opacity: 1; +
+   transform: translateX(100%); +
+  {'}'} +
+ {'}'} +
fadeinup - animation: fadeinup 0.15s linear;

- @keyframes fadeinup {'{'}
-  0% {'{'}
-   opacity: 0;
-   transform: translateY(-100%);
-   transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
-  {'}'}
-  100% {'{'}
-   opacity: 1;
-   transform: translateY(0%);
-  {'}'}
- {'}'}
+ animation: fadeinup 0.15s linear; +
+
+ @keyframes fadeinup {'{'} +
+  0% {'{'} +
+   opacity: 0; +
+   transform: translateY(-100%); +
+   transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1); +
+  {'}'} +
+  100% {'{'} +
+   opacity: 1; +
+   transform: translateY(0%); +
+  {'}'} +
+ {'}'} +
fadeoutup - animation: fadeoutup 0.15s linear;

- @keyframes fadeoutup {'{'}
-  0% {'{'}
-   opacity: 0;
-   transform: translateY(0%);
-   transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
-  {'}'}
-  100% {'{'}
-   opacity: 1;
-   transform: translateY(-100%);
-  {'}'}
- {'}'}
+ animation: fadeoutup 0.15s linear; +
+
+ @keyframes fadeoutup {'{'} +
+  0% {'{'} +
+   opacity: 0; +
+   transform: translateY(0%); +
+   transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1); +
+  {'}'} +
+  100% {'{'} +
+   opacity: 1; +
+   transform: translateY(-100%); +
+  {'}'} +
+ {'}'} +
fadeindown - animation: fadeindown 0.15s linear;

- @keyframes fadeindown {'{'}
-  0% {'{'}
-   opacity: 0;
-   transform: translateY(100%);
-   transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
-  {'}'}
-  100% {'{'}
-   opacity: 1;
-   transform: translateY(0%);
-  {'}'}
- {'}'}
+ animation: fadeindown 0.15s linear; +
+
+ @keyframes fadeindown {'{'} +
+  0% {'{'} +
+   opacity: 0; +
+   transform: translateY(100%); +
+   transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1); +
+  {'}'} +
+  100% {'{'} +
+   opacity: 1; +
+   transform: translateY(0%); +
+  {'}'} +
+ {'}'} +
fadeoutdown - animation: fadeoutdown 0.15s linear;

- @keyframes fadeoutdown {'{'}
-  0% {'{'}
-   opacity: 0;
-   transform: translateY(0%);
-   transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
-  {'}'}
-  100% {'{'}
-   opacity: 1;
-   transform: translateY(100%);
-  {'}'}
- {'}'}
+ animation: fadeoutdown 0.15s linear; +
+
+ @keyframes fadeoutdown {'{'} +
+  0% {'{'} +
+   opacity: 0; +
+   transform: translateY(0%); +
+   transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1); +
+  {'}'} +
+  100% {'{'} +
+   opacity: 1; +
+   transform: translateY(100%); +
+  {'}'} +
+ {'}'} +
animate-width - animation: animate-width 1000ms linear;

- @keyframes animate-width {'{'}
-  0% {'{'}
-   width: 0;
-  {'}'}
-  100% {'{'}
-   width: 100%;
-  {'}'}
- {'}'}
+ animation: animate-width 1000ms linear; +
+
+ @keyframes animate-width {'{'} +
+  0% {'{'} +
+   width: 0; +
+  {'}'} +
+  100% {'{'} +
+   width: 100%; +
+  {'}'} +
+ {'}'} +
flip - animation: flip .15s linear;

- @keyframes flip {'{'}
-  0% {'{'}
-   transform: perspective($animationPerspective) rotateX(-100deg);
-  {'}'}
-  100% {'{'}
-   transform: perspective($animationPerspective) rotateX(0);
-  {'}'}
- {'}'}
+ animation: flip .15s linear; +
+
+ @keyframes flip {'{'} +
+  0% {'{'} +
+   transform: perspective($animationPerspective) rotateX(-100deg); +
+  {'}'} +
+  100% {'{'} +
+   transform: perspective($animationPerspective) rotateX(0); +
+  {'}'} +
+ {'}'} +
flipleft - animation: flipleft .15s linear;

- @keyframes flipleft {'{'}
-  0% {'{'}
-   transform: perspective($animationPerspective) rotateY(-100deg);
-   opacity: 0;
-  {'}'}
-   transform: perspective($animationPerspective) rotateY(0);
-   opacity: 1;
-  {'}'}
- {'}'}
+ animation: flipleft .15s linear; +
+
+ @keyframes flipleft {'{'} +
+  0% {'{'} +
+   transform: perspective($animationPerspective) rotateY(-100deg); +
+   opacity: 0; +
+  {'}'} +
+   transform: perspective($animationPerspective) rotateY(0); +
+   opacity: 1; +
+  {'}'} +
+ {'}'} +
flipright - animation: flipright .15s linear;

- @keyframes flipright {'{'}
-  0% {'{'}
-   transform: perspective($animationPerspective) rotateY(100deg);
-   opacity: 0;
-  {'}'}
-   transform: perspective($animationPerspective) rotateY(0);
-   opacity: 1;
-  {'}'}
- {'}'}
+ animation: flipright .15s linear; +
+
+ @keyframes flipright {'{'} +
+  0% {'{'} +
+   transform: perspective($animationPerspective) rotateY(100deg); +
+   opacity: 0; +
+  {'}'} +
+   transform: perspective($animationPerspective) rotateY(0); +
+   opacity: 1; +
+  {'}'} +
+ {'}'} +
flipup - animation: flipup .15s linear;

- @keyframes flipup {'{'}
-  0% {'{'}
-   transform: perspective($animationPerspective) rotateX(-100deg);
-   opacity: 0;
-  {'}'}
-   transform: perspective($animationPerspective) rotateX(0);
-   opacity: 1;
-  {'}'}
- {'}'}
+ animation: flipup .15s linear; +
+
+ @keyframes flipup {'{'} +
+  0% {'{'} +
+   transform: perspective($animationPerspective) rotateX(-100deg); +
+   opacity: 0; +
+  {'}'} +
+   transform: perspective($animationPerspective) rotateX(0); +
+   opacity: 1; +
+  {'}'} +
+ {'}'} +
zoomin - animation: zoomin .15s linear;

- @keyframes zoomin {'{'}
-  0% {'{'}
-   opacity: 0;
-   transform: scale3d(0.3, 0.3, 0.3);
-  {'}'}
-   opacity: 1;
-  {'}'}
- {'}'}
+ animation: zoomin .15s linear; +
+
+ @keyframes zoomin {'{'} +
+  0% {'{'} +
+   opacity: 0; +
+   transform: scale3d(0.3, 0.3, 0.3); +
+  {'}'} +
+   opacity: 1; +
+  {'}'} +
+ {'}'} +
zoomindown - animation: zoomindown .15s linear;

- @keyframes zoomindown {'{'}
-  0% {'{'}
-   opacity: 0;
-   transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
-  {'}'}
-   opacity: 1;
-   transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
-  {'}'}
- {'}'}
+ animation: zoomindown .15s linear; +
+
+ @keyframes zoomindown {'{'} +
+  0% {'{'} +
+   opacity: 0; +
+   transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); +
+  {'}'} +
+   opacity: 1; +
+   transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); +
+  {'}'} +
+ {'}'} +
zoominleft - animation: zoominleft .15s linear;

- @keyframes zoominleft {'{'}
-  0% {'{'}
-   opacity: 0;
-   transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
-  {'}'}
-   opacity: 1;
-   transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
-  {'}'}
- {'}'}
+ animation: zoominleft .15s linear; +
+
+ @keyframes zoominleft {'{'} +
+  0% {'{'} +
+   opacity: 0; +
+   transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); +
+  {'}'} +
+   opacity: 1; +
+   transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); +
+  {'}'} +
+ {'}'} +
zoomninright - animation: zoomninright .15s linear;

- @keyframes zoomninright {'{'}
-  0% {'{'}
-   opacity: 0;
-   transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
-  {'}'}
-   opacity: 1;
-   transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
-  {'}'}
- {'}'}
+ animation: zoomninright .15s linear; +
+
+ @keyframes zoomninright {'{'} +
+  0% {'{'} +
+   opacity: 0; +
+   transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); +
+  {'}'} +
+   opacity: 1; +
+   transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); +
+  {'}'} +
+ {'}'} +
zoominup - animation: zoominup .15s linear;

- @keyframes zoominup {'{'}
-  0% {'{'}
-   opacity: 0;
-   transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
-  {'}'}
-   opacity: 1;
-   transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
-  {'}'}
- {'}'}
+ animation: zoominup .15s linear; +
+
+ @keyframes zoominup {'{'} +
+  0% {'{'} +
+   opacity: 0; +
+   transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); +
+  {'}'} +
+   opacity: 1; +
+   transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); +
+  {'}'} +
+ {'}'} +
diff --git a/components/doc/animations/fadeinleftdoc.js b/components/doc/animations/fadeinleftdoc.js index da6a7d9..8a842cb 100644 --- a/components/doc/animations/fadeinleftdoc.js +++ b/components/doc/animations/fadeinleftdoc.js @@ -25,8 +25,10 @@ export function FadeinleftDoc(props) {
-
+
fadeinleft
diff --git a/components/doc/animations/fadeoutleftdoc.js b/components/doc/animations/fadeoutleftdoc.js index 872b0f5..9ab33d2 100644 --- a/components/doc/animations/fadeoutleftdoc.js +++ b/components/doc/animations/fadeoutleftdoc.js @@ -25,8 +25,10 @@ export function FadeoutleftDoc(props) {
-
+
fadeoutleft
diff --git a/components/doc/animations/scaleindoc.js b/components/doc/animations/scaleindoc.js index 13ec4f1..ef1203e 100644 --- a/components/doc/animations/scaleindoc.js +++ b/components/doc/animations/scaleindoc.js @@ -25,8 +25,10 @@ export function ScaleinDoc(props) {
-
+
scalein
diff --git a/components/doc/animationtimingfunction/examples.js b/components/doc/animationtimingfunction/examples.js index 928c131..ff0ad62 100644 --- a/components/doc/animationtimingfunction/examples.js +++ b/components/doc/animationtimingfunction/examples.js @@ -46,20 +46,28 @@ export function ExamplesDoc(props) {
-
+
linear
-
+
ease-in
-
+
ease-out
-
+
ease-in-out
diff --git a/components/doc/backgroundcolor/classesdoc.js b/components/doc/backgroundcolor/classesdoc.js index 19ad085..a094de3 100644 --- a/components/doc/backgroundcolor/classesdoc.js +++ b/components/doc/backgroundcolor/classesdoc.js @@ -21,7 +21,7 @@ export function ClassesDoc(props) { color: var(--primary-color-text); -
+
A
@@ -33,7 +33,7 @@ export function ClassesDoc(props) { color: var(--primary-color); -
+
A
@@ -42,1155 +42,1155 @@ export function ClassesDoc(props) { bg-white background-color: #ffffff; -
+
surface-ground background-color: var(--surface-ground); -
+
surface-section background-color: var(--surface-section); -
+
surface-card background-color: var(--surface-card); -
+
surface-overlay background-color: var(--surface-overlay); -
+
surface-hover background-color: var(--surface-hover); -
+
surface-0 background-color: var(--surface-0); -
+
surface-50 background-color: var(--surface-50); -
+
surface-100 background-color: var(--surface-100); -
+
surface-200 background-color: var(--surface-200); -
+
surface-300 background-color: var(--surface-300); -
+
surface-400 background-color: var(--surface-400); -
+
surface-500 background-color: var(--surface-500); -
+
surface-600 background-color: var(--surface-600); -
+
surface-700 background-color: var(--surface-700); -
+
surface-800 background-color: var(--surface-800); -
+
surface-900 background-color: var(--surface-900); -
+
bg-blue-50 background-color: var(--blue-50); -
+
bg-blue-100 background-color: var(--blue-100); -
+
bg-blue-200 background-color: var(--blue-200); -
+
bg-blue-300 background-color: var(--blue-300); -
+
bg-blue-400 background-color: var(--blue-400); -
+
bg-blue-500 background-color: var(--blue-500); -
+
bg-blue-600 background-color: var(--blue-600); -
+
bg-blue-700 background-color: var(--blue-700); -
+
bg-blue-800 background-color: var(--blue-800); -
+
bg-blue-900 background-color: var(--blue-900); -
+
bg-green-50 background-color: var(--green-50); -
+
bg-green-100 background-color: var(--green-100); -
+
bg-green-200 background-color: var(--green-200); -
+
bg-green-300 background-color: var(--green-300); -
+
bg-green-400 background-color: var(--green-400); -
+
bg-green-500 background-color: var(--green-500); -
+
bg-green-600 background-color: var(--green-600); -
+
bg-green-700 background-color: var(--green-700); -
+
bg-green-800 background-color: var(--green-800); -
+
bg-green-900 background-color: var(--green-900); -
+
bg-yellow-50 background-color: var(--yellow-50); -
+
bg-yellow-100 background-color: var(--yellow-100); -
+
bg-yellow-200 background-color: var(--yellow-200); -
+
bg-yellow-300 background-color: var(--yellow-300); -
+
bg-yellow-400 background-color: var(--yellow-400); -
+
bg-yellow-500 background-color: var(--yellow-500); -
+
bg-yellow-600 background-color: var(--yellow-600); -
+
bg-yellow-700 background-color: var(--yellow-700); -
+
bg-yellow-800 background-color: var(--yellow-800); -
+
bg-yellow-900 background-color: var(--yellow-900); -
+
bg-cyan-50 background-color: var(--cyan-50); -
+
bg-cyan-100 background-color: var(--cyan-100); -
+
bg-cyan-200 background-color: var(--cyan-200); -
+
bg-cyan-300 background-color: var(--cyan-300); -
+
bg-cyan-400 background-color: var(--cyan-400); -
+
bg-cyan-500 background-color: var(--cyan-500); -
+
bg-cyan-600 background-color: var(--cyan-600); -
+
bg-cyan-700 background-color: var(--cyan-700); -
+
bg-cyan-800 background-color: var(--cyan-800); -
+
bg-cyan-900 background-color: var(--cyan-900); -
+
bg-pink-50 background-color: var(--pink-50); -
+
bg-pink-100 background-color: var(--pink-100); -
+
bg-pink-200 background-color: var(--pink-200); -
+
bg-pink-300 background-color: var(--pink-300); -
+
bg-pink-400 background-color: var(--pink-400); -
+
bg-pink-500 background-color: var(--pink-500); -
+
bg-pink-600 background-color: var(--pink-600); -
+
bg-pink-700 background-color: var(--pink-700); -
+
bg-pink-800 background-color: var(--pink-800); -
+
bg-pink-900 background-color: var(--pink-900); -
+
bg-indigo-50 background-color: var(--indigo-50); -
+
bg-indigo-100 background-color: var(--indigo-100); -
+
bg-indigo-200 background-color: var(--indigo-200); -
+
bg-indigo-300 background-color: var(--indigo-300); -
+
bg-indigo-400 background-color: var(--indigo-400); -
+
bg-indigo-500 background-color: var(--indigo-500); -
+
bg-indigo-600 background-color: var(--indigo-600); -
+
bg-indigo-700 background-color: var(--indigo-700); -
+
bg-indigo-800 background-color: var(--indigo-800); -
+
bg-indigo-900 background-color: var(--indigo-900); -
+
bg-teal-50 background-color: var(--teal-50); -
+
bg-teal-100 background-color: var(--teal-100); -
+
bg-teal-200 background-color: var(--teal-200); -
+
bg-teal-300 background-color: var(--teal-300); -
+
bg-teal-400 background-color: var(--teal-400); -
+
bg-teal-500 background-color: var(--teal-500); -
+
bg-teal-600 background-color: var(--teal-600); -
+
bg-teal-700 background-color: var(--teal-700); -
+
bg-teal-800 background-color: var(--teal-800); -
+
bg-teal-900 background-color: var(--teal-900); -
+
bg-orange-50 background-color: var(--orange-50); -
+
bg-orange-100 background-color: var(--orange-100); -
+
bg-orange-200 background-color: var(--orange-200); -
+
bg-orange-300 background-color: var(--orange-300); -
+
bg-orange-400 background-color: var(--orange-400); -
+
bg-orange-500 background-color: var(--orange-500); -
+
bg-orange-600 background-color: var(--orange-600); -
+
bg-orange-700 background-color: var(--orange-700); -
+
bg-orange-800 background-color: var(--orange-800); -
+
bg-orange-900 background-color: var(--orange-900); -
+
bg-bluegray-50 background-color: var(--bluegray-50); -
+
bg-bluegray-100 background-color: var(--bluegray-100); -
+
bg-bluegray-200 background-color: var(--bluegray-200); -
+
bg-bluegray-300 background-color: var(--bluegray-300); -
+
bg-bluegray-400 background-color: var(--bluegray-400); -
+
bg-bluegray-500 background-color: var(--bluegray-500); -
+
bg-bluegray-600 background-color: var(--bluegray-600); -
+
bg-bluegray-700 background-color: var(--bluegray-700); -
+
bg-bluegray-800 background-color: var(--bluegray-800); -
+
bg-bluegray-900 background-color: var(--bluegray-900); -
+
bg-purple-50 background-color: var(--purple-50); -
+
bg-purple-100 background-color: var(--purple-100); -
+
bg-purple-200 background-color: var(--purple-200); -
+
bg-purple-300 background-color: var(--purple-300); -
+
bg-purple-400 background-color: var(--purple-400); -
+
bg-purple-500 background-color: var(--purple-500); -
+
bg-purple-600 background-color: var(--purple-600); -
+
bg-purple-700 background-color: var(--purple-700); -
+
bg-purple-800 background-color: var(--purple-800); -
+
bg-purple-900 background-color: var(--purple-900); -
+
bg-gray-50 background-color: var(--gray-50); -
+
bg-gray-100 background-color: var(--gray-100); -
+
bg-gray-200 background-color: var(--gray-200); -
+
bg-gray-300 background-color: var(--gray-300); -
+
bg-gray-400 background-color: var(--gray-400); -
+
bg-gray-500 background-color: var(--gray-500); -
+
bg-gray-600 background-color: var(--gray-600); -
+
bg-gray-700 background-color: var(--gray-700); -
+
bg-gray-800 background-color: var(--gray-800); -
+
bg-gray-900 background-color: var(--gray-900); -
+
bg-red-50 background-color: var(--red-50); -
+
bg-red-100 background-color: var(--red-100); -
+
bg-red-200 background-color: var(--red-200); -
+
bg-red-300 background-color: var(--red-300); -
+
bg-red-400 background-color: var(--red-400); -
+
bg-red-500 background-color: var(--red-500); -
+
bg-red-600 background-color: var(--red-600); -
+
bg-red-700 background-color: var(--red-700); -
+
bg-red-800 background-color: var(--red-800); -
+
bg-red-900 background-color: var(--red-900); -
+
bg-primary-50 background-color: var(--primary-50); -
+
bg-primary-100 background-color: var(--primary-100); -
+
bg-primary-200 background-color: var(--primary-200); -
+
bg-primary-300 background-color: var(--primary-300); -
+
bg-primary-400 background-color: var(--primary-400); -
+
bg-primary-500 background-color: var(--primary-500); -
+
bg-primary-600 background-color: var(--primary-600); -
+
bg-primary-700 background-color: var(--primary-700); -
+
bg-primary-800 background-color: var(--primary-800); -
+
bg-primary-900 background-color: var(--primary-900); -
+
bg-white-alpha-10 background-color: rgba(255,255,255,0.1); -
+
bg-white-alpha-20 background-color: rgba(255,255,255,0.2); -
+
bg-white-alpha-30 background-color: rgba(255,255,255,0.3); -
+
bg-white-alpha-40 background-color: rgba(255,255,255,0.4); -
+
bg-white-alpha-50 background-color: rgba(255,255,255,0.5); -
+
bg-white-alpha-60 background-color: rgba(255,255,255,0.6); -
+
bg-white-alpha-70 background-color: rgba(255,255,255,0.7); -
+
bg-white-alpha-80 background-color: rgba(255,255,255,0.8); -
+
bg-white-alpha-90 background-color: rgba(255,255,255,0.9); -
+
bg-black-alpha-10 background-color: rgba(0,0,0,0.1); -
+
bg-black-alpha-20 background-color: rgba(0,0,0,0.2); -
+
bg-black-alpha-30 background-color: rgba(0,0,0,0.3); -
+
bg-black-alpha-40 background-color: rgba(0,0,0,0.4); -
+
bg-black-alpha-50 background-color: rgba(0,0,0,0.5); -
+
bg-black-alpha-60 background-color: rgba(0,0,0,0.6); -
+
bg-black-alpha-70 background-color: rgba(0,0,0,0.7); -
+
bg-black-alpha-80 background-color: rgba(0,0,0,0.8); -
+
bg-black-alpha-90 background-color: rgba(0,0,0,0.9); -
+
diff --git a/components/doc/backgroundposition/responsivedoc.js b/components/doc/backgroundposition/responsivedoc.js index d285097..66d3609 100644 --- a/components/doc/backgroundposition/responsivedoc.js +++ b/components/doc/backgroundposition/responsivedoc.js @@ -52,7 +52,7 @@ export function ResponsiveDoc(props) {
-
+
diff --git a/components/doc/backgroundrepeat/repeatdoc.js b/components/doc/backgroundrepeat/repeatdoc.js index 9b3f4c5..cefdfe4 100644 --- a/components/doc/backgroundrepeat/repeatdoc.js +++ b/components/doc/backgroundrepeat/repeatdoc.js @@ -21,8 +21,8 @@ export function RepeatDoc(props) {

Background image is repeated both vertically and horizontally.

-
-
+
+
diff --git a/components/doc/backgroundrepeat/repeathorizontallydoc.js b/components/doc/backgroundrepeat/repeathorizontallydoc.js index 68ad76b..04984bd 100644 --- a/components/doc/backgroundrepeat/repeathorizontallydoc.js +++ b/components/doc/backgroundrepeat/repeathorizontallydoc.js @@ -18,12 +18,11 @@ export function RepeatHorizontallyDoc(props) { return ( <> -

Background image is repeated horizontally only.

+

Background image is repeated horizontally only.
-
+
diff --git a/components/doc/backgroundrepeat/repeatrounddoc.js b/components/doc/backgroundrepeat/repeatrounddoc.js index 7b1b2e8..1f3bd91 100644 --- a/components/doc/backgroundrepeat/repeatrounddoc.js +++ b/components/doc/backgroundrepeat/repeatrounddoc.js @@ -18,12 +18,11 @@ export function RepeatRoundDoc(props) { return ( <> -

Background image is repeated or stretched to fill space

+

Background image is repeated or stretched to fill space
-
+
diff --git a/components/doc/backgroundrepeat/repeatspacedoc.js b/components/doc/backgroundrepeat/repeatspacedoc.js index 7214e0f..8d6a41b 100644 --- a/components/doc/backgroundrepeat/repeatspacedoc.js +++ b/components/doc/backgroundrepeat/repeatspacedoc.js @@ -18,12 +18,11 @@ export function RepeatSpaceDoc(props) { return ( <> -

Background image is repeated without clipping.

+

Background image is repeated without clipping.
-
+
diff --git a/components/doc/backgroundsize/containdoc.js b/components/doc/backgroundsize/containdoc.js index 471c324..54921c3 100644 --- a/components/doc/backgroundsize/containdoc.js +++ b/components/doc/backgroundsize/containdoc.js @@ -18,7 +18,7 @@ export function ContainDoc(props) { return ( <> -

Image is resized to fill the container

+

Image is resized to fill the container
diff --git a/components/doc/backgroundsize/coverdoc.js b/components/doc/backgroundsize/coverdoc.js index 6213f3a..ac9dd57 100644 --- a/components/doc/backgroundsize/coverdoc.js +++ b/components/doc/backgroundsize/coverdoc.js @@ -18,7 +18,7 @@ export function CoverDoc(props) { return ( <> -

Image is resized to cover the container fully by stretching of clipping if necessary.

+

Image is resized to cover the container fully by stretching of clipping if necessary.
diff --git a/components/doc/bordercolor/classesdoc.js b/components/doc/bordercolor/classesdoc.js index 6093086..54bac60 100644 --- a/components/doc/bordercolor/classesdoc.js +++ b/components/doc/bordercolor/classesdoc.js @@ -18,1141 +18,1141 @@ export function ClassesDoc(props) { border-primary border-color: var(--primary-color); -
+
border-white border-color: #ffffff; -
+
border-transparent border-color: transparent; -
+
surface-border border-color: var(--surface-border); -
+
border-0 border-color: var(--surface-0); -
+
border-50 border-color: var(--surface-50); -
+
border-200 border-color: var(--surface-100); -
+
border-200 border-color: var(--surface-200); -
+
border-300 border-color: var(--surface-300); -
+
border-400 border-color: var(--surface-400); -
+
border-500 border-color: var(--surface-500); -
+
border-600 border-color: var(--surface-600); -
+
border-700 border-color: var(--surface-700); -
+
border-800 border-color: var(--surface-800); -
+
border-900 border-color: var(--surface-900); -
+
border-blue-50 border-color: var(--blue-50); -
+
border-blue-100 border-color: var(--blue-100); -
+
border-blue-200 border-color: var(--blue-200); -
+
border-blue-300 border-color: var(--blue-300); -
+
border-blue-400 border-color: var(--blue-400); -
+
border-blue-500 border-color: var(--blue-500); -
+
border-blue-600 border-color: var(--blue-600); -
+
border-blue-700 border-color: var(--blue-700); -
+
border-blue-800 border-color: var(--blue-800); -
+
border-blue-900 border-color: var(--blue-900); -
+
border-green-50 border-color: var(--green-50); -
+
border-green-100 border-color: var(--green-100); -
+
border-green-200 border-color: var(--green-200); -
+
border-green-300 border-color: var(--green-300); -
+
border-green-400 border-color: var(--green-400); -
+
border-green-500 border-color: var(--green-500); -
+
border-green-600 border-color: var(--green-600); -
+
border-green-700 border-color: var(--green-700); -
+
border-green-800 border-color: var(--green-800); -
+
border-green-900 border-color: var(--green-900); -
+
border-yellow-50 border-color: var(--yellow-50); -
+
border-yellow-100 border-color: var(--yellow-100); -
+
border-yellow-200 border-color: var(--yellow-200); -
+
border-yellow-300 border-color: var(--yellow-300); -
+
border-yellow-400 border-color: var(--yellow-400); -
+
border-yellow-500 border-color: var(--yellow-500); -
+
border-yellow-600 border-color: var(--yellow-600); -
+
border-yellow-700 border-color: var(--yellow-700); -
+
border-yellow-800 border-color: var(--yellow-800); -
+
border-yellow-900 border-color: var(--yellow-900); -
+
border-cyan-50 border-color: var(--cyan-50); -
+
border-cyan-100 border-color: var(--cyan-100); -
+
border-cyan-200 border-color: var(--cyan-200); -
+
border-cyan-300 border-color: var(--cyan-300); -
+
border-cyan-400 border-color: var(--cyan-400); -
+
border-cyan-500 border-color: var(--cyan-500); -
+
border-cyan-600 border-color: var(--cyan-600); -
+
border-cyan-700 border-color: var(--cyan-700); -
+
border-cyan-800 border-color: var(--cyan-800); -
+
border-cyan-900 border-color: var(--cyan-900); -
+
border-pink-50 border-color: var(--pink-50); -
+
border-pink-100 border-color: var(--pink-100); -
+
border-pink-200 border-color: var(--pink-200); -
+
border-pink-300 border-color: var(--pink-300); -
+
border-pink-400 border-color: var(--pink-400); -
+
border-pink-500 border-color: var(--pink-500); -
+
border-pink-600 border-color: var(--pink-600); -
+
border-pink-700 border-color: var(--pink-700); -
+
border-pink-800 border-color: var(--pink-800); -
+
border-pink-900 border-color: var(--pink-900); -
+
border-indigo-50 border-color: var(--indigo-50); -
+
border-indigo-100 border-color: var(--indigo-100); -
+
border-indigo-200 border-color: var(--indigo-200); -
+
border-indigo-300 border-color: var(--indigo-300); -
+
border-indigo-400 border-color: var(--indigo-400); -
+
border-indigo-500 border-color: var(--indigo-500); -
+
border-indigo-600 border-color: var(--indigo-600); -
+
border-indigo-700 border-color: var(--indigo-700); -
+
border-indigo-800 border-color: var(--indigo-800); -
+
border-indigo-900 border-color: var(--indigo-900); -
+
border-teal-50 border-color: var(--teal-50); -
+
border-teal-100 border-color: var(--teal-100); -
+
border-teal-200 border-color: var(--teal-200); -
+
border-teal-300 border-color: var(--teal-300); -
+
border-teal-400 border-color: var(--teal-400); -
+
border-teal-500 border-color: var(--teal-500); -
+
border-teal-600 border-color: var(--teal-600); -
+
border-teal-700 border-color: var(--teal-700); -
+
border-teal-800 border-color: var(--teal-800); -
+
border-teal-900 border-color: var(--teal-900); -
+
border-orange-50 border-color: var(--orange-50); -
+
border-orange-100 border-color: var(--orange-100); -
+
border-orange-200 border-color: var(--orange-200); -
+
border-orange-300 border-color: var(--orange-300); -
+
border-orange-400 border-color: var(--orange-400); -
+
border-orange-500 border-color: var(--orange-500); -
+
border-orange-600 border-color: var(--orange-600); -
+
border-orange-700 border-color: var(--orange-700); -
+
border-orange-800 border-color: var(--orange-800); -
+
border-orange-900 border-color: var(--orange-900); -
+
border-bluegray-50 border-color: var(--bluegray-50); -
+
border-bluegray-100 border-color: var(--bluegray-100); -
+
border-bluegray-200 border-color: var(--bluegray-200); -
+
border-bluegray-300 border-color: var(--bluegray-300); -
+
border-bluegray-400 border-color: var(--bluegray-400); -
+
border-bluegray-500 border-color: var(--bluegray-500); -
+
border-bluegray-600 border-color: var(--bluegray-600); -
+
border-bluegray-700 border-color: var(--bluegray-700); -
+
border-bluegray-800 border-color: var(--bluegray-800); -
+
border-bluegray-900 border-color: var(--bluegray-900); -
+
border-purple-50 border-color: var(--purple-50); -
+
border-purple-100 border-color: var(--purple-100); -
+
border-purple-200 border-color: var(--purple-200); -
+
border-purple-300 border-color: var(--purple-300); -
+
border-purple-400 border-color: var(--purple-400); -
+
border-purple-500 border-color: var(--purple-500); -
+
border-purple-600 border-color: var(--purple-600); -
+
border-purple-700 border-color: var(--purple-700); -
+
border-purple-800 border-color: var(--purple-800); -
+
border-purple-900 border-color: var(--purple-900); -
+
border-gray-50 border-color: var(--gray-50); -
+
border-gray-100 border-color: var(--gray-100); -
+
border-gray-200 border-color: var(--gray-200); -
+
border-gray-300 border-color: var(--gray-300); -
+
border-gray-400 border-color: var(--gray-400); -
+
border-gray-500 border-color: var(--gray-500); -
+
border-gray-600 border-color: var(--gray-600); -
+
border-gray-700 border-color: var(--gray-700); -
+
border-gray-800 border-color: var(--gray-800); -
+
border-gray-900 border-color: var(--gray-900); -
+
border-red-50 border-color: var(--red-50); -
+
border-red-100 border-color: var(--red-100); -
+
border-red-200 border-color: var(--red-200); -
+
border-red-300 border-color: var(--red-300); -
+
border-red-400 border-color: var(--red-400); -
+
border-red-500 border-color: var(--red-500); -
+
border-red-600 border-color: var(--red-600); -
+
border-red-700 border-color: var(--red-700); -
+
border-red-800 border-color: var(--red-800); -
+
border-red-900 border-color: var(--red-900); -
+
border-primary-50 border-color: var(--primary-50); -
+
border-primary-100 border-color: var(--primary-100); -
+
border-primary-200 border-color: var(--primary-200); -
+
border-primary-300 border-color: var(--primary-300); -
+
border-primary-400 border-color: var(--primary-400); -
+
border-primary-500 border-color: var(--primary-500); -
+
border-primary-600 border-color: var(--primary-600); -
+
border-primary-700 border-color: var(--primary-700); -
+
border-primary-800 border-color: var(--primary-800); -
+
border-primary-900 border-color: var(--primary-900); -
+
border-white-alpha-10 border-color: rgba(255,255,255,0.1); -
+
border-white-alpha-20 border-color: rgba(255,255,255,0.2); -
+
border-white-alpha-30 border-color: rgba(255,255,255,0.3); -
+
border-white-alpha-40 border-color: rgba(255,255,255,0.4); -
+
border-white-alpha-50 border-color: rgba(255,255,255,0.5); -
+
border-white-alpha-60 border-color: rgba(255,255,255,0.6); -
+
border-white-alpha-70 border-color: rgba(255,255,255,0.7); -
+
border-white-alpha-80 border-color: rgba(255,255,255,0.8); -
+
border-white-alpha-90 border-color: rgba(255,255,255,0.9); -
+
border-black-alpha-10 border-color: rgba(0,0,0,0.1); -
+
border-black-alpha-20 border-color: rgba(0,0,0,0.2); -
+
border-black-alpha-30 border-color: rgba(0,0,0,0.3); -
+
border-black-alpha-40 border-color: rgba(0,0,0,0.4); -
+
border-black-alpha-50 border-color: rgba(0,0,0,0.5); -
+
border-black-alpha-60 border-color: rgba(0,0,0,0.6); -
+
border-black-alpha-70 border-color: rgba(0,0,0,0.7); -
+
border-black-alpha-80 border-color: rgba(0,0,0,0.8); -
+
border-black-alpha-90 border-color: rgba(0,0,0,0.9); -
+
diff --git a/components/doc/borderstyle/classesdoc.js b/components/doc/borderstyle/classesdoc.js index 7a49cc9..1525b83 100644 --- a/components/doc/borderstyle/classesdoc.js +++ b/components/doc/borderstyle/classesdoc.js @@ -2,7 +2,8 @@ import { DocSectionText } from '../common/docsectiontext'; export function ClassesDoc(props) { return ( - <>bordercolor + <> + bordercolor
diff --git a/components/doc/common/docsectioncode.js b/components/doc/common/docsectioncode.js index b3263d4..acae669 100644 --- a/components/doc/common/docsectioncode.js +++ b/components/doc/common/docsectioncode.js @@ -40,15 +40,17 @@ export function DocSectionCode(props) { )} - + diff --git a/components/doc/display/classesdoc.js b/components/doc/display/classesdoc.js index a7558fb..efe767e 100644 --- a/components/doc/display/classesdoc.js +++ b/components/doc/display/classesdoc.js @@ -3,9 +3,7 @@ import { DocSectionText } from '../common/docsectiontext'; export function ClassesDoc(props) { return ( <> - - - +
diff --git a/components/doc/display/hiddendoc.js b/components/doc/display/hiddendoc.js index 2983c3e..4330644 100644 --- a/components/doc/display/hiddendoc.js +++ b/components/doc/display/hiddendoc.js @@ -3,13 +3,13 @@ import { DocSectionText } from '../common/docsectiontext'; export function HiddenDoc(props) { const code = { - basic:`
+ basic: `
2
3
`, - expanded:`
+ expanded: `
2
@@ -24,13 +24,13 @@ export function HiddenDoc(props) {

A hidden element is not visible and does not allocate space.

 -
-
-
1
-
2
-
3
-
+
+
+
1
+
2
+
3
+
); diff --git a/components/doc/flex/classesdoc.js b/components/doc/flex/classesdoc.js index 69cff36..d83a174 100644 --- a/components/doc/flex/classesdoc.js +++ b/components/doc/flex/classesdoc.js @@ -3,9 +3,7 @@ import { DocSectionText } from '../common/docsectiontext'; export function ClassesDoc(props) { return ( <> - - - +
diff --git a/components/doc/flex/flex1.js b/components/doc/flex/flex1.js index 2b39bf6..d52a4e7 100644 --- a/components/doc/flex/flex1.js +++ b/components/doc/flex/flex1.js @@ -36,9 +36,7 @@ export function Flex1Doc(props) { return ( <> -

- Sets grow and shrink to 1 to auto grow and shrink while keeping flex-basis to 0. -

+

Sets grow and shrink to 1 to auto grow and shrink while keeping flex-basis to 0.

diff --git a/components/doc/flexdirection/classesdoc.js b/components/doc/flexdirection/classesdoc.js index cc69061..79d0c03 100644 --- a/components/doc/flexdirection/classesdoc.js +++ b/components/doc/flexdirection/classesdoc.js @@ -3,9 +3,7 @@ import { DocSectionText } from '../common/docsectiontext'; export function ClassesDoc(props) { return ( <> - - - +
diff --git a/components/doc/flexwrap/classesdoc.js b/components/doc/flexwrap/classesdoc.js index db3dffb..86fd753 100644 --- a/components/doc/flexwrap/classesdoc.js +++ b/components/doc/flexwrap/classesdoc.js @@ -3,9 +3,7 @@ import { DocSectionText } from '../common/docsectiontext'; export function ClassesDoc(props) { return ( <> - - - +
diff --git a/components/doc/formlayout/advanceddoc.js b/components/doc/formlayout/advanceddoc.js index 0bb4f04..d9a17e5 100644 --- a/components/doc/formlayout/advanceddoc.js +++ b/components/doc/formlayout/advanceddoc.js @@ -38,7 +38,7 @@ export function AdvancedDoc(props) { `, -expanded: `
+ expanded: `
diff --git a/components/doc/gridsystem/classesdoc.js b/components/doc/gridsystem/classesdoc.js index f59d1d9..9621489 100644 --- a/components/doc/gridsystem/classesdoc.js +++ b/components/doc/gridsystem/classesdoc.js @@ -1,4 +1,5 @@ -import { DocSectionText } from '../common/docsectiontext';
+import { DocSectionText } from '../common/docsectiontext'; +
; export function ClassesDoc(props) { return ( @@ -15,181 +16,277 @@ export function ClassesDoc(props) {
- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
grid - display: flex;
flex-wrap: wrap;
margin-right: -0.5rem;
margin-left: -0.5rem;
margin-top: -0.5rem;
+ 		+ display: flex; +
+ flex-wrap: wrap; +
+ margin-right: -0.5rem; +
+ margin-left: -0.5rem; +
+ margin-top: -0.5rem; +
grid-nogutter - margin-right: 0;
margin-left: 0;
margin-top: 0;
+ 		+ margin-right: 0; +
+ margin-left: 0; +
+ margin-top: 0; +
col - flex-grow: 1;
flex-basis: 0;
padding: $gutter;
+ 		+ flex-grow: 1; +
+ flex-basis: 0; +
+ padding: $gutter; +
col-fixed - flex: 0 0 auto;
padding: $gutter;
+ 		+ flex: 0 0 auto; +
+ padding: $gutter; +
col-1 - flex: 0 0 auto;
padding: $gutter;
width: 8.3333%;
+ 		+ flex: 0 0 auto; +
+ padding: $gutter; +
+ width: 8.3333%; +
col-2 - flex: 0 0 auto;
padding: $gutter;
width: 16.6667%;
+ 		+ flex: 0 0 auto; +
+ padding: $gutter; +
+ width: 16.6667%; +
col-3 - flex: 0 0 auto;
padding: $gutter;
width: 25%;
+ 		+ flex: 0 0 auto; +
+ padding: $gutter; +
+ width: 25%; +
col-4 - flex: 0 0 auto;
padding: $gutter;
width: 33.3333%;
+ 		+ flex: 0 0 auto; +
+ padding: $gutter; +
+ width: 33.3333%; +
col-5 - flex: 0 0 auto;
padding: $gutter;
width: 41.6667%;
+ 		+ flex: 0 0 auto; +
+ padding: $gutter; +
+ width: 41.6667%; +
col-6 - flex: 0 0 auto;
padding: $gutter;
width: 50%;
+ 		+ flex: 0 0 auto; +
+ padding: $gutter; +
+ width: 50%; +
col-7 - flex: 0 0 auto;
padding: $gutter;
width: 58.3333%;
+ 		+ flex: 0 0 auto; +
+ padding: $gutter; +
+ width: 58.3333%; +
col-8 - flex: 0 0 auto;
padding: $gutter;
width: 66.6667%;
+ 		+ flex: 0 0 auto; +
+ padding: $gutter; +
+ width: 66.6667%; +
col-9 - flex: 0 0 auto;
padding: $gutter;
width: 75%;
+ 		+ flex: 0 0 auto; +
+ padding: $gutter; +
+ width: 75%; +
col-10 - flex: 0 0 auto;
padding: $gutter;
width: 83.3333%;
+ 		+ flex: 0 0 auto; +
+ padding: $gutter; +
+ width: 83.3333%; +
col-11 - flex: 0 0 auto;
padding: $gutter;
width: 91.6667%;
+ 		+ flex: 0 0 auto; +
+ padding: $gutter; +
+ width: 91.6667%; +
col-12 - flex: 0 0 auto;
padding: $gutter;
width: 100%;
+ 		+ flex: 0 0 auto; +
+ padding: $gutter; +
+ width: 100%; +
col-offset-0 - margin-left: 0;
+ 		+ margin-left: 0; +
col-offset-1 - margin-left: 8.3333%;
+ 		+ margin-left: 8.3333%; +
col-offset-2 - margin-left: 16.6667%;
+ 		+ margin-left: 16.6667%; +
col-offset-3 - margin-left: 25%;
+ 		+ margin-left: 25%; +
col-offset-4 - margin-left: 33.3333%;
+ 		+ margin-left: 33.3333%; +
col-offset-5 - margin-left: 41.6667%;
+ 		+ margin-left: 41.6667%; +
col-offset-6 - margin-left: 50%;
+ 		+ margin-left: 50%; +
col-offset-7 - margin-left: 58.3333%;
+ 		+ margin-left: 58.3333%; +
col-offset-8 - margin-left: 66.6667%;
+ 		+ margin-left: 66.6667%; +
col-offset-9 - margin-left: 75%;
+ 		+ margin-left: 75%; +
col-offset-10 - margin-left: 83.3333%;
+ 		+ margin-left: 83.3333%; +
col-offset-11 - margin-left: 91.6667%;
+ 		+ margin-left: 91.6667%; +
col-offset-12 - margin-left: 100%;
+ 		+ margin-left: 100%; +
- );
+ ); +
; } diff --git a/components/doc/migration/griddoc.js b/components/doc/migration/griddoc.js index f2ca1e5..dc927b8 100644 --- a/components/doc/migration/griddoc.js +++ b/components/doc/migration/griddoc.js @@ -2,7 +2,6 @@ import { DocSectionCode } from '../common/docsectioncode'; import { DocSectionText } from '../common/docsectiontext'; export function GridDoc(props) { - return ( <> diff --git a/components/doc/overflow/classesdoc.js b/components/doc/overflow/classesdoc.js index 4922b52..e7bb620 100644 --- a/components/doc/overflow/classesdoc.js +++ b/components/doc/overflow/classesdoc.js @@ -3,9 +3,7 @@ import { DocSectionText } from '../common/docsectiontext'; export function ClassesDoc(props) { return ( <> - - - +
diff --git a/components/doc/pointerevents/examples.js b/components/doc/pointerevents/examples.js index c582b9e..83b4b36 100644 --- a/components/doc/pointerevents/examples.js +++ b/components/doc/pointerevents/examples.js @@ -3,7 +3,7 @@ import { DocSectionText } from '../common/docsectiontext'; export function ExamplesDoc(props) { const code = { - basic: `
+ basic: `

Try clicking the caret icon to open the dropdown

pointer-events-auto (event captured)

@@ -51,7 +51,7 @@ export function ExamplesDoc(props) { -
+
diff --git a/components/doc/position/absolutedoc.js b/components/doc/position/absolutedoc.js index fb2f672..374bb14 100644 --- a/components/doc/position/absolutedoc.js +++ b/components/doc/position/absolutedoc.js @@ -60,9 +60,9 @@ export function AbsoluteDoc(props) {

Relative

-
+

Static

-
+
Static
@@ -72,9 +72,9 @@ export function AbsoluteDoc(props) {

Relative

-
+

Static

-
+
Dynamic
diff --git a/components/doc/position/classesdoc.js b/components/doc/position/classesdoc.js index b63cc83..7b3c65f 100644 --- a/components/doc/position/classesdoc.js +++ b/components/doc/position/classesdoc.js @@ -3,9 +3,7 @@ import { DocSectionText } from '../common/docsectiontext'; export function ClassesDoc(props) { return ( <> - - - +
diff --git a/components/doc/position/responsivedoc.js b/components/doc/position/responsivedoc.js index 020f20d..8d1754a 100644 --- a/components/doc/position/responsivedoc.js +++ b/components/doc/position/responsivedoc.js @@ -62,9 +62,9 @@ export function ResponsiveDoc(props) {
-
+

Static

-
+
Absolute on medium screens / Static on small screens
diff --git a/components/doc/position/staticdoc.js b/components/doc/position/staticdoc.js index d9910dd..dbe2061 100644 --- a/components/doc/position/staticdoc.js +++ b/components/doc/position/staticdoc.js @@ -33,9 +33,9 @@ export function StaticDoc(props) {
-
+

Static

-
+
Absolute
diff --git a/components/doc/textoverflow/responsivedoc.js b/components/doc/textoverflow/responsivedoc.js index 2050c77..3b7082e 100644 --- a/components/doc/textoverflow/responsivedoc.js +++ b/components/doc/textoverflow/responsivedoc.js @@ -2,8 +2,6 @@ import { DocSectionCode } from '../common/docsectioncode'; import { DocSectionText } from '../common/docsectiontext'; export function ResponsiveDoc(props) { - - return ( <> @@ -39,7 +37,6 @@ export function ResponsiveDoc(props) {
- ); } diff --git a/components/doc/theming/colorpalettedoc.js b/components/doc/theming/colorpalettedoc.js index bae82da..26949f3 100644 --- a/components/doc/theming/colorpalettedoc.js +++ b/components/doc/theming/colorpalettedoc.js @@ -5,9 +5,9 @@ import Head from 'next/head'; export function ColorPaletteDoc(props) { return ( <> - - - + +

PrimeFlex does not ship with a built-in color scheme by default as it is derived from the Prime UI library. In case you need to use it standalone without a Prime library, include one of the themes from the themes folder. A theme diff --git a/components/doc/theming/themesdoc.js b/components/doc/theming/themesdoc.js index 754d6d3..047b910 100644 --- a/components/doc/theming/themesdoc.js +++ b/components/doc/theming/themesdoc.js @@ -169,7 +169,7 @@ export function ThemesDoc(props) { consists of the following set of CSS variables that can be easily customized to build your own.

- + ); } diff --git a/components/doc/toprightbottomleft/classesdoc.js b/components/doc/toprightbottomleft/classesdoc.js index e842455..1338c2c 100644 --- a/components/doc/toprightbottomleft/classesdoc.js +++ b/components/doc/toprightbottomleft/classesdoc.js @@ -3,9 +3,7 @@ import { DocSectionText } from '../common/docsectiontext'; export function ClassesDoc(props) { return ( <> - - - +
diff --git a/components/doc/toprightbottomleft/examplesdoc.js b/components/doc/toprightbottomleft/examplesdoc.js index feeec89..2c1982c 100644 --- a/components/doc/toprightbottomleft/examplesdoc.js +++ b/components/doc/toprightbottomleft/examplesdoc.js @@ -39,9 +39,7 @@ export function ExamplesDoc(props) { return ( <> - - - +
diff --git a/components/doc/transformorigin/examplesdoc.js b/components/doc/transformorigin/examplesdoc.js index 1706a98..fea92bc 100644 --- a/components/doc/transformorigin/examplesdoc.js +++ b/components/doc/transformorigin/examplesdoc.js @@ -39,7 +39,7 @@ export function ExamplesDoc(props) { <>
-
+
primeflex
diff --git a/components/doc/transformorigin/responsivedoc.js b/components/doc/transformorigin/responsivedoc.js index e17f4c3..d8338b4 100644 --- a/components/doc/transformorigin/responsivedoc.js +++ b/components/doc/transformorigin/responsivedoc.js @@ -53,7 +53,7 @@ export function ResponsiveDoc(props) {
-
+
primeflex
diff --git a/components/doc/transitiondelay/examples.js b/components/doc/transitiondelay/examples.js index 0d8c252..c390f74 100644 --- a/components/doc/transitiondelay/examples.js +++ b/components/doc/transitiondelay/examples.js @@ -37,16 +37,22 @@ export function ExamplesDoc(props) {
-
+
Hover me
-
+
Hover me
-
+
Hover me
diff --git a/components/doc/transitionduration/examples.js b/components/doc/transitionduration/examples.js index 20c386e..5d61d7e 100644 --- a/components/doc/transitionduration/examples.js +++ b/components/doc/transitionduration/examples.js @@ -37,16 +37,22 @@ export function ExamplesDoc(props) {
-
+
Hover me
-
+
Hover me
-
+
Hover me
diff --git a/components/doc/transitionproperty/examples.js b/components/doc/transitionproperty/examples.js index 98ee56f..39db159 100644 --- a/components/doc/transitionproperty/examples.js +++ b/components/doc/transitionproperty/examples.js @@ -23,8 +23,10 @@ export function ExamplesDoc(props) {
-
+
Hover me
diff --git a/components/doc/transitiontimingfunction/examples.js b/components/doc/transitiontimingfunction/examples.js index 84ba83f..b4cfee9 100644 --- a/components/doc/transitiontimingfunction/examples.js +++ b/components/doc/transitiontimingfunction/examples.js @@ -44,20 +44,28 @@ export function ExamplesDoc(props) {
-
+
Hover me
-
+
Hover me
-
+
Hover me
-
+
Hover me
diff --git a/components/doc/zindex/classesdoc.js b/components/doc/zindex/classesdoc.js index 36e66c7..6a6723e 100644 --- a/components/doc/zindex/classesdoc.js +++ b/components/doc/zindex/classesdoc.js @@ -3,9 +3,7 @@ import { DocSectionText } from '../common/docsectiontext'; export function ClassesDoc(props) { return ( <> - - - +
@@ -43,7 +41,6 @@ export function ClassesDoc(props) { -
z-5 z-index: 5;
diff --git a/components/doc/zindex/examplesdoc.js b/components/doc/zindex/examplesdoc.js index b171c39..49c1cc1 100644 --- a/components/doc/zindex/examplesdoc.js +++ b/components/doc/zindex/examplesdoc.js @@ -27,9 +27,7 @@ export function ExamplesDoc(props) { return ( <> - - - +
diff --git a/components/layout/layout.js b/components/layout/layout.js index b7751b4..dae2e47 100644 --- a/components/layout/layout.js +++ b/components/layout/layout.js @@ -68,7 +68,7 @@ export default function Layout(props) { - + {props.newsActive && } diff --git a/package-lock.json b/package-lock.json index 7e04b8a..a30ee40 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,6 @@ "dependencies": { "@docsearch/react": "^3.3.3", "next": "13.2.1", - "primeicons": "^6.0.1", "primereact": "^9.2.0", "react": "18.2.0", "react-dom": "18.2.0" @@ -6607,11 +6606,6 @@ "node": ">= 0.8" } }, - "node_modules/primeicons": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/primeicons/-/primeicons-6.0.1.tgz", - "integrity": "sha512-KDeO94CbWI4pKsPnYpA1FPjo79EsY9I+M8ywoPBSf9XMXoe/0crjbUK7jcQEDHuc0ZMRIZsxH3TYLv4TUtHmAA==" - }, "node_modules/primereact": { "version": "9.4.0", "resolved": "https://registry.npmjs.org/primereact/-/primereact-9.4.0.tgz", diff --git a/package.json b/package.json index e3cf414..2801f8c 100644 --- a/package.json +++ b/package.json @@ -7,8 +7,8 @@ "dev": "next dev", "build": "next build", "start": "next start", - "format": "prettier --write \"{components,pages}/**/*.{js,ts,tsx,d.ts}\"", - "format:check": "prettier --check \"{components,pages}/**/*.{js,ts,tsx,d.ts}\"", + "format": "prettier --write \"{components,pages}/**/*.js\"", + "format:check": "prettier --check \"{components,pages}/**/*.js\"", "lint": "next lint --max-warnings=0 --ignore-path .gitignore .", "lint:fix": "next lint --fix --ignore-path .gitignore .", "build-lib": "sass --update styles/lib/primeflex.scss:dist-lib/primeflex.css --no-source-map && sass --update styles/lib/primeflex.scss:dist-lib/primeflex.min.css --no-source-map --style compressed && sass --update styles/lib/themes:dist-lib/themes --no-source-map && gulp build-lib" diff --git a/pages/_app.js b/pages/_app.js index ab66112..185027b 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -49,11 +49,11 @@ export default function MyApp({ Component }) { if (typeof window !== 'undefined') { const media = window.matchMedia('(prefers-color-scheme: dark)'); - + if (media.matches) { setDark(true); } - } + } }, []); if (Component.getLayout) { diff --git a/pages/animations/index.js b/pages/animations/index.js index f70617f..ca4c588 100644 --- a/pages/animations/index.js +++ b/pages/animations/index.js @@ -28,7 +28,7 @@ const PositionPage = () => { id: 'scalein', label: 'scalein', component: ScaleinDoc - }, + } ]; return ( diff --git a/pages/backgroundposition/index.js b/pages/backgroundposition/index.js index 97afd31..a14c712 100644 --- a/pages/backgroundposition/index.js +++ b/pages/backgroundposition/index.js @@ -18,7 +18,7 @@ const PositionPage = () => { label: 'Examples', component: ExamplesDoc }, - + { id: 'responsive', label: 'Responsive', diff --git a/pages/flex/index.js b/pages/flex/index.js index ea37d52..a4e2a63 100644 --- a/pages/flex/index.js +++ b/pages/flex/index.js @@ -25,17 +25,17 @@ const PositionPage = () => { id: 'flex1', label: 'Flex 1', component: Flex1Doc - }, + }, { id: 'auto', label: 'Auto', component: AutoDoc - }, + }, { id: 'none', label: 'None', component: NoneDoc - }, + }, { id: 'responsive', label: 'Responsive', @@ -53,7 +53,9 @@ const PositionPage = () => {

Flex

-

A shorthand property to define flex-grow, flex-shrink and flex-basis at once.

+

+ A shorthand property to define flex-grow, flex-shrink and flex-basis at once. +

diff --git a/pages/index.js b/pages/index.js index 81f7f02..376ffdb 100644 --- a/pages/index.js +++ b/pages/index.js @@ -36,7 +36,7 @@ export default function Home(props) { - +
{props.newsActive && } diff --git a/pages/migration/index.js b/pages/migration/index.js index 48be052..bb6bc3b 100644 --- a/pages/migration/index.js +++ b/pages/migration/index.js @@ -31,7 +31,7 @@ const PositionPage = () => { id: 'elevation', label: 'Elevation', component: ElevationDoc - }, + }, { id: 'display', label: 'Display', @@ -46,7 +46,7 @@ const PositionPage = () => { id: 'text', label: 'Text', component: TextDoc - }, + } ]; return ( diff --git a/pages/rotate/index.js b/pages/rotate/index.js index 0a8191e..2a03888 100644 --- a/pages/rotate/index.js +++ b/pages/rotate/index.js @@ -18,7 +18,7 @@ const PositionPage = () => { label: 'Examples', component: ExamplesDoc }, - + { id: 'responsive', label: 'Responsive', diff --git a/pages/transformorigin/index.js b/pages/transformorigin/index.js index c937f53..6c9e7b7 100644 --- a/pages/transformorigin/index.js +++ b/pages/transformorigin/index.js @@ -18,7 +18,7 @@ const PositionPage = () => { label: 'Examples', component: ExamplesDoc }, - + { id: 'responsive', label: 'Responsive', diff --git a/pages/translate/index.js b/pages/translate/index.js index 255398e..6edbe55 100644 --- a/pages/translate/index.js +++ b/pages/translate/index.js @@ -18,7 +18,7 @@ const PositionPage = () => { label: 'Examples', component: ExamplesDoc }, - + { id: 'responsive', label: 'Responsive',