From 147d463405ea35f2ea48085bb94705bd9eabfc9b Mon Sep 17 00:00:00 2001 From: frankpagan Date: Sun, 21 May 2023 13:19:55 -0600 Subject: [PATCH 1/5] Update dependencies versions for @cocreate libraries --- package.json | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index f1abcfe..f78fc72 100644 --- a/package.json +++ b/package.json @@ -59,10 +59,10 @@ "webpack-log": "^3.0.1" }, "dependencies": { - "@cocreate/crud-client": "^1.21.4", - "@cocreate/docs": "^1.7.12", - "@cocreate/hosting": "^1.10.4", - "@cocreate/local-storage": "^1.7.2", - "@cocreate/observer": "^1.7.9" + "@cocreate/crud-client": "^1.21.5", + "@cocreate/docs": "^1.7.13", + "@cocreate/hosting": "^1.10.5", + "@cocreate/local-storage": "^1.7.3", + "@cocreate/observer": "^1.7.10" } -} +} \ No newline at end of file From 795cf35a7c5a09da2dc58c20f47a2a73714b837d Mon Sep 17 00:00:00 2001 From: frankpagan Date: Sat, 27 May 2023 17:09:50 -0600 Subject: [PATCH 2/5] fix: Update dependencies versions for @cocreate libraries --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index f78fc72..23ee932 100644 --- a/package.json +++ b/package.json @@ -63,6 +63,6 @@ "@cocreate/docs": "^1.7.13", "@cocreate/hosting": "^1.10.5", "@cocreate/local-storage": "^1.7.3", - "@cocreate/observer": "^1.7.10" + "@cocreate/observer": "^1.8.0" } } \ No newline at end of file From 712e7b841bec83624e6892bd713a53d4049eeb15 Mon Sep 17 00:00:00 2001 From: frankpagan Date: Thu, 1 Jun 2023 17:48:37 -0600 Subject: [PATCH 3/5] format html --- demo/atomic-css.html | 112 +++---- docs/index.html | 752 ++++++++++++++++++++++++++++++++----------- 2 files changed, 623 insertions(+), 241 deletions(-) diff --git a/demo/atomic-css.html b/demo/atomic-css.html index d76169c..5b74eea 100644 --- a/demo/atomic-css.html +++ b/demo/atomic-css.html @@ -29,17 +29,17 @@

CoCreate helper CSS

- - - - + + + +

CoCreate provides the most convenient helper class.

- +

Reference

 @@ -62,13 +62,13 @@

Reference

-

direction

+

direction

<div class="direction:ltr"></div>

ltr

rtl

-

display

+

display

<div class="display:block"></div>

block

@@ -80,7 +80,7 @@

displa

table-cell

flex

-

overflow

+

overflow

<div class="overflow:auto"></div>

auto

@@ -88,14 +88,14 @@

overfl

scroll

hidden

-

float

+

float

<div class="float:left"></div>

left

right

none

-

position

+

position

<div class="position:relative"></div>

inherit

@@ -104,7 +104,7 @@

positi

fixed

sticky

-

z-index

+

z-index

<div class="z-index:auto"></div>

auto

@@ -119,7 +119,7 @@

z-inde

1000

1111

-

top / bottom / left / right

+

top / bottom / left / right

<div class="top:auto"></div>

auto

@@ -145,7 +145,7 @@

top /

...

-400px

-

bottom

+

bottom

<div class="bottom:auto"></div>

auto

@@ -171,7 +171,7 @@

bottom

...

-400px

-

left

+

left

<div class="left:auto"></div>

auto

@@ -197,7 +197,7 @@

left...

-400px

-

right

+

right

<div class="right:auto"></div>

auto

@@ -223,7 +223,7 @@

right<

...

-400px

-

height

+

height

<div class="height:0"></div>

0

@@ -265,7 +265,7 @@

height

fill-available

fit-content

-

min-height

+

min-height

<div class="min-height:100px"></div>

100px

@@ -273,13 +273,13 @@

min-he

...

700px

-

max-height

+

max-height

<div class="max-height:300px"></div>

60px

100%

-

width

+

width

<div class="width:0"></div>

0

@@ -324,7 +324,7 @@

width<

unset

fill-available

-

min-width

+

min-width

<div class="min-width:75px"></div>

75px

@@ -333,7 +333,7 @@

min-wi

250px

300px

-

max-width

+

max-width

<div class="max-width:300px"></div>

75px

@@ -344,7 +344,7 @@

max-wi

600px

1050px

-

margin

+

margin

<div class="margin:auto"></div>

auto

@@ -354,14 +354,14 @@

margin

15px

...

100px

-

auto-lr(left & right)

+

auto-lr(left & right)

0-lr

5px-lr

10px-lr

15px-lr

...

100px-lr

-

auto-tb(top & bottom)

+

auto-tb(top & bottom)

0-tb

5px_0px

10px_0px

@@ -369,7 +369,7 @@

margin

...

100px_0px

-

margin-top

+

margin-top

<div class="margin=top:auto"></div>

auto

@@ -380,7 +380,7 @@

margin

...

100px

-

margin-bottom

+

margin-bottom

<div class="margin-bottom:auto"></div>

auto

@@ -391,7 +391,7 @@

margin

...

100px

-

margin-left

+

margin-left

<div class="margin-left:auto"></div>

auto

@@ -402,7 +402,7 @@

margin

...

100px

-

margin-right

+

margin-right

<div class="margin-right:auto"></div>

auto

@@ -413,7 +413,7 @@

margin

...

100px

-

padding

+

padding

<div class="padding:0"></div>

0

@@ -422,13 +422,13 @@

paddin

15px

...

100px

-

0-tb(top & bottom)

+

0-tb(top & bottom)

5px_0px

10px_0px

15px_0px

...

100px_0px

-

0-lr(left & right)

+

0-lr(left & right)

1px-lr ~ 15px-lr

20px-lr

25px-lr

@@ -436,7 +436,7 @@

paddin

...

100px-lr

-

padding-top

+

padding-top

<div class="padding-top:0"></div>

0

@@ -446,7 +446,7 @@

paddin

...

100px

-

padding-bottom

+

padding-bottom

<div class="padding-bottom:15px"></div>

0

@@ -456,7 +456,7 @@

paddin

...

100px

-

padding-left

+

padding-left

<div class="padding-left:15px"></div>

0

@@ -466,7 +466,7 @@

paddin

...

100px

-

padding-right

+

padding-right

<div class="padding-right:15px"></div>

0

@@ -476,14 +476,14 @@

paddin

...

100px

-

border-width

+

border-width

<div class="border-width:0"></div>

0

1px ~ 10px

20px

-

border-color

+

border-color

<div class="border-color:black"></div>

white

@@ -499,7 +499,7 @@

border

deep-pink

transparent-pink

-

border-style

+

border-style

<div class="border-style:dotted"></div>

dotted

@@ -514,7 +514,7 @@

border

hidden

transparent

-

border-radius

+

border-radius

<div class="border-radius:0"></div>

0

@@ -523,7 +523,7 @@

border

50%

100%

-

font-size

+

font-size

<div class="font-size:18px"></div>

6px ~ 25px

@@ -540,7 +540,7 @@

font-s

1rem

2rem

-

font-weight

+

font-weight

<div class="font-weight:800"></div>

100

@@ -550,14 +550,14 @@

font-w

900

bold

-

font-align

+

font-align

<div class="font-align:center"></div>

center

left

right

-

color

+

color

<div class="color:blue"></div>

white

@@ -574,22 +574,22 @@

color<

light-blue

blue

-

text-overflow

+

text-overflow

<div class="text-overflow:ellipsis"></div>

ellipsis

-

text-transform

+

text-transform

<div class="text-transform:uppercase"></div>

uppercase

-

text-decoration

+

text-decoration

<div class="text-decoration:underline"></div>

underline

-

background-attachment

+

background-attachment

<div class="background-attachment:scroll"></div>

scroll

@@ -598,7 +598,7 @@

backgr

initial

inherit

-

background-repeat

+

background-repeat

<div class="background-repeat:repeat"></div>

repeat

@@ -608,7 +608,7 @@

backgr

initial

inherit

-

background-size

+

background-size

<div class="background-size:auto"></div>

auto

@@ -617,7 +617,7 @@

backgr

initial

inherit

-

background-position

+

background-position

<div class="background-position:center"></div>

left-top

@@ -633,7 +633,7 @@

backgr

initial

inherit

-

bg (background)

+

bg (background)

<div class="background:blue"></div>

transparent

@@ -658,7 +658,7 @@

bg (ba

charcoal-gray

blue

-

background

+

background

<div class="background:black"></div>

transparent

@@ -666,7 +666,7 @@

backgr

black

dark-blue

-

opacity

+

opacity

<div class="opacity:block"></div>

0

@@ -677,7 +677,7 @@

opacit

0.9

1

-

cursor

+

cursor

<div class="cursor:auto"></div>

alias

@@ -723,7 +723,7 @@

cursor
- +

Demo

 @@ -738,7 +738,7 @@

Demo

-
+
diff --git a/docs/index.html b/docs/index.html index 7ec8fc5..8599259 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1,64 +1,178 @@ - - - + + + CoCreate Utility CSS Documentation | CoCreateCSS - - - + + + - - + + - - - - - - + + + + + + - - - -
- -
-
+ + + +
+ +
+

CoCreate utility CSS

-
-
+
+
- +
- +
-

CoCreate provides the most convenient utility class.

-
-
-
- +

+ CoCreate provides the most convenient utility class. +

+
+
+
+

Usage

- +
-

CoCreate utility Classes are very easy to use.

-

We can use exactly same class names with "style:value".

+

+ CoCreate utility Classes are very easy to use. +

+

+ We can use exactly same class names with + "style:value". + 

                                 
@@ -67,21 +181,35 @@ 
Usage
-

Main styles and values provided as utility classes are as follows.

+

+ Main styles and values provided as utility classes + are as follows. +

-
- +
+
-

direction

+

+ direction +

- 
<div class="direction:ltr"></div>
-

ltr

+ 
<div class="direction:ltr"></div>
+

ltr

rtl

-

display

+

+ display +

- 
<div class="display:block"></div>
+ 
<div class="display:block"></div>

block

inline-block

inline

@@ -91,33 +219,49 @@

displa

table-cell

flex

-

overflow

+

+ overflow +

- 
<div class="overflow:auto"></div>
+ 
<div class="overflow:auto"></div>

auto

visible

scroll

hidden

-

float

+

+ float +

- 
<div class="float:left"></div>
+ 
<div class="float:left"></div>

left

right

none

-

position

+

+ position +

- 
<div class="position:relative"></div>
+ 
<div class="position:relative"></div>

inherit

relative

absolute

fixed

sticky

-

z-index

+

+ z-index +

- 
<div class="z-index:auto"></div>
+ 
<div class="z-index:auto"></div>

auto

inherit

initial

@@ -130,9 +274,13 @@

z-inde

1000

1111

-

top / bottom / left / right

+

+ top / bottom / left / right +

- 
<div class="top:auto"></div>
+ 
<div class="top:auto"></div>

auto

0

1px ~ 50px

@@ -156,9 +304,13 @@

top /

...

-400px

-

bottom

+

+ bottom +

- 
<div class="bottom:auto"></div>
+ 
<div class="bottom:auto"></div>

auto

0

1px ~ 50px

@@ -182,9 +334,13 @@

bottom

...

-400px

-

left

+

+ left +

- 
<div class="left:auto"></div>
+ 
<div class="left:auto"></div>

auto

0

1px ~ 50px

@@ -208,9 +364,13 @@

left...

-400px

-

right

+

+ right +

- 
<div class="right:auto"></div>
+ 
<div class="right:auto"></div>

auto

0

1px ~ 50px

@@ -234,9 +394,13 @@

right<

...

-400px

-

height

+

+ height +

- 
<div class="height:0"></div>
+ 
<div class="height:0"></div>

0

1px ~ 10px

20px

@@ -276,23 +440,35 @@

height

fill-available

fit-content

-

min-height

+

+ min-height +

- 
<div class="min-height:100px"></div>
+ 
<div class="min-height:100px"></div>

100px

200px

...

700px

-

max-height

+

+ max-height +

- 
<div class="max-height:300px"></div>
+ 
<div class="max-height:300px"></div>

60px

100%

-

width

+

+ width +

- 
<div class="width:0"></div>
+ 
<div class="width:0"></div>

0

1px ~ 10px

15px

@@ -335,18 +511,26 @@

width<

unset

fill-available

-

min-width

+

+ min-width +

- 
<div class="min-width:75px"></div>
+ 
<div class="min-width:75px"></div>

75px

100px

200px

250px

300px

-

max-width

+

+ max-width +

- 
<div class="max-width:300px"></div>
+ 
<div class="max-width:300px"></div>

75px

100px

300px

@@ -355,9 +539,13 @@

max-wi

600px

1050px

-

margin

+

+ margin +

- 
<div class="margin:auto"></div>
+ 
<div class="margin:auto"></div>

auto

0

5px

@@ -365,14 +553,18 @@

margin

15px

...

100px

-

auto-lr(left & right)

+

+ auto-lr(left & right) +

0-lr

0px_5px

0px_10px

10px_5px

...

100px-lr

-

auto_0px(top & bottom)

+

+ auto_0px(top & bottom) +

0_0px

5px_0px

10px_0px

@@ -380,9 +572,13 @@

margin

...

100px_0px

-

margin-top

+

+ margin-top +

- 
<div class="margin=top:auto"></div>
+ 
<div class="margin=top:auto"></div>

auto

0

5px

@@ -391,9 +587,13 @@

margin

...

100px

-

margin-bottom

+

+ margin-bottom +

- 
<div class="margin-bottom:auto"></div>
+ 
<div class="margin-bottom:auto"></div>

auto

0

5px

@@ -402,9 +602,13 @@

margin

...

100px

-

margin-left

+

+ margin-left +

- 
<div class="margin-left:auto"></div>
+ 
<div class="margin-left:auto"></div>

auto

0

5px

@@ -413,9 +617,13 @@

margin

...

100px

-

margin-right

+

+ margin-right +

- 
<div class="margin-right:auto"></div>
+ 
<div class="margin-right:auto"></div>

auto

0

5px

@@ -424,22 +632,28 @@

margin

...

100px

-

padding

+

+ padding +

- 
<div class="padding:0"></div>
+ 
<div class="padding:0"></div>

0

5px

10px

15px

...

100px

-

0_0px(top & bottom)

+

+ 0_0px(top & bottom) +

5px_0px

10px_0px

15px_0px

...

100px_0px

-

0-lr(left & right)

+

0-lr(left & right)

1px-lr ~ 10px_5px

20px-lr

20px_5px

@@ -447,9 +661,13 @@

paddin

...

100px-lr

-

padding-top

+

+ padding-top +

- 
<div class="padding-top:0"></div>
+ 
<div class="padding-top:0"></div>

0

5px

10px

@@ -457,9 +675,13 @@

paddin

...

100px

-

padding-bottom

+

+ padding-bottom +

- 
<div class="padding-bottom:15px"></div>
+ 
<div class="padding-bottom:15px"></div>

0

5px

10px

@@ -467,9 +689,13 @@

paddin

...

100px

-

padding-left

+

+ padding-left +

- 
<div class="padding-left:15px"></div>
+ 
<div class="padding-left:15px"></div>

0

5px

10px

@@ -477,9 +703,13 @@

paddin

...

100px

-

padding-right

+

+ padding-right +

- 
<div class="padding-right:15px"></div>
+ 
<div class="padding-right:15px"></div>

0

5px

10px

@@ -487,16 +717,24 @@

paddin

...

100px

-

border-width

+

+ border-width +

- 
<div class="border-width:0"></div>
+ 
<div class="border-width:0"></div>

0

1px ~ 10px

20px

-

border-color

+

+ border-color +

- 
<div class="border-color:black"></div>
+ 
<div class="border-color:black"></div>

white

black

extra-dark-gray

@@ -510,9 +748,13 @@

border

deep-pink

transparent-pink

-

border-style

+

+ border-style +

- 
<div class="border-style:dotted"></div>
+ 
<div class="border-style:dotted"></div>

dotted

dashed

solid

@@ -525,18 +767,26 @@

border

hidden

transparent

-

border-radius

+

+ border-radius +

- 
<div class="border-radius:0"></div>
+ 
<div class="border-radius:0"></div>

0

1px ~ 10px

50px

50%

100%

-

font-size

+

+ font-size +

- 
<div class="font-size:18px"></div>
+ 
<div class="font-size:18px"></div>

6px ~ 25px

30px

40px

@@ -549,11 +799,15 @@

font-s

04rem

05rem

1rem

-

2rem

+

2rem

-

font-weight

+

+ font-weight +

- 
<div class="font-weight:800"></div>
+ 
<div class="font-weight:800"></div>

100

200

300

@@ -561,16 +815,24 @@

font-w

900

bold

-

font-align

+

+ font-align +

- 
<div class="font-align:center"></div>
+ 
<div class="font-align:center"></div>

center

left

right

-

color

+

+ color +

- 
<div class="color:blue"></div>
+ 
<div class="color:blue"></div>

white

black

extra-dark-gray

@@ -585,33 +847,53 @@

color<

light-blue

blue

-

text-overflow

+

+ text-overflow +

- 
<div class="text-overflow:ellipsis"></div>
+ 
<div class="text-overflow:ellipsis"></div>

ellipsis

-

text-transform

+

+ text-transform +

- 
<div class="text-transform:uppercase"></div>
+ 
<div class="text-transform:uppercase"></div>

uppercase

-

text-decoration

+

+ text-decoration +

- 
<div class="text-decoration:underline"></div>
+ 
<div class="text-decoration:underline"></div>

underline

-

background-attachment

+

+ background-attachment +

- 
<div class="background-attachment:scroll"></div>
+ 
<div class="background-attachment:scroll"></div>

scroll

fixed

local

initial

inherit

-

background-repeat

+

+ background-repeat +

- 
<div class="background-repeat:repeat"></div>
+ 
<div class="background-repeat:repeat"></div>

repeat

repeat-x

repeat-y

@@ -619,18 +901,26 @@

backgr

initial

inherit

-

background-size

+

+ background-size +

- 
<div class="background-size:auto"></div>
+ 
<div class="background-size:auto"></div>

auto

cover

contain

initial

inherit

-

background-position

+

+ background-position +

- 
<div class="background-position:center"></div>
+ 
<div class="background-position:center"></div>

left-top

left-center

left-bottom

@@ -644,9 +934,13 @@

backgr

initial

inherit

-

bg (background)

+

+ bg (background) +

- 
<div class="background:blue"></div>
+ 
<div class="background:blue"></div>

transparent

white

black

@@ -669,17 +963,25 @@

bg (ba

charcoal-gray

blue

-

background

+

+ background +

- 
<div class="background:black"></div>
+ 
<div class="background:black"></div>

transparent

white

black

dark-blue

-

opacity

+

+ opacity +

- 
<div class="opacity:block"></div>
+ 
<div class="opacity:block"></div>

0

0.1

0.2

@@ -688,9 +990,13 @@

opacit

0.9

1

-

cursor

+

+ cursor +

- 
<div class="cursor:auto"></div>
+ 
<div class="cursor:auto"></div>

alias

all-scroll

auto

@@ -730,67 +1036,143 @@

cursor

-
+
-
- +
+

Demo

- +
-
+
-
- -
- -
+
+
+ +
- -
-
+ +
+
- -
- - - - - + +
+ + + + +
-
-
+
- - - - + + + + - - - \ No newline at end of file + From d5d9410320d8e01e17d65c99a7ca501e2e7504dd Mon Sep 17 00:00:00 2001 From: frankpagan Date: Thu, 1 Jun 2023 19:00:33 -0600 Subject: [PATCH 4/5] fix: format demo html --- demo/atomic-css.html | 1811 +++++++++++++++++++++++++----------------- demo/index.html | 34 +- 2 files changed, 1092 insertions(+), 753 deletions(-) diff --git a/demo/atomic-css.html b/demo/atomic-css.html index 5b74eea..be9a217 100644 --- a/demo/atomic-css.html +++ b/demo/atomic-css.html @@ -1,53 +1,134 @@ - - - + + + CoCreate-atomic-css Documentation | CoCreateCSS - - - + + + - - - - - - + + + + + -
-
+

CoCreate helper CSS

-
- - - - - +
+ + + + +
-

CoCreate provides the most convenient helper class.

-
-
-
- +

+ CoCreate provides the most convenient helper class. +

+
+
+
+

Reference

- +
-

CoCreate Helper Classes are very easy to use.

-

We can use exactly same class names with "style:value".

+

+ CoCreate Helper Classes are very easy to use. +

+

+ We can use exactly same class names with + "style:value". + 

                                 
@@ -56,731 +137,991 @@ 
Reference
-

Main styles and values provided as helper classes are as follows.

+

+ Main styles and values provided as helper classes + are as follows. +

-
- -
-

direction

-
- 
<div class="direction:ltr"></div>
-

ltr

-

rtl

-
-

display

-
- 
<div class="display:block"></div>
-

block

-

inline-block

-

inline

-

none

-

inherit

-

table

-

table-cell

-

flex

-
-

overflow

-
- 
<div class="overflow:auto"></div>
-

auto

-

visible

-

scroll

-

hidden

-
-

float

-
- 
<div class="float:left"></div>
-

left

-

right

-

none

-
-

position

-
- 
<div class="position:relative"></div>
-

inherit

-

relative

-

absolute

-

fixed

-

sticky

-
-

z-index

-
- 
<div class="z-index:auto"></div>
-

auto

-

inherit

-

initial

-

-2

-

-5

-

1 ~ 15

-

100

-

101

-

111

-

1000

-

1111

-
-

top / bottom / left / right

-
- 
<div class="top:auto"></div>
-

auto

-

0

-

1px ~ 50px

-

55px

-

60px

-

65px

-

...

-

100px

-

150px

-

200px

-

...

-

400px

-

-1px ~ -50px

-

-55px

-

-60px

-

-65px

-

...

-

-100px

-

-150px

-

-200px

-

...

-

-400px

-
-

bottom

-
- 
<div class="bottom:auto"></div>
-

auto

-

0

-

1px ~ 50px

-

55px

-

60px

-

65px

-

...

-

100px

-

150px

-

200px

-

...

-

400px

-

-1px ~ -50px

-

-55px

-

-60px

-

-65px

-

...

-

-100px

-

-150px

-

-200px

-

...

-

-400px

-
-

left

-
- 
<div class="left:auto"></div>
-

auto

-

0

-

1px ~ 50px

-

55px

-

60px

-

65px

-

...

-

100px

-

150px

-

200px

-

...

-

400px

-

-1px ~ -50px

-

-55px

-

-60px

-

-65px

-

...

-

-100px

-

-150px

-

-200px

-

...

-

-400px

-
-

right

-
- 
<div class="right:auto"></div>
-

auto

-

0

-

1px ~ 50px

-

55px

-

60px

-

65px

-

...

-

100px

-

150px

-

200px

-

...

-

400px

-

-1px ~ -50px

-

-55px

-

-60px

-

-65px

-

...

-

-100px

-

-150px

-

-200px

-

...

-

-400px

-
-

height

-
- 
<div class="height:0"></div>
-

0

-

1px ~ 10px

-

20px

-

30px

-

40px

-

45px

-

48px

-

50px

-

70px

-

80px

-

90px

-

100px

-

130px

-

150px

-

200px

-

250px

-

300px

-

350px

-

...

-

700px

-

auto

-

25%

-

33%

-

50%

-

66%

-

75%

-

100%

-

100%-120px

-

100vh-120px

-

100vh-100px

-

100vh-90px

-

100vh-70px

-

100vh-50px

-

80vh

-

90vh

-

100vh

-

fill-available

-

fit-content

-
-

min-height

-
- 
<div class="min-height:100px"></div>
-

100px

-

200px

-

...

-

700px

-
-

max-height

-
- 
<div class="max-height:300px"></div>
-

60px

-

100%

-
-

width

-
- 
<div class="width:0"></div>
-

0

-

1px ~ 10px

-

15px

-

20px

-

25px

-

...

-

90px

-

100px

-

110px

-

120px

-

130px

-

150px

-

180px

-

200px

-

250px

-

300px

-

350px

-

...

-

1000px

-

10%

-

12%

-

15%

-

20%

-

25%

-

30%

-

35%

-

40%

-

41% ~ 50%

-

55%

-

60%

-

65%

-

70%

-

75%

-

80%

-

85%

-

90%

-

95%

-

100%

-

auto

-

unset

-

fill-available

-
-

min-width

-
- 
<div class="min-width:75px"></div>
-

75px

-

100px

-

200px

-

250px

-

300px

-
-

max-width

-
- 
<div class="max-width:300px"></div>
-

75px

-

100px

-

300px

-

400px

-

500px

-

600px

-

1050px

-
-

margin

-
- 
<div class="margin:auto"></div>
-

auto

-

0

-

5px

-

10px

-

15px

-

...

-

100px

-

auto-lr(left & right)

-

0-lr

-

5px-lr

-

10px-lr

-

15px-lr

-

...

-

100px-lr

-

auto-tb(top & bottom)

-

0-tb

-

5px_0px

-

10px_0px

-

15px_0px

-

...

-

100px_0px

-
-

margin-top

-
- 
<div class="margin=top:auto"></div>
-

auto

-

0

-

5px

-

10px

-

15px

-

...

-

100px

-
-

margin-bottom

-
- 
<div class="margin-bottom:auto"></div>
-

auto

-

0

-

5px

-

10px

-

15px

-

...

-

100px

-
-

margin-left

-
- 
<div class="margin-left:auto"></div>
-

auto

-

0

-

5px

-

10px

-

15px

-

...

-

100px

-
-

margin-right

-
- 
<div class="margin-right:auto"></div>
-

auto

-

0

-

5px

-

10px

-

15px

-

...

-

100px

-
-

padding

-
- 
<div class="padding:0"></div>
-

0

-

5px

-

10px

-

15px

-

...

-

100px

-

0-tb(top & bottom)

-

5px_0px

-

10px_0px

-

15px_0px

-

...

-

100px_0px

-

0-lr(left & right)

-

1px-lr ~ 15px-lr

-

20px-lr

-

25px-lr

-

30px-lr

-

...

-

100px-lr

-
-

padding-top

-
- 
<div class="padding-top:0"></div>
-

0

-

5px

-

10px

-

15px

-

...

-

100px

-
-

padding-bottom

-
- 
<div class="padding-bottom:15px"></div>
-

0

-

5px

-

10px

-

15px

-

...

-

100px

-
-

padding-left

-
- 
<div class="padding-left:15px"></div>
-

0

-

5px

-

10px

-

15px

-

...

-

100px

-
-

padding-right

-
- 
<div class="padding-right:15px"></div>
-

0

-

5px

-

10px

-

15px

-

...

-

100px

-
-

border-width

-
- 
<div class="border-width:0"></div>
-

0

-

1px ~ 10px

-

20px

-
-

border-color

-
- 
<div class="border-color:black"></div>
-

white

-

black

-

extra-dark-gray

-

medium-dark-gray

-

dark-gray

-

extra-medium-gray

-

medium-gray

-

extra-light-gray

-

light-gray

-

light-pink

-

deep-pink

-

transparent-pink

-
-

border-style

-
- 
<div class="border-style:dotted"></div>
-

dotted

-

dashed

-

solid

-

double

-

groove

-

ridge

-

inset

-

outset

-

none

-

hidden

-

transparent

-
-

border-radius

-
- 
<div class="border-radius:0"></div>
-

0

-

1px ~ 10px

-

50px

-

50%

-

100%

-
-

font-size

-
- 
<div class="font-size:18px"></div>
-

6px ~ 25px

-

30px

-

40px

-

50px

-

...

-

80px

-

01rem

-

02rem

-

03rem

-

04rem

-

05rem

-

1rem

-

2rem

-
-

font-weight

-
- 
<div class="font-weight:800"></div>
-

100

-

200

-

300

-

...

-

900

-

bold

-
-

font-align

-
- 
<div class="font-align:center"></div>
-

center

-

left

-

right

-
-

color

-
- 
<div class="color:blue"></div>
-

white

-

black

-

extra-dark-gray

-

dark-gray

-

extra-medium-gray

-

medium-gray

-

extra-light-gray

-

light-gray

-

light-gray

-

very-light-gray

-

deep-pink

-

light-blue

-

blue

-
-

text-overflow

-
- 
<div class="text-overflow:ellipsis"></div>
-

ellipsis

-
-

text-transform

-
- 
<div class="text-transform:uppercase"></div>
-

uppercase

-
-

text-decoration

-
- 
<div class="text-decoration:underline"></div>
-

underline

-
-

background-attachment

-
- 
<div class="background-attachment:scroll"></div>
-

scroll

-

fixed

-

local

-

initial

-

inherit

-
-

background-repeat

-
- 
<div class="background-repeat:repeat"></div>
-

repeat

-

repeat-x

-

repeat-y

-

no-repeat

-

initial

-

inherit

-
-

background-size

-
- 
<div class="background-size:auto"></div>
-

auto

-

cover

-

contain

-

initial

-

inherit

-
-

background-position

-
- 
<div class="background-position:center"></div>
-

left-top

-

left-center

-

left-bottom

-

right-top

-

right-center

-

right-bottom

-

center

-

center-top

-

center-center

-

center-bottom

-

initial

-

inherit

-
-

bg (background)

-
- 
<div class="background:blue"></div>
-

transparent

-

white

-

black

-

dark-blue

-

extra-dark-gray

-

dark-gray

-

extra-medium-gray

-

medium-gray

-

extra-light-gray

-

medium-light-gray

-

light-gray

-

very-light-gray

-

deep-pink

-

transparent-white

-

transparent-black

-

white-opacity

-

black-opacity

-

black-opacity-light

-

deep-pink-opacity

-

charcoal-gray

-

blue

-
-

background

-
- 
<div class="background:black"></div>
-

transparent

-

white

-

black

-

dark-blue

-
-

opacity

-
- 
<div class="opacity:block"></div>
-

0

-

0.1

-

0.2

-

0.3

-

...

-

0.9

-

1

-
-

cursor

-
- 
<div class="cursor:auto"></div>
-

alias

-

all-scroll

-

auto

-

cell

-

context-menu

-

col-resize

-

copy

-

crosshair

-

default

-

e-resize

-

ew-resize

-

grab

-

grabbing

-

help

-

move

-

n-resize

-

ne-resize

-

nesw-resize

-

ns-resize

-

nw-resize

-

nwse-resize

-

no-drop

-

none

-

not-allowed

-

pointer

-

progress

-

row-resize

-

s-resize

-

se-resize

-

sw-resize

-

text

-

url

-

w-resize

-

wait

-

zoom-in

-

zoom-out

-
+
+ +
+

+ direction +

+
+ 
<div class="direction:ltr"></div>
+

ltr

+

rtl

+
+

+ display +

+
+ 
<div class="display:block"></div>
+

block

+

inline-block

+

inline

+

none

+

inherit

+

table

+

table-cell

+

flex

+
+

+ overflow +

+
+ 
<div class="overflow:auto"></div>
+

auto

+

visible

+

scroll

+

hidden

+
+

+ float +

+
+ 
<div class="float:left"></div>
+

left

+

right

+

none

+
+

+ position +

+
+ 
<div class="position:relative"></div>
+

inherit

+

relative

+

absolute

+

fixed

+

sticky

+
+

+ z-index +

+
+ 
<div class="z-index:auto"></div>
+

auto

+

inherit

+

initial

+

-2

+

-5

+

1 ~ 15

+

100

+

101

+

111

+

1000

+

1111

+
+

+ top / bottom / left / right +

+
+ 
<div class="top:auto"></div>
+

auto

+

0

+

1px ~ 50px

+

55px

+

60px

+

65px

+

...

+

100px

+

150px

+

200px

+

...

+

400px

+

-1px ~ -50px

+

-55px

+

-60px

+

-65px

+

...

+

-100px

+

-150px

+

-200px

+

...

+

-400px

+
+

+ bottom +

+
+ 
<div class="bottom:auto"></div>
+

auto

+

0

+

1px ~ 50px

+

55px

+

60px

+

65px

+

...

+

100px

+

150px

+

200px

+

...

+

400px

+

-1px ~ -50px

+

-55px

+

-60px

+

-65px

+

...

+

-100px

+

-150px

+

-200px

+

...

+

-400px

+
+

+ left +

+
+ 
<div class="left:auto"></div>
+

auto

+

0

+

1px ~ 50px

+

55px

+

60px

+

65px

+

...

+

100px

+

150px

+

200px

+

...

+

400px

+

-1px ~ -50px

+

-55px

+

-60px

+

-65px

+

...

+

-100px

+

-150px

+

-200px

+

...

+

-400px

+
+

+ right +

+
+ 
<div class="right:auto"></div>
+

auto

+

0

+

1px ~ 50px

+

55px

+

60px

+

65px

+

...

+

100px

+

150px

+

200px

+

...

+

400px

+

-1px ~ -50px

+

-55px

+

-60px

+

-65px

+

...

+

-100px

+

-150px

+

-200px

+

...

+

-400px

+
+

+ height +

+
+ 
<div class="height:0"></div>
+

0

+

1px ~ 10px

+

20px

+

30px

+

40px

+

45px

+

48px

+

50px

+

70px

+

80px

+

90px

+

100px

+

130px

+

150px

+

200px

+

250px

+

300px

+

350px

+

...

+

700px

+

auto

+

25%

+

33%

+

50%

+

66%

+

75%

+

100%

+

100%-120px

+

100vh-120px

+

100vh-100px

+

100vh-90px

+

100vh-70px

+

100vh-50px

+

80vh

+

90vh

+

100vh

+

fill-available

+

fit-content

+
+

+ min-height +

+
+ 
<div class="min-height:100px"></div>
+

100px

+

200px

+

...

+

700px

+
+

+ max-height +

+
+ 
<div class="max-height:300px"></div>
+

60px

+

100%

+
+

+ width +

+
+ 
<div class="width:0"></div>
+

0

+

1px ~ 10px

+

15px

+

20px

+

25px

+

...

+

90px

+

100px

+

110px

+

120px

+

130px

+

150px

+

180px

+

200px

+

250px

+

300px

+

350px

+

...

+

1000px

+

10%

+

12%

+

15%

+

20%

+

25%

+

30%

+

35%

+

40%

+

41% ~ 50%

+

55%

+

60%

+

65%

+

70%

+

75%

+

80%

+

85%

+

90%

+

95%

+

100%

+

auto

+

unset

+

fill-available

+
+

+ min-width +

+
+ 
<div class="min-width:75px"></div>
+

75px

+

100px

+

200px

+

250px

+

300px

+
+

+ max-width +

+
+ 
<div class="max-width:300px"></div>
+

75px

+

100px

+

300px

+

400px

+

500px

+

600px

+

1050px

+
+

+ margin +

+
+ 
<div class="margin:auto"></div>
+

auto

+

0

+

5px

+

10px

+

15px

+

...

+

100px

+

+ auto-lr(left & right) +

+

0-lr

+

5px-lr

+

10px-lr

+

15px-lr

+

...

+

100px-lr

+

+ auto-tb(top & bottom) +

+

0-tb

+

5px_0px

+

10px_0px

+

15px_0px

+

...

+

100px_0px

+
+

+ margin-top +

+
+ 
<div class="margin=top:auto"></div>
+

auto

+

0

+

5px

+

10px

+

15px

+

...

+

100px

+
+

+ margin-bottom +

+
+ 
<div class="margin-bottom:auto"></div>
+

auto

+

0

+

5px

+

10px

+

15px

+

...

+

100px

+
+

+ margin-left +

+
+ 
<div class="margin-left:auto"></div>
+

auto

+

0

+

5px

+

10px

+

15px

+

...

+

100px

+
+

+ margin-right +

+
+ 
<div class="margin-right:auto"></div>
+

auto

+

0

+

5px

+

10px

+

15px

+

...

+

100px

+
+

+ padding +

+
+ 
<div class="padding:0"></div>
+

0

+

5px

+

10px

+

15px

+

...

+

100px

+

0-tb(top & bottom)

+

5px_0px

+

10px_0px

+

15px_0px

+

...

+

100px_0px

+

0-lr(left & right)

+

1px-lr ~ 15px-lr

+

20px-lr

+

25px-lr

+

30px-lr

+

...

+

100px-lr

+
+

+ padding-top +

+
+ 
<div class="padding-top:0"></div>
+

0

+

5px

+

10px

+

15px

+

...

+

100px

+
+

+ padding-bottom +

+
+ 
<div class="padding-bottom:15px"></div>
+

0

+

5px

+

10px

+

15px

+

...

+

100px

+
+

+ padding-left +

+
+ 
<div class="padding-left:15px"></div>
+

0

+

5px

+

10px

+

15px

+

...

+

100px

+
+

+ padding-right +

+
+ 
<div class="padding-right:15px"></div>
+

0

+

5px

+

10px

+

15px

+

...

+

100px

+
+

+ border-width +

+
+ 
<div class="border-width:0"></div>
+

0

+

1px ~ 10px

+

20px

+
+

+ border-color +

+
+ 
<div class="border-color:black"></div>
+

white

+

black

+

extra-dark-gray

+

medium-dark-gray

+

dark-gray

+

extra-medium-gray

+

medium-gray

+

extra-light-gray

+

light-gray

+

light-pink

+

deep-pink

+

transparent-pink

+
+

+ border-style +

+
+ 
<div class="border-style:dotted"></div>
+

dotted

+

dashed

+

solid

+

double

+

groove

+

ridge

+

inset

+

outset

+

none

+

hidden

+

transparent

+
+

+ border-radius +

+
+ 
<div class="border-radius:0"></div>
+

0

+

1px ~ 10px

+

50px

+

50%

+

100%

+
+

+ font-size +

+
+ 
<div class="font-size:18px"></div>
+

6px ~ 25px

+

30px

+

40px

+

50px

+

...

+

80px

+

01rem

+

02rem

+

03rem

+

04rem

+

05rem

+

1rem

+

2rem

+
+

+ font-weight +

+
+ 
<div class="font-weight:800"></div>
+

100

+

200

+

300

+

...

+

900

+

bold

+
+

+ font-align +

+
+ 
<div class="font-align:center"></div>
+

center

+

left

+

right

+
+

+ color +

+
+ 
<div class="color:blue"></div>
+

white

+

black

+

extra-dark-gray

+

dark-gray

+

extra-medium-gray

+

medium-gray

+

extra-light-gray

+

light-gray

+

light-gray

+

very-light-gray

+

deep-pink

+

light-blue

+

blue

+
+

+ text-overflow +

+
+ 
<div class="text-overflow:ellipsis"></div>
+

ellipsis

+
+

+ text-transform +

+
+ 
<div class="text-transform:uppercase"></div>
+

uppercase

+
+

+ text-decoration +

+
+ 
<div class="text-decoration:underline"></div>
+

underline

+
+

+ background-attachment +

+
+ 
<div class="background-attachment:scroll"></div>
+

scroll

+

fixed

+

local

+

initial

+

inherit

+
+

+ background-repeat +

+
+ 
<div class="background-repeat:repeat"></div>
+

repeat

+

repeat-x

+

repeat-y

+

no-repeat

+

initial

+

inherit

+
+

+ background-size +

+
+ 
<div class="background-size:auto"></div>
+

auto

+

cover

+

contain

+

initial

+

inherit

+
+

+ background-position +

+
+ 
<div class="background-position:center"></div>
+

left-top

+

left-center

+

left-bottom

+

right-top

+

right-center

+

right-bottom

+

center

+

center-top

+

center-center

+

center-bottom

+

initial

+

inherit

+
+

+ bg (background) +

+
+ 
<div class="background:blue"></div>
+

transparent

+

white

+

black

+

dark-blue

+

extra-dark-gray

+

dark-gray

+

extra-medium-gray

+

medium-gray

+

extra-light-gray

+

medium-light-gray

+

light-gray

+

very-light-gray

+

deep-pink

+

transparent-white

+

transparent-black

+

white-opacity

+

black-opacity

+

black-opacity-light

+

deep-pink-opacity

+

charcoal-gray

+

blue

+
+

+ background +

+
+ 
<div class="background:black"></div>
+

transparent

+

white

+

black

+

dark-blue

+
+

+ opacity +

+
+ 
<div class="opacity:block"></div>
+

0

+

0.1

+

0.2

+

0.3

+

...

+

0.9

+

1

+
+

+ cursor +

+
+ 
<div class="cursor:auto"></div>
+

alias

+

all-scroll

+

auto

+

cell

+

context-menu

+

col-resize

+

copy

+

crosshair

+

default

+

e-resize

+

ew-resize

+

grab

+

grabbing

+

help

+

move

+

n-resize

+

ne-resize

+

nesw-resize

+

ns-resize

+

nw-resize

+

nwse-resize

+

no-drop

+

none

+

not-allowed

+

pointer

+

progress

+

row-resize

+

s-resize

+

se-resize

+

sw-resize

+

text

+

url

+

w-resize

+

wait

+

zoom-in

+

zoom-out

+
-
- -
- +
+
+

Demo

- +
-
+
-
- -
- -
+
+
+ +
- -
+ +
- -
- - - - - + +
+ + + + +
-
-
+
- + - - - + + + for (const copied of copy) { + copied.onclick = function () { + document.execCommand("copy"); + }; + copied.addEventListener("copy", function (event) { + event.preventDefault(); + if (event.clipboardData) { + event.clipboardData.setData( + "text/plain", + copied.textContent + ); + console.log(event.clipboardData.getData("text")); + } + }); + } + + - \ No newline at end of file + diff --git a/demo/index.html b/demo/index.html index e72b20a..2860e40 100644 --- a/demo/index.html +++ b/demo/index.html @@ -1,22 +1,20 @@ + + + + + + css-parser | CoCreateJS + + - - - - - - css-parser | CoCreateJS - - - - - - - - - - - - + + + + From aad04f3b85b60daf8a26bf1108cc0b2592245d2d Mon Sep 17 00:00:00 2001 From: semantic-release-bot Date: Fri, 2 Jun 2023 01:15:30 +0000 Subject: [PATCH 5/5] chore(release): 1.7.12 [skip ci] ## [1.7.12](https://github.com/CoCreate-app/CoCreate-css-parser/compare/v1.7.11...v1.7.12) (2023-06-02) ### Bug Fixes * format demo html ([d5d9410](https://github.com/CoCreate-app/CoCreate-css-parser/commit/d5d9410320d8e01e17d65c99a7ca501e2e7504dd)) * Update dependencies versions for [@cocreate](https://github.com/cocreate) libraries ([795cf35](https://github.com/CoCreate-app/CoCreate-css-parser/commit/795cf35a7c5a09da2dc58c20f47a2a73714b837d)) --- CHANGELOG.md | 8 ++++++++ package.json | 4 ++-- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 8cb441d..d43af16 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,11 @@ +## [1.7.12](https://github.com/CoCreate-app/CoCreate-css-parser/compare/v1.7.11...v1.7.12) (2023-06-02) + + +### Bug Fixes + +* format demo html ([d5d9410](https://github.com/CoCreate-app/CoCreate-css-parser/commit/d5d9410320d8e01e17d65c99a7ca501e2e7504dd)) +* Update dependencies versions for [@cocreate](https://github.com/cocreate) libraries ([795cf35](https://github.com/CoCreate-app/CoCreate-css-parser/commit/795cf35a7c5a09da2dc58c20f47a2a73714b837d)) + ## [1.7.11](https://github.com/CoCreate-app/CoCreate-css-parser/compare/v1.7.10...v1.7.11) (2023-05-21) diff --git a/package.json b/package.json index 23ee932..71b229c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@cocreate/css-parser", - "version": "1.7.11", + "version": "1.7.12", "description": "A simple css-parser component in vanilla javascript. Easily configured using HTML5 data-attributes and/or JavaScript API.", "keywords": [ "css-parser", @@ -65,4 +65,4 @@ "@cocreate/local-storage": "^1.7.3", "@cocreate/observer": "^1.8.0" } -} \ No newline at end of file +}