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);
+ }
+
-
-
-
-
-
-
-
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...
-
-
- Get Started
-
-
-
-
-
+ 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...
+
+ Get Started
+
+
+
+
+
- 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
-
-
-
-
+
+
+
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.
-
-
+
+
+ CoCreate provides the most convenient utility class.
+
+
+
+
-
-
- 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
-
-
-
-
-
-
-
-
-
+
+ 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
+
+
+
+
+
-
-
-
-
-
-
+
+ // 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",