From 7ae87bbdb2397055f7f74fe698c6e2290f54f6b7 Mon Sep 17 00:00:00 2001 From: frankpagan Date: Thu, 31 Oct 2024 08:31:12 -0400 Subject: [PATCH 1/5] fix: observer taget has been renamed to selector --- src/index.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/index.js b/src/index.js index f9b6118..a4ab365 100644 --- a/src/index.js +++ b/src/index.js @@ -308,7 +308,7 @@ const observerInit = () => { observer.init({ name: "ccCss", observe: ['childList'], - target: '[class]', + selector: '[class]', callback: mutation => { if (parse != 'false') initElements(mutation.addedNodes); @@ -329,7 +329,7 @@ const observerInit = () => { observer.init({ name: "cssParseAddedNode", observe: ['addedNodes'], - target: 'link[parse], link[save], link[object]', + selector: 'link[parse], link[save], link[object]', callback: mutation => { init(mutation.target); } @@ -339,7 +339,7 @@ observer.init({ name: "cssParseattributes", observe: ["attributes"], attributeName: ["parse", "save", "object"], - target: 'link', + selector: 'link', callback: mutation => { init(mutation.target); } From d94b0267e7560bb7d7e212ddb4a732f67fa5a6ad Mon Sep 17 00:00:00 2001 From: frankpagan Date: Mon, 4 Nov 2024 01:09:28 -0500 Subject: [PATCH 2/5] feat: add prettier.config.js and format files --- demo/test.html | 825 ++++++++--------- docs/index.html | 2363 ++++++++++++++++++++++++----------------------- 2 files changed, 1632 insertions(+), 1556 deletions(-) diff --git a/demo/test.html b/demo/test.html index 3e264b5..e3ad3e1 100644 --- a/demo/test.html +++ b/demo/test.html @@ -1,444 +1,425 @@ - - - - - CoCreateCSS - A utility first, atomic CSS framework - - + + + + + CoCreateCSS - A utility first, atomic CSS framework + + - - - - + .hide-nav + #menuL { + margin-top: 0px; + max-height: -moz-available; + max-height: -webkit-fill-available; + max-height: fill-available; + will-change: transform; + transition: background 0.3s, + -webkit-transform 0.5s cubic-bezier(0.694, 0.048, 0.335, 1); + transition: transform 0.5s cubic-bezier(0.694, 0.048, 0.335, 1), + background 0.3s; + transition: transform 0.5s cubic-bezier(0.694, 0.048, 0.335, 1), + background 0.3s, + -webkit-transform 0.5s cubic-bezier(0.694, 0.048, 0.335, 1); + transform: translateY(0); + -webkit-transform: translateY(0); + } + - - - - -
-
-

hello how are you

-
-
-

- hello how are you -

-
- Toggle Darkmode -
-
- Toggle Darkmode + + + + +
+
+

hello how are you

+
+
+

+ hello how are you +

+
+ Toggle Darkmode
+
+ Toggle Darkmode +
- - - -
-
+ + + +
+
- Modal Viewport/Boundaries - + Modal Viewport/Boundaries + - Main Content -
-
-
-
-
- -
-
- hehehe -
-
first one
-
and second one
-
-

- A Utility First, - Atomic CSS Framework -

- For Building Collaborative Apps, Platforms and - UI's -

- HTML and CSS, No JS Required... -

- -
-
-
-
+ Main Content +
+
+
+
+
+ +
+
+ hehehe +
+
first one
+
and second one
+
+

+ A Utility First, + Atomic CSS Framework +

+ For Building Collaborative Apps, Platforms and UI's +

HTML and CSS, No JS Required...

+ +
+
+
+
- COMPANY SECTION -
-
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
-
+ COMPANY SECTION +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
- Micro Component Architecture -
-
-
-
- -
-
-

- Micro Component Architecture -

-

- Vanilla javascript, lightweight, single purpose - micro components. Easily modify, remove and/or - replace components. Highly configuarable using - HTML5 attributes. HTML5 developers can use a - combination of attributes to create a dynamic - experience. Javascript developers still have - access to API, callbacks and events. -

-

- Sign Up Now -
-
-
-
+ Micro Component Architecture +
+
+
+
+ +
+
+

+ Micro Component Architecture +

+

+ Vanilla javascript, lightweight, single purpose micro + components. Easily modify, remove and/or replace components. + Highly configuarable using HTML5 attributes. HTML5 developers + can use a combination of attributes to create a dynamic + experience. Javascript developers still have access to API, + callbacks and events. +

+

+ Sign Up Now +
+
+
+
- Collaborative Headless CMS -
-
-
-
- -
-
-

- Collaborative Headless CMS -

-

- A lighting fast headless CMS over websocket, - providing CRUD and CRDT functionality. Create, - Read, Update, Delete and Filter lists. - Collaborate on Text, DOM and Objects. Configure - using HTML5 data-attibutes. Supports offline - editing and user cursor positions in Inputs, - Textareas, Rich Text Editors and Code Editors. - But of course... Javascript developers still - have access to API, callbacks and events. -

- Get Your API Key -
-
-
-
+ Collaborative Headless CMS +
+
+
+
+ +
+
+

+ Collaborative Headless CMS +

+

+ A lighting fast headless CMS over websocket, providing CRUD and + CRDT functionality. Create, Read, Update, Delete and Filter + lists. Collaborate on Text, DOM and Objects. Configure using + HTML5 data-attibutes. Supports offline editing and user cursor + positions in Inputs, Textareas, Rich Text Editors and Code + Editors. But of course... Javascript developers still have + access to API, callbacks and events. +

+ Get Your API Key +
+
+
+
- Fully Customizable Admin Panel -
-
-
-
- -
-
-

- Fully Customizable Admin Panel -

-

- HTML5 Admin dashboard UI powered by CoCreateJS. - It is 100% editable and used to manage and - create views for your data and content. Use it - as a Collaborative CRM, CMS and ERP. Can be - modified, replaced or used as an example to - build your own custom HTML5 admin dashboard. -

-

- Sign Up Now -
-
-
-
+ Fully Customizable Admin Panel +
+
+
+
+ +
+
+

+ Fully Customizable Admin Panel +

+

+ HTML5 Admin dashboard UI powered by CoCreateJS. It is 100% + editable and used to manage and create views for your data and + content. Use it as a Collaborative CRM, CMS and ERP. Can be + modified, replaced or used as an example to build your own + custom HTML5 admin dashboard. +

+

+ Sign Up Now +
+
+
+
- Collaborative Builder -
-
-
-
- -
-
-

- Collaborative Drag-n-Drop Builder -

-

- We are in the process of using CoCreateJS - components to create an experimental NO Code - expereince. Every page of the adminUI can be - edited in the drag and drop builder. CoCreate - builder UI is completely customizable and - supports editing of any html5 template. Can be - modified, replaced or used as an example to - build your own custom drang and drop builder. -

-
-
-
-
+ Collaborative Builder +
+
+
+
+ +
+
+

+ Collaborative Drag-n-Drop Builder +

+

+ We are in the process of using CoCreateJS components to create + an experimental NO Code expereince. Every page of the adminUI + can be edited in the drag and drop builder. CoCreate builder UI + is completely customizable and supports editing of any html5 + template. Can be modified, replaced or used as an example to + build your own custom drang and drop builder. +

+
+
+
+
- Thirdparty API Intergration -
-
-
-
- -
-
-

- Thirdparty API Intergration -

-

- We have put together a few thirdparty APIs and - developed them to be used and configured with - HTML5 attributes. Build custom flows and logic - without ever leaving the html page... The - CoCreate Way... Almost forgot, Javascript - developers still have access to API, callbacks - and events. -

-

- Sign Up Now -
-
-
-
+ Thirdparty API Intergration +
+
+
+
+ +
+
+

+ Thirdparty API Intergration +

+

+ We have put together a few thirdparty APIs and developed them to + be used and configured with HTML5 attributes. Build custom flows + and logic without ever leaving the html page... The CoCreate + Way... Almost forgot, Javascript developers still have access to + API, callbacks and events. +

+

+ Sign Up Now +
+
+
+
- -
+ +
- Footer -
-
-

SPREAD THE WORD!

+ Footer +
+
+

SPREAD THE WORD!

-
- Social Share -
- - - - - -
-
+
+ Social Share +
+ + + + + +
+
-

2015 - 2020 All Right Reserved

-

- CoCreate LLC -

-
-
+

2015 - 2020 All Right Reserved

+

+ CoCreate LLC +

+
+
- - - + + + diff --git a/docs/index.html b/docs/index.html index 0a6d853..76d7f43 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1,1152 +1,1247 @@ - - - - - CoCreate Utility CSS Documentation | CoCreateCSS - - - - - + + + + + CoCreate Utility CSS Documentation | CoCreateCSS + + + + + - - - + + + - + - - - - - -
-
-
-
-
-

CoCreate utility CSS

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

CoCreate utility CSS

+
+
+
+ -

- CoCreate provides the most convenient utility class. -

-
-
-
- -

Usage

- -
-
+ +
+ +
+
+

+ 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". +

+
+
                                 
 <div class="padding:16px"></div>
 <div class="font-size:0.5rem color:red"></div>
                                 
                             
-
-

- Main styles and values provided as utility 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

-

0px_5px

-

0px_10px

-

10px_5px

-

...

-

100px-lr

-

- auto_0px(top & bottom) -

-

0_0px

-

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_0px(top & bottom) -

-

5px_0px

-

10px_0px

-

15px_0px

-

...

-

100px_0px

-

0-lr(left & right)

-

1px-lr ~ 10px_5px

-

20px-lr

-

20px_5px

-

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

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

+ Main styles and values provided as utility 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

+

0px_5px

+

0px_10px

+

10px_5px

+

...

+

100px-lr

+

auto_0px(top & bottom)

+

0_0px

+

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_0px(top & bottom)

+

5px_0px

+

10px_0px

+

15px_0px

+

...

+

100px_0px

+

0-lr(left & right)

+

1px-lr ~ 10px_5px

+

20px-lr

+

20px_5px

+

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() { + // object.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")) + // }; + // }); + // }; + - - + + From 160d5f85171a3c96fc3225d1b4558692e67afd7b Mon Sep 17 00:00:00 2001 From: frankpagan Date: Mon, 4 Nov 2024 01:09:59 -0500 Subject: [PATCH 3/5] feat: add prettier.config.js and format files --- prettier.config.js | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 prettier.config.js diff --git a/prettier.config.js b/prettier.config.js new file mode 100644 index 0000000..c651441 --- /dev/null +++ b/prettier.config.js @@ -0,0 +1,15 @@ +module.exports = { + tabWidth: 4, + semi: true, + trailingComma: "none", + bracketSameLine: true, + useTabs: true, + overrides: [ + { + files: ["*.json", "*.yml", "*.yaml"], + options: { + tabWidth: 2, + }, + } + ], + }; From 5e18a18ef0b11accc68d810e89c0119f13f01216 Mon Sep 17 00:00:00 2001 From: frankpagan Date: Mon, 4 Nov 2024 08:10:43 -0500 Subject: [PATCH 4/5] fix: pretier.config.js and file formating --- prettier.config.js | 29 +++++++++++++++-------------- 1 file changed, 15 insertions(+), 14 deletions(-) diff --git a/prettier.config.js b/prettier.config.js index c651441..c184de6 100644 --- a/prettier.config.js +++ b/prettier.config.js @@ -1,15 +1,16 @@ module.exports = { - tabWidth: 4, - semi: true, - trailingComma: "none", - bracketSameLine: true, - useTabs: true, - overrides: [ - { - files: ["*.json", "*.yml", "*.yaml"], - options: { - tabWidth: 2, - }, - } - ], - }; + tabWidth: 4, + semi: true, + trailingComma: "none", + bracketSameLine: true, + useTabs: true, + overrides: [ + { + files: ["*.json", "*.yml", "*.yaml"], + options: { + tabWidth: 2, + useTabs: false + }, + } + ], + }; \ No newline at end of file From 17cf6f824f3efce3ee54fdc3faa4ccaff79447be Mon Sep 17 00:00:00 2001 From: semantic-release-bot Date: Mon, 4 Nov 2024 13:19:46 +0000 Subject: [PATCH 5/5] chore(release): 1.15.0 [skip ci] # [1.15.0](https://github.com/CoCreate-app/CoCreate-css-parser/compare/v1.14.5...v1.15.0) (2024-11-04) ### Bug Fixes * observer taget has been renamed to selector ([7ae87bb](https://github.com/CoCreate-app/CoCreate-css-parser/commit/7ae87bbdb2397055f7f74fe698c6e2290f54f6b7)) * pretier.config.js and file formating ([5e18a18](https://github.com/CoCreate-app/CoCreate-css-parser/commit/5e18a18ef0b11accc68d810e89c0119f13f01216)) ### Features * add prettier.config.js and format files ([160d5f8](https://github.com/CoCreate-app/CoCreate-css-parser/commit/160d5f85171a3c96fc3225d1b4558692e67afd7b)) * add prettier.config.js and format files ([d94b026](https://github.com/CoCreate-app/CoCreate-css-parser/commit/d94b0267e7560bb7d7e212ddb4a732f67fa5a6ad)) --- CHANGELOG.md | 14 ++++++++++++++ package.json | 2 +- 2 files changed, 15 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 60b98e2..e9a7237 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,17 @@ +# [1.15.0](https://github.com/CoCreate-app/CoCreate-css-parser/compare/v1.14.5...v1.15.0) (2024-11-04) + + +### Bug Fixes + +* observer taget has been renamed to selector ([7ae87bb](https://github.com/CoCreate-app/CoCreate-css-parser/commit/7ae87bbdb2397055f7f74fe698c6e2290f54f6b7)) +* pretier.config.js and file formating ([5e18a18](https://github.com/CoCreate-app/CoCreate-css-parser/commit/5e18a18ef0b11accc68d810e89c0119f13f01216)) + + +### Features + +* add prettier.config.js and format files ([160d5f8](https://github.com/CoCreate-app/CoCreate-css-parser/commit/160d5f85171a3c96fc3225d1b4558692e67afd7b)) +* add prettier.config.js and format files ([d94b026](https://github.com/CoCreate-app/CoCreate-css-parser/commit/d94b0267e7560bb7d7e212ddb4a732f67fa5a6ad)) + ## [1.14.5](https://github.com/CoCreate-app/CoCreate-css-parser/compare/v1.14.4...v1.14.5) (2024-06-12) diff --git a/package.json b/package.json index b64656c..1030350 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@cocreate/css-parser", - "version": "1.14.5", + "version": "1.15.0", "description": "A simple css-parser component in vanilla javascript. Easily configured using HTML5 data-attributes and/or JavaScript API.", "keywords": [ "css-parser",