From ea8fa0b42acf72631c619af8d87946043a749b36 Mon Sep 17 00:00:00 2001 From: Yuusaku Miyazaki Date: Fri, 31 Aug 2018 20:22:52 +0900 Subject: [PATCH 001/188] Beautify codes of playable area Unify indent. Remove unnecessary space. Not to display unnecessary scroll bar. --- flexbox/use-cases/cards.html | 34 +++++++++++------------ flexbox/use-cases/center.html | 6 ++-- flexbox/use-cases/input-button.html | 19 +++++++------ flexbox/use-cases/label-input-button.html | 18 +++++++----- flexbox/use-cases/media-flipped.html | 29 +++++++++++-------- flexbox/use-cases/media.html | 26 ++++++++++------- flexbox/use-cases/navigation-flex.html | 18 ++++++------ flexbox/use-cases/navigation.html | 18 ++++++------ flexbox/use-cases/split-navigation.html | 24 ++++++++-------- 9 files changed, 106 insertions(+), 86 deletions(-) diff --git a/flexbox/use-cases/cards.html b/flexbox/use-cases/cards.html index 8fd95721..9a3275de 100644 --- a/flexbox/use-cases/cards.html +++ b/flexbox/use-cases/cards.html @@ -27,11 +27,11 @@ } textarea:nth-of-type(1) { - height: 140px + height: 160px } textarea:nth-of-type(2) { - height: 250px + height: 300px } .playable-buttons { @@ -109,30 +109,30 @@ + +
diff --git a/flexbox/use-cases/center.html b/flexbox/use-cases/center.html index 4c4bf0fa..c6dfc801 100644 --- a/flexbox/use-cases/center.html +++ b/flexbox/use-cases/center.html @@ -27,7 +27,7 @@ } textarea:nth-of-type(1) { - height: 170px + height: 190px } textarea:nth-of-type(2) { @@ -95,12 +95,12 @@ width: 100px; height: 100px; } - + +
diff --git a/flexbox/use-cases/input-button.html b/flexbox/use-cases/input-button.html index a77ecfaf..bf8ae83c 100644 --- a/flexbox/use-cases/input-button.html +++ b/flexbox/use-cases/input-button.html @@ -27,11 +27,11 @@ } textarea:nth-of-type(1) { - height: 170px + height: 140px } textarea:nth-of-type(2) { - height: 80px + height: 125px } .playable-buttons { @@ -104,16 +104,17 @@ } .wrapper input[type="text"] { - flex: 1 1 auto; - } - - - + flex: 1 1 auto; +} + +
diff --git a/flexbox/use-cases/label-input-button.html b/flexbox/use-cases/label-input-button.html index 5de46d16..dda7b1c3 100644 --- a/flexbox/use-cases/label-input-button.html +++ b/flexbox/use-cases/label-input-button.html @@ -27,11 +27,11 @@ } textarea:nth-of-type(1) { - height: 170px + height: 160px } textarea:nth-of-type(2) { - height: 80px + height: 140px } .playable-buttons { @@ -111,14 +111,18 @@ } .wrapper input[type="text"] { - flex: 1 1 auto; - } - + flex: 1 1 auto; +} + +
diff --git a/flexbox/use-cases/media-flipped.html b/flexbox/use-cases/media-flipped.html index f589deff..143b5f6d 100644 --- a/flexbox/use-cases/media-flipped.html +++ b/flexbox/use-cases/media-flipped.html @@ -27,11 +27,11 @@ } textarea:nth-of-type(1) { - height: 180px + height: 250px } textarea:nth-of-type(2) { - height: 120px + height: 180px } .playable-buttons { @@ -101,23 +101,30 @@ + +
diff --git a/flexbox/use-cases/media.html b/flexbox/use-cases/media.html index d29d3e0d..771d42eb 100644 --- a/flexbox/use-cases/media.html +++ b/flexbox/use-cases/media.html @@ -27,11 +27,11 @@ } textarea:nth-of-type(1) { - height: 160px + height: 180px } textarea:nth-of-type(2) { - height: 100px + height: 180px } .playable-buttons { @@ -93,20 +93,26 @@ + +
diff --git a/flexbox/use-cases/navigation-flex.html b/flexbox/use-cases/navigation-flex.html index 95a21276..7b6edb22 100644 --- a/flexbox/use-cases/navigation-flex.html +++ b/flexbox/use-cases/navigation-flex.html @@ -32,7 +32,7 @@ } textarea:nth-of-type(2) { - height: 140px + height: 160px } .playable-buttons { @@ -109,17 +109,17 @@ nav li { flex: auto ; } - + +
diff --git a/flexbox/use-cases/navigation.html b/flexbox/use-cases/navigation.html index 08739a9f..14e578fe 100644 --- a/flexbox/use-cases/navigation.html +++ b/flexbox/use-cases/navigation.html @@ -32,7 +32,7 @@ } textarea:nth-of-type(2) { - height: 140px + height: 160px } .playable-buttons { @@ -103,17 +103,17 @@ display: flex; justify-content: space-between; } - + +
diff --git a/flexbox/use-cases/split-navigation.html b/flexbox/use-cases/split-navigation.html index 2abe7cc5..a027a898 100644 --- a/flexbox/use-cases/split-navigation.html +++ b/flexbox/use-cases/split-navigation.html @@ -28,11 +28,11 @@ } textarea:nth-of-type(1) { - height: 160px + height: 230px } textarea:nth-of-type(2) { - height: 140px + height: 160px } .playable-buttons { @@ -109,23 +109,25 @@ display: flex; margin: 0 -10px; } + nav li { - margin: 0 10px; + margin: 0 10px; } + .push-right { margin-left: auto; } - + +
From f876b65f4e7fe974d2af57960dedb69e94c19f98 Mon Sep 17 00:00:00 2001 From: Yuusaku Miyazaki Date: Fri, 31 Aug 2018 20:24:16 +0900 Subject: [PATCH 002/188] Fix linkrot --- flexbox/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/flexbox/index.html b/flexbox/index.html index 6b05dc26..162b338b 100644 --- a/flexbox/index.html +++ b/flexbox/index.html @@ -84,7 +84,7 @@

Common Use Cases of Flexbox

  1. Navigation
  2. Navigation distributing space to items
    3. -
  3. Split navigation
    4. +
  4. Split navigation
  5. Centering an item
  6. Card layout
  7. Media object
    8. From 77e8883d51306304c94b0a61b611d893bb218ab2 Mon Sep 17 00:00:00 2001 From: Yuusaku Miyazaki Date: Sun, 2 Sep 2018 19:11:57 +0900 Subject: [PATCH 003/188] Beautify playable area Not to display unnecessary scroll bar. --- flexbox/browsers/float.html | 2 +- flexbox/browsers/inline-block.html | 2 +- flexbox/browsers/table-cell.html | 2 +- flexbox/browsers/vertical-align.html | 4 ++-- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/flexbox/browsers/float.html b/flexbox/browsers/float.html index 56cf8dee..5c976351 100644 --- a/flexbox/browsers/float.html +++ b/flexbox/browsers/float.html @@ -31,7 +31,7 @@ } textarea:nth-of-type(2) { - height: 100px + height: 110px } .playable-buttons { diff --git a/flexbox/browsers/inline-block.html b/flexbox/browsers/inline-block.html index e6c8682a..0ca8045e 100644 --- a/flexbox/browsers/inline-block.html +++ b/flexbox/browsers/inline-block.html @@ -31,7 +31,7 @@ } textarea:nth-of-type(2) { - height: 100px + height: 110px } .playable-buttons { diff --git a/flexbox/browsers/table-cell.html b/flexbox/browsers/table-cell.html index bed9cbc0..c6765b5d 100644 --- a/flexbox/browsers/table-cell.html +++ b/flexbox/browsers/table-cell.html @@ -31,7 +31,7 @@ } textarea:nth-of-type(2) { - height: 100px + height: 110px } .playable-buttons { diff --git a/flexbox/browsers/vertical-align.html b/flexbox/browsers/vertical-align.html index f6256885..fb8e2e30 100644 --- a/flexbox/browsers/vertical-align.html +++ b/flexbox/browsers/vertical-align.html @@ -27,11 +27,11 @@ } textarea:nth-of-type(1) { - height: 170px + height: 190px } textarea:nth-of-type(2) { - height: 100px + height: 110px } .playable-buttons { From 2fa99b790b1d69be053c563959b51d0dbfe34d96 Mon Sep 17 00:00:00 2001 From: azerum <60925680+azerum@users.noreply.github.com> Date: Fri, 11 Jun 2021 19:24:45 +0300 Subject: [PATCH 004/188] fix(learn): wrap table rows in Firefox implicitly inserts \ element to the table displayed on the page, while editable html doesn't include it. In the task you need to select every other row of the table without modifying html. One way to do that is to write following selector: ``` table > th:nth-child(2n + 1) { } ``` But because \ is wrapped in \, this selector doesn't work and it's not obvious why without looking in browser inspector. I just wrapped all rows in \ so you can see it in editable html. --- learn/tasks/selectors/pseudo.html | 100 ++++++++++++++++-------------- 1 file changed, 52 insertions(+), 48 deletions(-) diff --git a/learn/tasks/selectors/pseudo.html b/learn/tasks/selectors/pseudo.html index 2683d3d0..037d5557 100644 --- a/learn/tasks/selectors/pseudo.html +++ b/learn/tasks/selectors/pseudo.html @@ -33,30 +33,32 @@

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + +
    FruitsVegetables
    ApplePotato
    OrangeCarrot
    TomatoParsnip
    KiwiOnion
    BananaBeet
    FruitsVegetables
    ApplePotato
    OrangeCarrot
    TomatoParsnip
    KiwiOnion
    BananaBeet
    @@ -71,30 +73,32 @@

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + +
    FruitsVegetables
    ApplePotato
    OrangeCarrot
    TomatoParsnip
    KiwiOnion
    BananaBeet
    FruitsVegetables
    ApplePotato
    OrangeCarrot
    TomatoParsnip
    KiwiOnion
    BananaBeet
    From 0dcc51fd4f3a35c5258c7ac69d6e460d35db64ac Mon Sep 17 00:00:00 2001 From: Baptiste Lepilleur Date: Mon, 2 Aug 2021 23:22:11 +0200 Subject: [PATCH 005/188] Simple typo fix in example text (missing #) To make box three text consistent with box one and two. --- learn/values-units/color-hex.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/learn/values-units/color-hex.html b/learn/values-units/color-hex.html index 829f2d18..682dc880 100644 --- a/learn/values-units/color-hex.html +++ b/learn/values-units/color-hex.html @@ -57,7 +57,7 @@
    #02798b
    #c55da1
    -
    128a7d
    +
    #128a7d
    From 7028d4ef20178de4f2d475896714df1ad7aa14e2 Mon Sep 17 00:00:00 2001 From: Will Bamberg Date: Tue, 10 Aug 2021 09:46:09 -0700 Subject: [PATCH 006/188] Add border-image generator --- .../arrow-down-white.png | Bin 0 -> 172 bytes .../arrow-right-white.png | Bin 0 -> 181 bytes .../border-image-generator/arrow-up-white.png | Bin 0 -> 175 bytes tools/border-image-generator/arrows.png | Bin 0 -> 372 bytes .../border-image-generator/border-image-1.png | Bin 0 -> 507 bytes .../border-image-generator/border-image-2.png | Bin 0 -> 1344 bytes .../border-image-generator/border-image-3.png | Bin 0 -> 1366 bytes .../border-image-generator/border-image-4.png | Bin 0 -> 367 bytes .../border-image-generator/border-image-5.png | Bin 0 -> 577 bytes .../border-image-generator/border-image-6.svg | 1 + tools/border-image-generator/checked.png | Bin 0 -> 275 bytes tools/border-image-generator/close.png | Bin 0 -> 271 bytes tools/border-image-generator/config.png | Bin 0 -> 287 bytes tools/border-image-generator/disabled.png | Bin 0 -> 344 bytes .../drop_arrow_icon.png | Bin 0 -> 534 bytes tools/border-image-generator/grain.png | Bin 0 -> 4716 bytes tools/border-image-generator/index.html | 155 ++ tools/border-image-generator/resize.png | Bin 0 -> 150 bytes tools/border-image-generator/script.js | 1393 +++++++++++++++++ tools/border-image-generator/styles.css | 1047 +++++++++++++ 20 files changed, 2596 insertions(+) create mode 100644 tools/border-image-generator/arrow-down-white.png create mode 100644 tools/border-image-generator/arrow-right-white.png create mode 100644 tools/border-image-generator/arrow-up-white.png create mode 100644 tools/border-image-generator/arrows.png create mode 100644 tools/border-image-generator/border-image-1.png create mode 100644 tools/border-image-generator/border-image-2.png create mode 100644 tools/border-image-generator/border-image-3.png create mode 100644 tools/border-image-generator/border-image-4.png create mode 100644 tools/border-image-generator/border-image-5.png create mode 100644 tools/border-image-generator/border-image-6.svg create mode 100644 tools/border-image-generator/checked.png create mode 100644 tools/border-image-generator/close.png create mode 100644 tools/border-image-generator/config.png create mode 100644 tools/border-image-generator/disabled.png create mode 100644 tools/border-image-generator/drop_arrow_icon.png create mode 100644 tools/border-image-generator/grain.png create mode 100644 tools/border-image-generator/index.html create mode 100644 tools/border-image-generator/resize.png create mode 100644 tools/border-image-generator/script.js create mode 100644 tools/border-image-generator/styles.css diff --git a/tools/border-image-generator/arrow-down-white.png b/tools/border-image-generator/arrow-down-white.png new file mode 100644 index 0000000000000000000000000000000000000000..ab65bddbafc306170dee6cefbc142137a4b04f32 GIT binary patch literal 172 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`oCO|{#S9F3${@^GvDCf{C@5Lt z8c`CQpH@oo*3vLs&@{orMEsf4&T?^-me@J4u Xl%;3+Ppj!1&@={5S3j3^P6i< literal 0 HcmV?d00001 diff --git a/tools/border-image-generator/arrow-up-white.png b/tools/border-image-generator/arrow-up-white.png new file mode 100644 index 0000000000000000000000000000000000000000..74749e5c68bea4a040aab7973741571237deb092 GIT binary patch literal 175 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`oCO|{#S9F3${@^GvDCf{C@5Lt z8c`CQpH@W}Sq!2)3;ffV7`|WD^LWEt R9}6^x!PC{xWt~$(69Bk^H3|R# literal 0 HcmV?d00001 diff --git a/tools/border-image-generator/arrows.png b/tools/border-image-generator/arrows.png new file mode 100644 index 0000000000000000000000000000000000000000..30d630fdaf96be7baa2d7da9de6cda337a5ab769 GIT binary patch literal 372 zcmeAS@N?(olHy`uVBq!ia0vp^3P3Et!3-oF?)7E^DVB6cUq=Rpjs4tz5?O(K#^NA% zCx&(BWL^R}2?0JKuI>ds_4V~NH8qbOJ*udvxOM9mko*7t|MvEFhhKoOt9UUD&Ms00v8)Hrk&@Q=>AirRS zE!#K+*|}KG9yrLmP57Xs2$RsoJ;%72xespTIeO{Vt&kF+$_`H##}JM4y%XKV4k&Q2 zn(h_9EPdzyG*2;>+e+*9ojcLoF0kMKPT{+x>GF@S1;5+=aYN;%$5StPx#Ay7900Co3L_t(Y$L*G}PQ)+_hJAg4 z6G*UjNF~-ASu@_)k?lq{M%WM|D-u$6PC|J~(l|}*G?DCqt=^(9{`EVtqX5LXKSGJ& zgDg0L!{dpp%+J_EaOb{D=J4d_4hnhBl}zJ(5#w^KxdC%%TiMD@&YKmrI~ijzV=9vBpq1#=Jo}4>OY_igJ{!Bs`Ju4&#D_ zV_Zj$NM6XiDUv~yp(DJJrF$hC{Vzi=3Qf6BdF_hxl;4r!-sQcd=udgiE9OW(n~Hgt zzaj82LN7QP&bGI)LQ_7#O>ndvq3uaBWIR1W793&!%uPv-4C$VRWI=16+qO%BraU-} z!YL}FV|$Vb<;mGPdCKodaqse8QuL?1 x=M{4#pH0QQ%ioawZ?pex_P@>kxB2hC%^yc~XFj;PvyuP+002ovPDHLkV1lvW=2rj! literal 0 HcmV?d00001 diff --git a/tools/border-image-generator/border-image-2.png b/tools/border-image-generator/border-image-2.png new file mode 100644 index 0000000000000000000000000000000000000000..64f16111c47e09084428983354d89e33f9b25688 GIT binary patch literal 1344 zcma)+`BPH|5XWPq77_vii3X^O0!qMAPz%KYl_L+LB4;96&~OAojB&(Namq-c9P)hO z5Fu(Q1rjWVD;$dAfF+oas1<|~5=u}A$Q20pAxirA54!W&{m#zp?0kRN+01~`J{Xia z3V}diNWR`dutsmB9ulrTZnPL!%-FKBb_b@_dZTr<(pUm+V^UHhVu_s`9C&L|!(F3(Jk)eH<*$p?Gq z`>Jc-j(_;rJw5q!=wm&%d9YF%)!!4e#PxoY@l-SMT&L4f0(HZ%p9Acm)4_22e*@7j z*M|^@&E_O;kC24EhQ8i-3nzmu0luh$=%(Pp0rkFhosJj=Mj{<{4XJ#xW8Q}D%|ss{ zEOq=Ad-A2x?xhvv^y-wdH26vl6`FD(X1s7SusgU6W|gu7Za z#XE0Jv-S#hNPidxo!|2=Ctm_HhP{I!jT?~0A<7={z5G@fI<^Z6yuX1Uhp_-sVZyLo z9E$MRB}W9A}xemom_P3)d&Uh2v6sQ!tg*NP7ou-WCgA+18*iF)1(`&XcCvxTX_=%S@eftx5M zEJJ@X>wVI|M5qjT`;w7#evH=5Yk{smIdG2a(UU&XXxR1yZSr^M<$B+LvJ4wh*Hzot zynB5{=Nk3<+oTD3@`!Iv`ulbMp-OV`NLmI=hqdS1be3tr8+5PBhe~r;he7wm0#3c>Ur%k9@ZpE*Jf%O_FQGT7LUAb) zfuhDaCl@P{kZLb{T?azBh-o4WMIwyyvl}EyD`8u%|_f9 zTghKAb10XT6}!wtMKVvxUjow!V@OMFwh^M`)J*g@G0axL#@c;k- literal 0 HcmV?d00001 diff --git a/tools/border-image-generator/border-image-3.png b/tools/border-image-generator/border-image-3.png new file mode 100644 index 0000000000000000000000000000000000000000..847675cb7a4306ad22ce5b9c2c82851c86d7472a GIT binary patch literal 1366 zcmV-c1*!UpP)mYsaP+2H{`vIsuxa$6Qt!%+@w<5M(3ShruK2NY{pHd5xPSZ0 zqWZ;_{NKg%t6})7XYs&)?$w?4mqhI9yZ`_Hl0J@_0000XbW%=J|NsC0|NsC0|NsC0 z|NsC0|NsC0|NsC0|NsC0|NsC00H49oApigbTuDShRCwC7n(NwYFc5`D9P8YoEp12c z|0;J71VO*u%=~SiyewACOa@-}nv+K5Fz^uJ8Bh`I2Saoq!K^`id5L*K;+2STgB5Vc z^22u~cqg*if0hZ*y1H%5IPe1i0qU+E6S}?#U!0g=Byf z=(dY+ua=N4*fK=q8I}b@>)o&Q7LQdgle}Vd_yDo-+OFf43fT&K!{`>aFqcWkLY#YYvKNi!-H2yfK*+UXY z_twbM-m3?Z>tvGAnPh};2mO{Jtl{MwAl2FB{$KPanIN3S6p#oK6*6xv24gVE4AEKT z=g6^IKvr9enHWr>KnnbrW`xt0GeQ!KOhcqe6o`In`6;p&UqfosRvAsALiqmH@}DNb zWD9Z3T4gfH03rp4;WL>b z40DQ%C`^&n^PNy+5&est;XRQM!&{^JmR%7F`QT}?uA!ib@jgJv^y-U;Vt~-;)rQt< z^a-6_DF!2iOs`M>SpiO|m#D)M>a1RDVKsGDFRD4U2ohBggZo!q(}3E z)7Usa^k14Jl;`k^Tq%}AC*t002XSmt`!U#O;|l|1aSou!#MK-l z?Z#(hH+jZf7wOf}AjWKxl}t)Ff~>UoCFXz>%07*qoM6N<$f&r7N)c^nh literal 0 HcmV?d00001 diff --git a/tools/border-image-generator/border-image-4.png b/tools/border-image-generator/border-image-4.png new file mode 100644 index 0000000000000000000000000000000000000000..c11d34b0848d2aba569266fd0a0f39a53f941c25 GIT binary patch literal 367 zcmeAS@N?(olHy`uVBq!ia0vp^DIm666;Q20*ZT^z5Y-QfV4zlXKd^+OkJwdZaRPd1gqz_PFVj= go9VlCJp(ht)oBN7rmWuW4fGI$r>mdKI;Vst0C`BBmjD0& literal 0 HcmV?d00001 diff --git a/tools/border-image-generator/border-image-5.png b/tools/border-image-generator/border-image-5.png new file mode 100644 index 0000000000000000000000000000000000000000..0598418374627b632f9d5319bd6b7c0e2e4ec549 GIT binary patch literal 577 zcmeAS@N?(olHy`uVBq!ia0vp^DImgIgWzUjPjeE(!7rhKL}O44Z22a4;}1 z)_b}*hE&{ob2B>skO5CyBJ*1B1Ut1 ze)O()XR_=5Cj2YfuvUl1{nPeeHw&g4ylU#1U&E+$Xvc&ly-R+@P3Imc|N4xha{f^Wp`f6Ui!@`$f*%Ok#ClgE5LTORXumptO@`tpdc zv*a;fWx%dN_PeorcQh-Bl@o^lWy(F4h?jr%wttsa^-1~vnNv0A*NZ=U&;EAD?>~M& zii7_bIxzPLmCthPvkq0(^@x4!Fr`=aqM6d7JQkPxA50E_P?131s|Rh;KejV4Gq5d5 VF(` \ No newline at end of file diff --git a/tools/border-image-generator/checked.png b/tools/border-image-generator/checked.png new file mode 100644 index 0000000000000000000000000000000000000000..cd8e86540f89489d36d6cc9a5ab9033999a3b11e GIT binary patch literal 275 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`oCO|{#S9F3${@^GvDCf{C@5Lt z8c`CQpH@hp7|JyUG&S<>H zX285rQkCrt`y+b?8K*wR;(y8q{1y0)q%j!tot^wYxvBI8+Y087ye0Nbh5BM=Z#T~1 zy~!Y|P{%a&55tjT0UyhBX7Mu^s#i(KI0SzYJA2-sKqAt36JwFXpAYtR1w0*g03~Ot$DHFw2y=Y!%A_>zh7n2 RWq@vF@O1TaS?83{1ON%TT}uD} literal 0 HcmV?d00001 diff --git a/tools/border-image-generator/close.png b/tools/border-image-generator/close.png new file mode 100644 index 0000000000000000000000000000000000000000..78bf9d7a5c8c721d5b64c07a18db15139e101fbd GIT binary patch literal 271 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`oCO|{#S9F3${@^GvDCf{C@5Lt z8c`CQpH@;E0#mnmS1(pZPir03&wxYa{OlqIY|MX`rP>%!U{H7XB9D<@y_ikNlCXVQ-r6-POaPaX+s ziGiD>>O2Dk%#TT|Jiyi6!fQO&b<^U|XLrpuhc26Rq0%Sq+l*}$4E;MI1Z8@hj{@Dv N;OXk;vd$@?2>{3>T!sJu literal 0 HcmV?d00001 diff --git a/tools/border-image-generator/config.png b/tools/border-image-generator/config.png new file mode 100644 index 0000000000000000000000000000000000000000..bd4c549baf392e412ced63f4376b54bc87cf6f51 GIT binary patch literal 287 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`oCO|{#S9F3${@^GvDCf{C@5Lt z8c`CQpH@h2izNIZ-c|6&K z`4N9Wj@uf>lMZtjQq!3})@z(|5$Zma>R>df?W)5cmd^hI9p*|OnK>mLINTq8I+SG+ zet==q52c(q2G$^{Nt?}+I5(7f-1BT^)$#enJWF`)28jo~%bqdYG4I(Z@u2ZM!whjb zC)Mi@KOPd!iEDV+o6-1!@#u@jZd2KmAgNx?jKHrlo&RM{a$5)sakMjUl%Kamrd!2- e_8Au=HikxKXDR00SCWA4X7F_Nb6Mw<&;$UL++^ec literal 0 HcmV?d00001 diff --git a/tools/border-image-generator/disabled.png b/tools/border-image-generator/disabled.png new file mode 100644 index 0000000000000000000000000000000000000000..1dd2c4c20a188993d385c72d92c3520685039a03 GIT binary patch literal 344 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!63?wyl`GbKJOS+@4BLl<6e(pbstUx|vage(c z!@6@aFM*t>0G|+7_X3~)v;pxKV@?5Wku3@G3uX}I6T6icbmcf3`)6sn{PP!1f62Y^ zGd+WcSK!C>fVc0S0~Ho~x;TbNT<$&ZDb%3A!*ZabK|$-???3-%M=4jCZGRb})p=t5 zr(>-Tdg_bU9_$Kzb-yy~RMr;N#2vF;)i(7@aPWCMZY*fw)LOpAB2M5`*95mU0nbd5 z3f_qv5I7~a`0h5=3+JO&J}REEZvW-k>)!7^_P_cIll(&VU&sFcPykxb;OXk;vd$@? F2>=;FyV(E$ literal 0 HcmV?d00001 diff --git a/tools/border-image-generator/drop_arrow_icon.png b/tools/border-image-generator/drop_arrow_icon.png new file mode 100644 index 0000000000000000000000000000000000000000..b4dffa3f8e6812934669ddae010e8388f050ed98 GIT binary patch literal 534 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 + + + + + Border image generator + + + + + +
    + + + +
    + +
    Upload image
    + +
    +
    + +
    +
    Control Box
    +
    +
    +
    scale
    +
    +
    +
    +
    +
    +
    draggable
    +
    +
    +
    +
    section height
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +
    +
    + + +
    + + +
    +
    border-image-slice
    +
    +
    fill
    +
    +
    +
    + + +
    +
    border-image-width
    +
    + + +
    +
    border-image-outset
    +
    + + +
    +
    additional-properties
    +
    +
    repeat-x
    +
    +
    repeat
    +
    stretch
    +
    round
    +
    +
    +
    +
    repeat-y
    +
    +
    repeat
    +
    stretch
    +
    round
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    CSS Code
    +
    + border-image-slice: + +
    +
    + border-image-width: + +
    +
    + border-image-outset: + +
    +
    + border-image-repeat: + +
    +
    + border-image-source: + +
    +
    + border-style: + solid; +
    +
    +
    +
    + + + + + diff --git a/tools/border-image-generator/resize.png b/tools/border-image-generator/resize.png new file mode 100644 index 0000000000000000000000000000000000000000..6a641c855bf2dfd20586edefdcb2dbe02c48a494 GIT binary patch literal 150 zcmeAS@N?(olHy`uVBq!ia0vp^93afZ3?z3ZhDiV^mUKs7M+SzC{oH>NS%G}U;vjb? zhIQv;UIIBh0X`wF?gc)pR;@aJ{`~Xj&s&_M&VUq^1o;IsI6S+N2INS4x;Tb#Tu)9& rNJ@B+%Fw9BmKHCt_QH{Zo8k=olbM$Ar*bP0l+XkK24yRd literal 0 HcmV?d00001 diff --git a/tools/border-image-generator/script.js b/tools/border-image-generator/script.js new file mode 100644 index 00000000..62732a4b --- /dev/null +++ b/tools/border-image-generator/script.js @@ -0,0 +1,1393 @@ + +/** + * UI-SlidersManager + */ + +var InputSliderManager = (function InputSliderManager() { + + var subscribers = {}; + var sliders = []; + + var InputComponent = function InputComponent(obj) { + var input = document.createElement('input'); + input.setAttribute('type', 'text'); + input.style.width = 50 + obj.precision * 10 + 'px'; + + input.addEventListener('click', function(e) { + this.select(); + }); + + input.addEventListener('change', function(e) { + var value = parseFloat(e.target.value); + + if (isNaN(value) === true) + setValue(obj.topic, obj.value); + else + setValue(obj.topic, value); + }); + + return input; + }; + + var SliderComponent = function SliderComponent(obj, sign) { + var slider = document.createElement('div'); + var startX = null; + var start_value = 0; + + slider.addEventListener("click", function(e) { + document.removeEventListener("mousemove", sliderMotion); + setValue(obj.topic, obj.value + obj.step * sign); + }); + + slider.addEventListener("mousedown", function(e) { + startX = e.clientX; + start_value = obj.value; + document.body.style.cursor = "e-resize"; + + document.addEventListener("mouseup", slideEnd); + document.addEventListener("mousemove", sliderMotion); + }); + + var slideEnd = function slideEnd(e) { + document.removeEventListener("mousemove", sliderMotion); + document.body.style.cursor = "auto"; + slider.style.cursor = "pointer"; + }; + + var sliderMotion = function sliderMotion(e) { + slider.style.cursor = "e-resize"; + var delta = (e.clientX - startX) / obj.sensitivity | 0; + var value = delta * obj.step + start_value; + setValue(obj.topic, value); + }; + + return slider; + }; + + var InputSlider = function(node) { + var min = parseFloat(node.getAttribute('data-min')); + var max = parseFloat(node.getAttribute('data-max')); + var step = parseFloat(node.getAttribute('data-step')); + var value = parseFloat(node.getAttribute('data-value')); + var topic = node.getAttribute('data-topic'); + var unit = node.getAttribute('data-unit'); + var name = node.getAttribute('data-info'); + var sensitivity = node.getAttribute('data-sensitivity') | 0; + var precision = node.getAttribute('data-precision') | 0; + + this.min = isNaN(min) ? 0 : min; + this.max = isNaN(max) ? 100 : max; + this.precision = precision >= 0 ? precision : 0; + this.step = step < 0 || isNaN(step) ? 1 : step.toFixed(precision); + this.topic = topic; + this.node = node; + this.unit = unit === null ? '' : unit; + this.sensitivity = sensitivity > 0 ? sensitivity : 5; + value = isNaN(value) ? this.min : value; + + var input = new InputComponent(this); + var slider_left = new SliderComponent(this, -1); + var slider_right = new SliderComponent(this, 1); + + slider_left.className = 'ui-input-slider-left'; + slider_right.className = 'ui-input-slider-right'; + + if (name) { + var info = document.createElement('span'); + info.className = 'ui-input-slider-info'; + info.textContent = name; + node.appendChild(info); + } + + node.appendChild(slider_left); + node.appendChild(input); + node.appendChild(slider_right); + + this.input = input; + sliders[topic] = this; + setValue(topic, value); + }; + + InputSlider.prototype.setInputValue = function setInputValue() { + this.input.value = this.value.toFixed(this.precision) + this.unit; + }; + + var setValue = function setValue(topic, value, send_notify) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + value = parseFloat(value.toFixed(slider.precision)); + + if (value > slider.max) value = slider.max; + if (value < slider.min) value = slider.min; + + slider.value = value; + slider.node.setAttribute('data-value', value); + + slider.setInputValue(); + + if (send_notify === false) + return; + + notify.call(slider); + }; + + var setMax = function setMax(topic, value) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + slider.max = value; + setValue(topic, slider.value); + }; + + var setMin = function setMin(topic, value) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + slider.min = value; + setValue(topic, slider.value); + }; + + var setUnit = function setUnit(topic, unit) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + slider.unit = unit; + setValue(topic, slider.value); + }; + + var setStep = function setStep(topic, value) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + slider.step = parseFloat(value); + setValue(topic, slider.value); + }; + + var setPrecision = function setPrecision(topic, value) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + value = value | 0; + slider.precision = value; + + var step = parseFloat(slider.step.toFixed(value)); + if (step === 0) + slider.step = 1 / Math.pow(10, value); + + setValue(topic, slider.value); + }; + + var setSensitivity = function setSensitivity(topic, value) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + value = value | 0; + + slider.sensitivity = value > 0 ? value : 5; + }; + + var getNode = function getNode(topic) { + return sliders[topic].node; + }; + + var getPrecision = function getPrecision(topic) { + return sliders[topic].precision; + }; + + var getStep = function getStep(topic) { + return sliders[topic].step; + }; + + var subscribe = function subscribe(topic, callback) { + if (subscribers[topic] === undefined) + subscribers[topic] = []; + subscribers[topic].push(callback); + }; + + var unsubscribe = function unsubscribe(topic, callback) { + subscribers[topic].indexOf(callback); + subscribers[topic].splice(index, 1); + }; + + var notify = function notify() { + if (subscribers[this.topic] === undefined) + return; + for (var i = 0; i < subscribers[this.topic].length; i++) + subscribers[this.topic][i](this.value); + }; + + var createSlider = function createSlider(topic, label) { + var slider = document.createElement('div'); + slider.className = 'ui-input-slider'; + slider.setAttribute('data-topic', topic); + + if (label !== undefined) + slider.setAttribute('data-info', label); + + new InputSlider(slider); + return slider; + }; + + var init = function init() { + var elem = document.querySelectorAll('.ui-input-slider'); + var size = elem.length; + for (var i = 0; i < size; i++) + new InputSlider(elem[i]); + }; + + return { + init : init, + setMax : setMax, + setMin : setMin, + setUnit : setUnit, + setStep : setStep, + getNode : getNode, + getStep : getStep, + setValue : setValue, + subscribe : subscribe, + unsubscribe : unsubscribe, + setPrecision : setPrecision, + setSensitivity : setSensitivity, + getPrecision : getPrecision, + createSlider : createSlider, + }; + +})(); + +/** + * UI-DropDown Select + */ + +var DropDownManager = (function DropdownManager() { + + var subscribers = {}; + var dropdowns = []; + var active = null; + + var visibility = ["hidden", "visible"]; + + var DropDown = function DropDown(node) { + var topic = node.getAttribute('data-topic'); + var label = node.getAttribute('data-label'); + var selected = node.getAttribute('data-selected') | 0; + + var select = document.createElement('div'); + var list = document.createElement('div'); + var uval = 0; + var option = null; + var option_value = null; + + list.className = 'ui-dropdown-list'; + select.className = 'ui-dropdown-select'; + + while (node.firstElementChild !== null) { + option = node.firstElementChild; + option_value = option.getAttribute('data-value'); + + if (option_value === null) + option.setAttribute('data-value', uval); + + list.appendChild(node.firstElementChild); + uval++; + } + + node.appendChild(select); + node.appendChild(list); + + select.onclick = this.toggle.bind(this); + list.onclick = this.updateValue.bind(this); + document.addEventListener('click', clickOut); + + this.state = 0; + this.time = 0; + this.dropmenu = list; + this.select = select; + this.toggle(false); + this.value = {}; + this.topic = topic; + + if (label) + select.textContent = label; + else + this.setNodeValue(list.children[selected]); + + dropdowns[topic] = this; + + }; + + DropDown.prototype.toggle = function toggle(state) { + if (typeof(state) === 'boolean') + this.state = state === false ? 0 : 1; + else + this.state = 1 ^ this.state; + + if (active !== this) { + if (active) + active.toggle(false); + active = this; + } + + if (this.state === 0) + this.dropmenu.setAttribute('data-hidden', 'true'); + else + this.dropmenu.removeAttribute('data-hidden'); + + }; + + var clickOut = function clickOut(e) { + if (active.state === 0 || + e.target === active.dropmenu || + e.target === active.select) + return; + + active.toggle(false); + }; + + DropDown.prototype.updateValue = function updateValue(e) { + + if (Date.now() - this.time < 500) + return; + + if (e.target.className !== "ui-dropdown-list") { + this.setNodeValue(e.target); + this.toggle(false); + } + + this.time = Date.now(); + }; + + DropDown.prototype.setNodeValue = function setNodeValue(node) { + this.value['name'] = node.textContent; + this.value['value'] = node.getAttribute('data-value'); + + this.select.textContent = node.textContent; + this.select.setAttribute('data-value', this.value['value']); + + notify.call(this); + }; + + var createDropDown = function createDropDown(topic, options) { + + var dropdown = document.createElement('div'); + dropdown.setAttribute('data-topic', topic); + dropdown.className = 'ui-dropdown'; + + for (var i in options) { + var x = document.createElement('div'); + x.setAttribute('data-value', i); + x.textContent = options[i]; + dropdown.appendChild(x); + } + + new DropDown(dropdown); + + return dropdown; + }; + + var setValue = function setValue(topic, index) { + if (dropdowns[topic] === undefined || + index >= dropdowns[topic].dropmenu.children.length) + return; + + dropdowns[topic].setNodeValue(dropdowns[topic].dropmenu.children[index]); + }; + + var subscribe = function subscribe(topic, callback) { + if (subscribers[topic] === undefined) + subscribers[topic] = []; + subscribers[topic].push(callback); + }; + + var unsubscribe = function unsubscribe(topic, callback) { + var index = subscribers[topic].indexOf(callback); + subscribers[topic].splice(index, 1); + }; + + var notify = function notify() { + if (subscribers[this.topic] === undefined) + return; + + for (var i in subscribers[this.topic]) { + subscribers[this.topic][i](this.value); + } + }; + + var init = function init() { + var elem, size; + + elem = document.querySelectorAll('.ui-dropdown'); + size = elem.length; + for (var i = 0; i < size; i++) + new DropDown(elem[i]); + + }; + + return { + init : init, + setValue : setValue, + subscribe : subscribe, + unsubscribe : unsubscribe, + createDropDown : createDropDown + }; + +})(); + +/** + * UI-ButtonManager + */ + +var ButtonManager = (function CheckBoxManager() { + + var subscribers = []; + var buttons = []; + + var CheckBox = function CheckBox(node) { + var topic = node.getAttribute('data-topic'); + var state = node.getAttribute('data-state'); + var name = node.getAttribute('data-label'); + var align = node.getAttribute('data-text-on'); + + state = (state === "true"); + + var checkbox = document.createElement("input"); + var label = document.createElement("label"); + + var id = 'checkbox-' + topic; + checkbox.id = id; + checkbox.setAttribute('type', 'checkbox'); + checkbox.checked = state; + + label.setAttribute('for', id); + if (name) { + label.className = 'text'; + if (align) + label.className += ' ' + align; + label.textContent = name; + } + + node.appendChild(checkbox); + node.appendChild(label); + + this.node = node; + this.topic = topic; + this.checkbox = checkbox; + + checkbox.addEventListener('change', function(e) { + notify.call(this); + }.bind(this)); + + buttons[topic] = this; + }; + + var getNode = function getNode(topic) { + return buttons[topic].node; + }; + + var setValue = function setValue(topic, value) { + var obj = buttons[topic]; + if (obj === undefined) + return; + + obj.checkbox.checked = value; + notify.call(obj); + }; + + var subscribe = function subscribe(topic, callback) { + if (subscribers[topic] === undefined) + subscribers[topic] = []; + + subscribers[topic].push(callback); + }; + + var unsubscribe = function unsubscribe(topic, callback) { + subscribers[topic].indexOf(callback); + subscribers[topic].splice(index, 1); + }; + + var notify = function notify() { + if (subscribers[this.topic] === undefined) + return; + for (var i = 0; i < subscribers[this.topic].length; i++) + subscribers[this.topic][i](this.checkbox.checked); + }; + + var init = function init() { + var elem = document.querySelectorAll('.ui-checkbox'); + var size = elem.length; + for (var i = 0; i < size; i++) + new CheckBox(elem[i]); + }; + + return { + init : init, + setValue : setValue, + subscribe : subscribe, + unsubscribe : unsubscribe + }; + +})(); + +window.addEventListener("load", function() { + BorderImage.init(); +}); + +var BorderImage = (function BorderImage() { + + var getElemById = document.getElementById.bind(document); + + var subject; + var preview; + var guidelines = []; + var positions = ['top', 'right', 'bottom', 'left']; + + var makeDraggable = function makeDraggable(elem) { + + var offsetTop; + var offsetLeft; + + elem.setAttribute('data-draggable', 'true'); + + var dragStart = function dragStart(e) { + if (e.target.getAttribute('data-draggable') !== 'true' || + e.target !== elem || e.button !== 0) + return; + + offsetLeft = e.clientX - elem.offsetLeft; + offsetTop = e.clientY - elem.offsetTop; + + document.addEventListener('mousemove', mouseDrag); + document.addEventListener('mouseup', dragEnd); + }; + + var dragEnd = function dragEnd(e) { + if (e.button !== 0) + return; + + document.removeEventListener('mousemove', mouseDrag); + document.removeEventListener('mouseup', dragEnd); + }; + + var mouseDrag = function mouseDrag(e) { + + elem.style.left = e.clientX - offsetLeft + 'px'; + elem.style.top = e.clientY - offsetTop + 'px'; + }; + + elem.addEventListener('mousedown', dragStart, false); + }; + + var PreviewControl = function PreviewControl() { + + var dragging = false; + var valueX = null; + var valueY = null; + + var dragStart = function dragStart(e) { + if (e.button !== 0) + return; + + valueX = e.clientX - preview.clientWidth; + valueY = e.clientY - preview.clientHeight; + dragging = true; + + document.addEventListener('mousemove', mouseDrag); + }; + + var dragEnd = function dragEnd(e) { + if (e.button !== 0 || dragging === false) + return; + + document.removeEventListener('mousemove', mouseDrag); + dragging = false; + }; + + var mouseDrag = function mouseDrag(e) { + InputSliderManager.setValue('preview-width', e.clientX - valueX); + InputSliderManager.setValue('preview-height', e.clientY - valueY); + }; + + var init = function init() { + + makeDraggable(preview); + makeDraggable(subject); + + var handle = document.createElement('div'); + handle.className = 'resize-handle'; + + handle.addEventListener('mousedown', dragStart); + document.addEventListener('mouseup', dragEnd); + + preview.appendChild(handle); + + }; + + return { + init: init + }; + + }(); + + var ImageReader = (function ImageReader() { + + var fReader = new FileReader(); + var browse = document.createElement('input'); + + var loadImage = function loadImage(e) { + if (browse.files.length === 0) + return; + + var file = browse.files[0]; + + if (file.type.slice(0, 5) !== 'image') + return; + + fReader.readAsDataURL(file); + + return false; + }; + + fReader.onload = function(e) { + ImageControl.loadRemoteImage(e.target.result); + }; + + var load = function load() { + browse.click(); + }; + + browse.setAttribute('type', 'file'); + browse.style.display = 'none'; + browse.onchange = loadImage; + + return { + load: load + }; + + })(); + + var ImageControl = (function ImageControl() { + + var scale = 0.5; + var imgSource = new Image(); + var imgState = null; + var selected = null; + + var topics = ['slice', 'width', 'outset']; + var properties = {}; + properties['border1'] = { + fill : false, + + slice_values : [27, 27, 27, 27], + width_values : [20, 20, 20, 20], + outset_values : [0, 0, 0, 0], + + slice_units : [0, 0, 0, 0], + width_units : [0, 0, 0, 0], + outset_units : [0, 0, 0, 0], + + repeat : [1, 1], + size : [300, 200], + preview_area : 400 + }; + + properties['border2'] = { + fill : false, + + slice_values : [33, 33, 33, 33], + width_values : [1.5, 1.5, 1.5, 1.5], + outset_values : [0, 0, 0, 0], + + slice_units : [1, 1, 1, 1], + width_units : [2, 2, 2, 2], + outset_units : [0, 0, 0, 0], + + repeat : [2, 2], + size : [300, 200], + preview_area : 400 + }; + + properties['border3'] = { + fill : true, + + slice_values : [15, 15, 15, 15], + width_values : [10, 10, 10, 10], + outset_values : [0, 0, 0, 0], + + slice_units : [0, 0, 0, 0], + width_units : [0, 0, 0, 0], + outset_units : [0, 0, 0, 0], + + repeat : [2, 2], + size : [300, 200], + preview_area : 400 + }; + + properties['border4'] = { + fill : false, + + slice_values : [13, 13, 13, 13], + width_values : [13, 13, 13, 13], + outset_values : [13, 13, 13, 13], + + slice_units : [0, 0, 0, 0], + width_units : [0, 0, 0, 0], + outset_units : [0, 0, 0, 0], + + repeat : [0, 0], + size : [300, 200], + preview_area : 400 + }; + + properties['border5'] = { + fill : false, + + slice_values : [12, 12, 12, 12], + width_values : [12, 12, 12, 12], + outset_values : [0, 0, 0, 0], + + slice_units : [0, 0, 0, 0], + width_units : [0, 0, 0, 0], + outset_units : [0, 0, 0, 0], + + repeat : [0, 0], + size : [300, 200], + preview_area : 400, + }; + + properties['border6'] = { + fill : false, + + slice_values : [42, 42, 42, 42], + width_values : [42, 42, 42, 42], + outset_values : [0, 0, 0, 0], + + slice_units : [0, 0, 0, 0], + width_units : [0, 0, 0, 0], + outset_units : [0, 0, 0, 0], + + repeat : [2, 2], + size : [350, 350], + preview_area : 500, + }; + + var loadLocalImage = function loadLocalImage(source) { + var location = "images/" + source; + imgSource.src = location; + }; + + var loadRemoteImage = function loadRemoteImage(source) { + imgSource.src = source; + if (selected) + selected.removeAttribute('selected'); + Tool.setOutputCSS('source', 'url("' + source + '")'); + }; + + var pickImage = function pickImage(e) { + if (e.target.className === 'image') { + selected = e.target; + selected.setAttribute('selected', 'true'); + loadRemoteImage(e.target.src); + imgState = e.target.getAttribute('data-stateID'); + } + }; + + var loadImageState = function loadImageState(stateID) { + if (properties[stateID] === undefined) + return; + + var prop = properties[stateID]; + var topic; + var unit_array; + var value_array; + + for (var i in topics) { + for (var j=0; j<4; j++) { + topic = topics[i] + '-' + positions[j]; + unit_array = topics[i] + '_units'; + value_array = topics[i] + '_values'; + InputSliderManager.setValue(topic, prop[value_array][j]); + DropDownManager.setValue(topic, prop[unit_array][j]); + } + } + + ButtonManager.setValue('slice-fill', prop['fill']); + DropDownManager.setValue('image-repeat-X', prop['repeat'][0]); + DropDownManager.setValue('image-repeat-Y', prop['repeat'][1]); + InputSliderManager.setValue('preview-width', prop['size'][0]); + InputSliderManager.setValue('preview-height', prop['size'][1]); + InputSliderManager.setValue('preview-area-height', prop['preview_area']); + }; + + var update = function update() { + scale = Math.min(300, (30000 / this.width) | 0); + setScale(scale); + InputSliderManager.setValue('scale', scale, false); + + subject.style.backgroundImage = 'url("' + this.src + '")'; + preview.style.borderImageSource = 'url("' + this.src + '")'; + + guidelines['slice-top'].setMax(this.height); + guidelines['slice-right'].setMax(this.width); + guidelines['slice-bottom'].setMax(this.height); + guidelines['slice-left'].setMax(this.width); + + if (imgState) + loadImageState(imgState); + }; + + var setScale = function setScale(value) { + scale = value; + var w = imgSource.width * scale / 100 | 0; + var h = imgSource.height * scale / 100 | 0; + subject.style.width = w + 'px'; + subject.style.height = h + 'px'; + + for (var i = 0; i < positions.length; i++) + guidelines['slice-' + positions[i]].updateGuidelinePos(); + }; + + var getScale = function getScale() { + return scale/100; + }; + + var toggleGallery = function toggleGallery() { + var gallery = getElemById('image-gallery'); + var button = getElemById('toggle-gallery'); + var state = 1; + button.addEventListener('click', function() { + state = 1 ^ state; + if (state === 0) { + gallery.setAttribute('data-collapsed', 'true'); + button.setAttribute('data-action', 'show'); + } + else { + gallery.removeAttribute('data-collapsed'); + button.setAttribute('data-action', 'hide'); + } + }); + }; + + var init = function init() { + var gallery = getElemById('image-gallery'); + var browse = getElemById('load-image'); + var remote = getElemById('remote-url'); + var load_remote = getElemById('load-remote'); + + remote.addEventListener('change', function(){ + loadRemoteImage(this.value); + }); + + load_remote.addEventListener('click', function(){ + loadRemoteImage(remote.value); + }); + + browse.addEventListener('click', ImageReader.load); + gallery.addEventListener('click', pickImage); + imgSource.addEventListener('load', update); + + InputSliderManager.subscribe('scale', setScale); + InputSliderManager.setValue('scale', scale); + imgState = 'border1'; + loadRemoteImage('border-image-1.png'); + toggleGallery(); + }; + + return { + init: init, + getScale : getScale, + loadRemoteImage: loadRemoteImage + }; + + })(); + + var GuideLine = function GuideLine(node) { + var topic = node.getAttribute('data-topic'); + var axis = node.getAttribute('data-axis'); + + this.node = node; + this.topic = topic; + this.axis = axis; + this.info = topic.split('-')[1]; + + this.position = 0; + this.value = 0; + this.unit = 0; + this.max = 0; + this.pos = positions.indexOf(this.info); + + guidelines[topic] = this; + + var relative_container = document.createElement('div'); + var tooltip = document.createElement('div'); + var tooltip2 = document.createElement('div'); + + tooltip.className = 'tooltip'; + tooltip.setAttribute('data-info', this.info); + + tooltip2.className = 'tooltip2'; + tooltip2.textContent = this.info; + tooltip2.setAttribute('data-info', this.info); + + this.tooltip = tooltip; + + relative_container.appendChild(tooltip); + relative_container.appendChild(tooltip2); + node.appendChild(relative_container); + + var startX = 0; + var startY = 0; + var start = 0; + + var startDrag = function startDrag(e) { + startX = e.clientX; + startY = e.clientY; + start = guidelines[topic].position; + document.body.setAttribute('data-move', axis); + relative_container.setAttribute('data-active', ''); + node.setAttribute('data-active', ''); + + document.addEventListener('mousemove', updateGuideline); + document.addEventListener('mouseup', endDrag); + }; + + var endDrag = function endDrag() { + document.body.removeAttribute('data-move'); + relative_container.removeAttribute('data-active'); + node.removeAttribute('data-active'); + + document.removeEventListener('mousemove', updateGuideline); + }; + + var updateGuideline = function updateGuideline(e) { + var value; + if (topic === 'slice-top') + value = e.clientY - startY + start; + + if (topic === 'slice-right') + value = startX - e.clientX + start; + + if (topic === 'slice-bottom') + value = startY - e.clientY + start; + + if (topic === 'slice-left') + value = e.clientX - startX + start; + + if (this.unit === 0) + InputSliderManager.setValue(topic, value * 1 / ImageControl.getScale() | 0); + else { + InputSliderManager.setValue(topic, (value * 100 / (this.max * ImageControl.getScale())) | 0); + } + + }.bind(this); + + node.addEventListener("mousedown", startDrag); + + InputSliderManager.subscribe(topic, this.setPosition.bind(this)); + InputSliderManager.setValue(topic, this.position); + }; + + GuideLine.prototype.updateGuidelinePos = function updateGuidelinePos() { + if (this.unit === 0) + this.position = this.value * ImageControl.getScale() | 0; + else + this.position = this.value * this.max * ImageControl.getScale() / 100 | 0; + + this.node.style[this.info] = this.position + 'px'; + }; + + GuideLine.prototype.setPosition = function setPosition(value) { + this.value = value; + this.tooltip.textContent = value; + this.updateGuidelinePos(); + Tool.setBorderSlice(this.pos, value); + }; + + GuideLine.prototype.setMax = function setMax(max) { + this.max = max; + this.updateLimit(); + }; + + GuideLine.prototype.updateLimit = function updateLimit() { + if (this.unit === 1) + InputSliderManager.setMax(this.topic, 100); + else + InputSliderManager.setMax(this.topic, this.max); + }; + + GuideLine.prototype.setUnit = function setUnit(type) { + if (type === '%') this.unit = 1; + if (type === '') this.unit = 0; + this.updateLimit(); + }; + + /* + * Unit panel + */ + var UnitPanel = (function UnitPanel () { + + var panel; + var title; + var precision; + var step; + var unit_topic = null; // settings are made for this topic + var step_option = [1, 0.1, 0.01]; + + var updatePrecision = function updatePrecision(value) { + InputSliderManager.setPrecision('unit-step', value); + InputSliderManager.setStep('unit-step', step_option[value]); + InputSliderManager.setMin('unit-step', step_option[value]); + + if (unit_topic) + InputSliderManager.setPrecision(unit_topic, value); + }; + + var updateUnitSettings = function updateUnitSettings(value) { + if (unit_topic) + InputSliderManager.setStep(unit_topic, value); + }; + + var show = function show(e) { + var topic = e.target.getAttribute('data-topic'); + var precision = InputSliderManager.getPrecision(topic); + var step = InputSliderManager.getStep(topic); + + unit_topic = topic; + title.textContent = topic; + + panel.setAttribute('data-active', 'true'); + panel.style.top = e.target.offsetTop - 40 + 'px'; + panel.style.left = e.target.offsetLeft + 30 + 'px'; + + InputSliderManager.setValue('unit-precision', precision); + InputSliderManager.setValue('unit-step', step); + }; + + var init = function init() { + panel = document.createElement('div'); + title = document.createElement('div'); + var close = document.createElement('div'); + + step = InputSliderManager.createSlider('unit-step', 'step'); + precision = InputSliderManager.createSlider('unit-precision', 'precision'); + + InputSliderManager.setStep('unit-precision', 1); + InputSliderManager.setMax('unit-precision', 2); + InputSliderManager.setValue('unit-precision', 2); + InputSliderManager.setSensitivity('unit-precision', 20); + + InputSliderManager.setValue('unit-step', 1); + InputSliderManager.setStep('unit-step', 0.01); + InputSliderManager.setPrecision('unit-step', 2); + + InputSliderManager.subscribe('unit-precision', updatePrecision); + InputSliderManager.subscribe('unit-step', updateUnitSettings); + + close.addEventListener('click', function () { + panel.setAttribute('data-active', 'false'); + }); + + title.textContent = 'Properties'; + title.className = 'title'; + close.className = 'close'; + panel.id = 'unit-settings'; + panel.setAttribute('data-active', 'false'); + panel.appendChild(title); + panel.appendChild(precision); + panel.appendChild(step); + panel.appendChild(close); + document.body.appendChild(panel); + }; + + return { + init : init, + show : show + }; + + })(); + + /** + * Tool Manager + */ + var Tool = (function Tool() { + var preview_area; + var dropdown_unit_options = [ + { '' : '--', '%' : '%'}, + { 'px' : 'px', '%' : '%', 'em' : 'em'}, + { 'px' : 'px', 'em' : 'em'}, + ]; + + var border_slice = []; + var border_width = []; + var border_outset = []; + + var border_slice_values = []; + var border_width_values = []; + var border_outset_values = []; + + var border_slice_units = ['', '', '', '']; + var border_width_units = ['px', 'px', 'px', 'px']; + var border_outset_units = ['px', 'px', 'px', 'px']; + + var border_fill = false; + var border_repeat = ['round', 'round']; + var CSS_code = { + 'source' : null, + 'slice' : null, + 'width' : null, + 'outset' : null, + 'repeat' : null + }; + + var setBorderSlice = function setBorderSlice(positionID, value) { + border_slice[positionID] = value + border_slice_units[positionID]; + updateBorderSlice(); + }; + + var updateBorderSlice = function updateBorderSlice() { + var value = border_slice.join(' '); + if (border_fill === true) + value += ' fill'; + + preview.style.borderImageSlice = value; + setOutputCSS('slice', value); + }; + + var setBorderFill = function setBorderFill(value) { + border_fill = value; + var bimgslice = border_slice.join(' ');; + if (value === true) + bimgslice += ' fill'; + + preview.style.borderImageSlice = bimgslice; + }; + + var updateBorderWidth = function updateBorderWidth() { + var value = border_width.join(' '); + preview.style.borderImageWidth = value; + setOutputCSS('width', value); + }; + + var updateBorderOutset = function updateBorderOutset() { + var value = border_outset.join(' '); + preview.style.borderImageOutset = border_outset.join(' '); + setOutputCSS('outset', value); + }; + + var setBorderRepeat = function setBorderRepeat(obj) { + border_repeat[obj.value] = obj.name; + var value = border_repeat.join(' '); + preview.style.borderImageRepeat = value; + setOutputCSS('repeat', value); + }; + + var setOutputCSS = function setOutputCSS(topic, value) { + CSS_code[topic].textContent = value + ';'; + }; + + var setPreviewFontSize = function setPreviewFontSize(value) { + preview.style.fontSize = value + 'px'; + }; + + var setPreviewWidth = function setPreviewWidth(value) { + preview.style.width = value + 'px'; + }; + + var setPreviewHeight = function setPreviewHeight(value) { + preview.style.height = value + 'px'; + }; + + var setPreviewAreaHeight = function setPreviewAreaHeight(value) { + preview_area.style.height = value + 'px'; + }; + + var updateDragOption = function updateDragOption(value) { + if (value === true) + subject.setAttribute('data-draggable', 'true'); + else + subject.removeAttribute('data-draggable'); + }; + + var createProperty = function createProperty(topic, labelID, optionsID) { + + var slider = InputSliderManager.createSlider(topic, positions[labelID]); + var dropdown = DropDownManager.createDropDown(topic, dropdown_unit_options[optionsID]); + + InputSliderManager.setSensitivity(topic, 3); + InputSliderManager.setPrecision(topic, 1); + + var property = document.createElement('div'); + var config = document.createElement('div'); + + property.className = 'property'; + config.className = 'config'; + config.setAttribute('data-topic', topic); + config.addEventListener('click', UnitPanel.show); + + property.appendChild(slider); + property.appendChild(dropdown); + property.appendChild(config); + + return property; + }; + + var initBorderSliceControls = function initBorderSliceControls() { + var container = getElemById('border-slice-control'); + + var listenForChanges = function listenForChanges(topic, id) { + InputSliderManager.subscribe(topic, function(value) { + border_slice_values[id] = value; + border_slice[id] = value + border_slice_units[id]; + updateBorderSlice(); + }); + + DropDownManager.subscribe(topic, function(obj) { + guidelines[topic].setUnit(obj.value); + border_slice_units[id] = obj.value; + border_slice[id] = border_slice_values[id] + obj.value; + updateBorderSlice(); + }); + }; + + for (var i = 0; i < positions.length; i++) { + var topic = 'slice-' + positions[i]; + var property = createProperty(topic, i, 0); + listenForChanges(topic, i); + + container.appendChild(property); + } + + container.appendChild(container.children[1]); + + }; + + var initBorderWidthControls = function initBorderWidthControls() { + var container = getElemById('border-width-control'); + + var listenForChanges = function listenForChanges(topic, id) { + InputSliderManager.subscribe(topic, function(value) { + border_width_values[id] = value; + border_width[id] = value + border_width_units[id]; + updateBorderWidth(); + }); + + DropDownManager.subscribe(topic, function(obj) { + if (obj.value === '%') + InputSliderManager.setMax(topic, 100); + else + InputSliderManager.setMax(topic, 1000); + + border_width_units[id] = obj.value; + border_width[id] = border_width_values[id] + obj.value; + updateBorderWidth(); + }); + }; + + for (var i = 0; i < positions.length; i++) { + var topic = 'width-' + positions[i]; + var property = createProperty(topic, i, 1); + InputSliderManager.setMax(topic, 1000); + listenForChanges(topic, i); + + container.appendChild(property); + } + }; + + var initBorderOutsetControls = function initBorderOutsetControls() { + + var container = getElemById('border-outset-control'); + + var listenForChanges = function listenForChanges(topic, id) { + InputSliderManager.subscribe(topic, function(value) { + border_outset_values[id] = value; + border_outset[id] = value + border_outset_units[id]; + updateBorderOutset(); + }); + + DropDownManager.subscribe(topic, function(obj) { + border_outset_units[id] = obj.value; + border_outset[id] = border_outset_values[id] + obj.value; + updateBorderOutset(); + }); + }; + + for (var i = 0; i < positions.length; i++) { + var topic = 'outset-' + positions[i]; + var property = createProperty(topic, i, 2); + InputSliderManager.setMax(topic, 1000); + listenForChanges(topic, i); + + container.appendChild(property); + } + }; + + var init = function init() { + + var gallery = + subject = getElemById('subject'); + preview = getElemById("preview"); + preview_area = getElemById("preview_section"); + + CSS_code['source'] = getElemById("out-border-source"); + CSS_code['slice'] = getElemById("out-border-slice"); + CSS_code['width'] = getElemById("out-border-width"); + CSS_code['outset'] = getElemById("out-border-outset"); + CSS_code['repeat'] = getElemById("out-border-repeat"); + + initBorderSliceControls(); + initBorderWidthControls(); + initBorderOutsetControls(); + + var elem = document.querySelectorAll('.guideline'); + var size = elem.length; + for (var i = 0; i < size; i++) + new GuideLine(elem[i]); + + PreviewControl.init(); + + ButtonManager.subscribe('slice-fill',setBorderFill); + ButtonManager.subscribe('drag-subject', updateDragOption); + ButtonManager.setValue('drag-subject', false); + + DropDownManager.subscribe('image-repeat-X', setBorderRepeat); + DropDownManager.subscribe('image-repeat-Y', setBorderRepeat); + + InputSliderManager.subscribe('preview-area-height', setPreviewAreaHeight); + InputSliderManager.subscribe('preview-width', setPreviewWidth); + InputSliderManager.subscribe('preview-height', setPreviewHeight); + InputSliderManager.subscribe('font-size', setPreviewFontSize); + InputSliderManager.setValue('preview-width', 300); + InputSliderManager.setValue('preview-height', 200); + }; + + return { + init: init, + setOutputCSS: setOutputCSS, + setBorderSlice: setBorderSlice + }; + + })(); + + /** + * Init Tool + */ + var init = function init() { + InputSliderManager.init(); + DropDownManager.init(); + ButtonManager.init(); + UnitPanel.init(); + Tool.init(); + ImageControl.init(); + }; + + return { + init : init + }; + +})(); diff --git a/tools/border-image-generator/styles.css b/tools/border-image-generator/styles.css new file mode 100644 index 00000000..b9b2f233 --- /dev/null +++ b/tools/border-image-generator/styles.css @@ -0,0 +1,1047 @@ +/* GRID OF TWELVE + * ========================================================================== */ + +.span_12 { + width: 100%; +} + +.span_11 { + width: 91.46%; +} + +.span_10 { + width: 83%; +} + +.span_9 { + width: 74.54%; +} + +.span_8 { + width: 66.08%; +} + +.span_7 { + width: 57.62%; +} + +.span_6 { + width: 49.16%; +} + +.span_5 { + width: 40.7%; +} + +.span_4 { + width: 32.24%; +} + +.span_3 { + width: 23.78%; +} + +.span_2 { + width: 15.32%; +} + +.span_1 { + width: 6.86%; +} + +/* SECTIONS + * ========================================================================== */ + +.section { + clear: both; + padding: 0px; + margin: 0px; +} + +/* GROUPING + * ========================================================================== */ + +.group:before, .group:after { + content: ""; + display: table; +} + +.group:after { + clear:both; +} + +.group { + zoom: 1; /* For IE 6/7 (trigger hasLayout) */ +} + +/* GRID COLUMN SETUP + * ========================================================================== */ + +.col { + display: block; + float:left; + margin: 1% 0 1% 1.6%; +} + +.col:first-child { + margin-left: 0; +} /* all browsers except IE6 and lower */ + +/* + * UI Component + */ + +.ui-input-slider { + height: 20px; + font-family: "Segoe UI", Arial, Helvetica, sans-serif; + -moz-user-select: none; + user-select: none; +} + +.ui-input-slider * { + float: left; + height: 100%; + line-height: 100%; +} + +/* Input Slider */ + +.ui-input-slider > input { + margin: 0; + padding: 0; + width: 50px; + text-align: center; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +.ui-input-slider-info { + width: 90px; + padding: 0px 10px 0px 0px; + text-align: right; + text-transform: lowercase; +} + +.ui-input-slider-left, .ui-input-slider-right { + width: 16px; + cursor: pointer; + background: url("arrows.png") center left no-repeat; +} + +.ui-input-slider-right { + background: url("arrows.png") center right no-repeat; +} + +.ui-input-slider-name { + width: 90px; + padding: 0 10px 0 0; + text-align: right; + text-transform: lowercase; +} + +.ui-input-slider-btn-set { + width: 25px; + background-color: #2C9FC9; + border-radius: 5px; + color: #FFF; + font-weight: bold; + line-height: 14px; + text-align: center; +} + +.ui-input-slider-btn-set:hover { + background-color: #379B4A; + cursor: pointer; +} + +/*************************************************************************************/ +/*************************************************************************************/ + +/* + * UI DropDown + */ + +/* Dropdown */ + +.ui-dropdown { + height: 2em; + width: 120px; + font-family: "Segoe UI", Arial, Helvetica, sans-serif; + font-size: 12px; + + background-image: url("drop_arrow_icon.png"); + background-position: right center; + background-repeat: no-repeat; + background-color: #359740; + + position: relative; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.ui-dropdown:hover { + cursor: pointer; + background-color: #208B20; +} + +/* Dropdown Select Button */ + +.ui-dropdown-select { + height: inherit; + padding: 0 0.75em; + color: #FFF; + line-height: 2em; +} + +/* Dropdown List */ + +.ui-dropdown-list { + width: 100%; + height: 150px; + max-height: 150px; + margin: 0; + padding: 0 0.3em; + + border: 3px solid #3490D2; + border-color: #208B20; + background: #666; + background-color: #EEF1F5; + color: #000; + + position: absolute; + top: 2em; + left: 0; + z-index: 100; + + overflow: hidden; + transition: all 0.3s; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +.ui-dropdown-list:hover { + overflow: auto; +} + +.ui-dropdown-list[data-hidden='true'] { + height: 0 !important; + opacity: 0; + visibility: hidden; +} + +.ui-dropdown[data-position='left'] .ui-dropdown-list { + left: -100%; + top: 0; +} + +.ui-dropdown[data-position='right'] .ui-dropdown-list { + left: 100%; + top: 0; +} + +.ui-dropdown-list > div { + width: 100%; + height: 1.6em; + margin: 0.3em 0; + padding: 0.3em; + line-height: 1em; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +.ui-dropdown-list > div:hover { + background: #3490D2; + color:#FFF; + border-radius: 2px; + cursor: pointer; +} + +/*************************************************************************************/ +/*************************************************************************************/ + +/* + * UI Button + */ + +/* Checkbox */ + +.ui-checkbox { + text-align: center; + font-size: 16px; + font-family: "Segoe UI", Arial, Helvetica, sans-serif; + line-height: 1.5em; + color: #FFF; + + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.ui-checkbox > input { + display: none; +} + +.ui-checkbox > label { + font-size: 12px; + padding: 0.333em 1.666em 0.5em; + height: 1em; + line-height: 1em; + + background-color: #888; + background-image: url("disabled.png"); + background-position: center center; + background-repeat: no-repeat; + + color: #FFF; + border-radius: 2px; + font-weight: bold; + float: left; +} + +.ui-checkbox .text { + padding-left: 34px; + background-position: center left 10px; +} + +.ui-checkbox .left { + padding-right: 34px; + padding-left: 1.666em; + background-position: center right 10px; +} + +.ui-checkbox > label:hover { + cursor: pointer; +} + +.ui-checkbox > input:checked + label { + background-image: url("checked.png"); + background-color: #379B4A; +} + +/*************************************************************************************/ +/*************************************************************************************/ + +/* + * BORDER IMAGE GENERATOR TOOL + */ + +body { + width: 100%; + margin: 0 auto; + padding: 0 0 20px 0; + + font-family: "Segoe UI", Arial, Helvetica, sans-serif; + + /*background: url("grain.png");*/ + border: 1px solid #EEE; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; +} + +body[data-move='X'] { + cursor: w-resize !important; +} + +body[data-move='Y'] { + cursor: s-resize !important; +} + +#container { + width: 100%; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +[data-draggable='true']:hover { + cursor: move; +} + +[data-draggable='true']:hover > * { + cursor: default; +} + +/******************************************************************************/ +/******************************************************************************/ + +/* + * Border Image Picker + */ + +#gallery { + box-shadow: 0 0 3px 0 #BABABA; +} + +#image-gallery { + width: 600px; + height: 100px; + margin: 0 auto; + transition: margin 0.4s; +} + +#image-gallery .image { + height: 80px; + float: left; + margin: 10px; + opacity: 0.5; + background-color: #FFF; + box-shadow: 0px 0px 3px 1px #BABABA; +} + +#image-gallery .image[selected="true"] { + box-shadow: 0px 0px 3px 1px #3BBA52; + opacity: 1; +} + +#image-gallery .image:hover { + cursor: pointer; + box-shadow: 0px 0px 3px 1px #30ACE5; + opacity: 1; +} + +#image-gallery[data-collapsed='true'] { + margin-top: -100px; +} + +/* Load Menu */ + +#load-actions { + margin: 10px 0; +} + +#toggle-gallery { + width: 30px; + height: 25px; + margin: 10px; + color: #FFF; + + background-image: url('arrow-up-white.png'); + background-repeat: no-repeat; + background-position: top 4px center; + background-color: #888888 !important; + + border-radius: 2px; + float: left; +} + +#toggle-gallery:hover { + cursor: pointer; +} + +#toggle-gallery[data-action='show'] { + background-image: url('arrow-down-white.png'); + background-color: #888888 !important; +} + +#toggle-gallery[data-action='hide'] { + background-image: url('arrow-up-white.png'); +} + +.button { + width: 100px; + height: 25px; + margin: 10px; + color: #FFF; + text-align: center; + font-size: 12px; + line-height: 25px; + background-color: #379B4A; + border-radius: 2px; + float: left; +} + +.button:hover { + cursor: pointer; + background-color: #3380C4; +} + +#load-image { + float: left; +} + +#load-remote { + width: 30px; + background-image: url('arrow-right-white.png'); + background-repeat: no-repeat; + background-position: center center; +} + +#remote-url { + width: 200px; + height: 23px; + margin: 10px; + padding: 0 5px; + border: 1px solid #379B4A; + border-radius: 2px; + float: left; + + transition: width 0.5s; +} + +#remote-url:focus { + box-shadow: 0px 0px 3px -1px #379B4A; /*#68ACE8; */ + border-color: rgba(55, 155, 74, 0.5); + width: 450px; +} + +/* + * Visible Area + */ + +#preview_section { + position: relative; + min-height: 400px; +} + +/* Image Control */ + +#subject { + width: 300px; + height: 300px; + background-repeat: no-repeat; + background-size: 100%; + background-color: #FFF; + border: 1px solid #CCC; + + position: absolute; + z-index: 10; + top: 15%; + left: 10%; + + box-shadow: 0 0 3px 0 #BABABA; + transition-property: width, height; + transition-duration: 0.1s; +} + +#subject .guideline { + background-color: rgba(255, 255, 255, 0.7); + border: 1px solid rgba(0, 0, 0, 0.3); + position: absolute; +} + +#subject .guideline:hover { + background-color: #F00; +} + +#subject .guideline[data-active] { + background-color: #F00; + z-index: 10; +} + +#subject .guideline[data-axis='X'] { + width: 1px; + height: 100%; + top: -1px; +} + +#subject .guideline[data-axis='Y'] { + width: 100%; + height: 1px; + left: -1px; +} + +#subject .guideline[data-axis='X']:hover { + cursor: w-resize; +} + +#subject .guideline[data-axis='Y']:hover { + cursor: s-resize; +} + +#subject .relative { + position: relative; + font-size: 12px; +} + +#subject .tooltip, #subject .tooltip2 { + width: 40px; + height: 20px; + line-height: 20px; + font-size: 12px; + text-align: center; + + position: absolute; + opacity: 0.5; + transition: opacity 0.25s; +} + +#subject .tooltip { + background: #EEE; + border-radius: 2px; + border: 1px solid #CCC; +} + +#subject .tooltip2{ + color: #555; +} + +#subject [data-active] > * { + opacity: 1; +} + +#subject .tooltip[data-info='top'] { + top: -10px; + right: -50px; +} + +#subject .tooltip[data-info='right'] { + bottom: -30px; + right: -20px; +} + +#subject .tooltip[data-info='bottom'] { + top: -10px; + left: -50px; +} + +#subject .tooltip[data-info='left'] { + top: -30px; + right: -20px; +} + +#subject .tooltip2[data-info='top'] { + top: -10px; + left: -50px; +} + +#subject .tooltip2[data-info='right'] { + top: -30px; + right: -20px; +} + +#subject .tooltip2[data-info='bottom'] { + top: -10px; + right: -50px; +} + +#subject .tooltip2[data-info='left'] { + bottom: -30px; + right: -20px; +} + +/* Preview */ + +#preview { + width: 30%; + height: 50%; + background-color: #FFF; + text-align: center; + overflow: hidden; + position: absolute; + z-index: 10; + + left: 60%; + top: 15%; + + border-radius: 2px; + border-image-width: 20px; + border-image-repeat: round; + border-style: solid; + box-shadow: 0 0 3px 0 #BABABA; +} + +#preview .resize-handle { + width: 10px; + height: 10px; + background: url("resize.png") center center no-repeat; + position: absolute; + bottom: 0; + right: 0; +} + +#preview .resize-handle:hover { + cursor: nw-resize; +} + +/* + * General controls MENU + */ + +#general-controls { + padding: 10px 30px; + background-color: #FFF; + opacity: 0.95; + color: #888; + /*border-radius: 2px;*/ + box-shadow: 0 0 3px 0 #BABABA; +} + +#general-controls .property { + width: 130px; + float: left; +} + +#general-controls .name { + height: 20px; + margin: 0 10px 0 0; + line-height: 100%; + text-align: right; + float: left; +} + +#general-controls .right { + width: 200px; + float: right; +} + +#general-controls .ui-checkbox label { + height: 10px; +} + +#general-controls .separator { + height: 40px; + width: 1px; + margin: -10px 15px; + background-color: #EEE; + float: left; +} + +/* + * Controls + */ + +#controls { + color: #444; + margin: 10px 0 0 0; +} + +#controls .category { + height: 190px; + min-width: 260px; + margin: 10px; + padding: 10px; + border: 1px solid #CCC; + border-radius: 3px; + float: left; + + box-shadow: 0 0 3px 0 #BABABA; + transition: all 0.25s; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +@media (min-width: 880px) { + #controls .category { + width: 30%; + margin-left: 1.66%; + margin-right: 1.66%; + } +} + +@media (max-width: 879px) { + #controls .category { + width: 37%; + margin-left: 6.5%; + margin-right: 6.5%; + } +} + +#controls .category .title { + width: 100%; + height: 30px; + margin: 0 0 10px 0; + line-height: 25px; + + text-align: center; + color: #AAA; +} + +#controls .category:hover .title { + color: #777; +} + +#controls .category > .group { + border: 1px solid #CCC; + border-radius: 2px; +} + +/* property */ + +#controls .property { + width: 250px; + height: 20px; + margin: 5px auto; +} + +#controls .property .ui-input-slider { + margin: 0; + float: left; +} + +#controls .property .ui-input-slider-info { + width: 60px; +} + +#controls .property .ui-input-slider-left { + transition: opacity 0.15s; + opacity: 0; +} + +#controls .property .ui-input-slider-right { + transition: opacity 0.15s; + opacity: 0; +} + +#controls .property .name { + width: 60px; + height: 20px; + padding: 0px 10px 0px 0px; + text-align: right; + line-height: 100%; + float: left; +} + +#controls .property .config { + width: 20px; + height: 20px; + float: left; + background: url("config.png") center center no-repeat; + opacity: 0.5; +} + +#controls .property .config:hover { + cursor: pointer; + opacity: 1; +} + +#controls .ui-input-slider:hover .ui-input-slider-right { + opacity: 1; +} + +#controls .ui-input-slider:hover .ui-input-slider-left { + opacity: 1; +} + +#controls .property .ui-dropdown { + margin: 0 10px; + float: left; +} + +#controls .property .ui-checkbox { + margin: 0 0 0 16px; + float: left; +} + +#controls .property .ui-checkbox label { + height: 0.85em; + width: 10px; +} + +/* dropdowns */ +#controls .ui-dropdown { + width: 50px; + height: 1.7em; + border-radius: 2px; +} + +#controls .ui-dropdown-select { + line-height: 1.6em; +} + +#controls .ui-dropdown-list { + top: 20px; +} + +#controls .ui-dropdown-list { + border-width: 1px; + text-align: center; +} + +#controls .ui-dropdown-list:hover { + overflow: hidden; +} + +#controls .border-repeat { + margin: 0 0 0 16px !important; + width: 80px; +} + +#controls .border-repeat .ui-dropdown-list { + height: 6.2em; + border-width: 1px; + text-align: center; +} + +/* border-image-slice */ + +#border-slice-control .ui-dropdown-list { + height: 4.3em; +} + +/* border-image-width */ + +#border-width-control .ui-dropdown-list { + height: 6.2em; +} + +/* border-image-outset */ + +#border-outset-control .ui-dropdown-list { + height: 4.3em; +} + +#additional-properties .property { + width: 200px; +} + +#additional-properties .ui-input-slider > input { + width: 80px !important; +} + +/* unit settings panel */ + +#unit-settings { + padding: 10px; + position: absolute; + + background: #FFF; + + font-size: 12px; + border-radius: 3px; + border: 1px solid #CCC; + text-align: center; + color: #555; + + position: absolute; + z-index: 1000; + + box-shadow: 0 0 3px 0 #BABABA; + transition: all 0.25s; +} + +#unit-settings .title { + width: 100%; + margin: -5px auto 0; + + color: #666; + font-size: 14px; + font-weight: bold; + line-height: 25px; + border-bottom: 1px solid #E5E5E5; +} + +#unit-settings .ui-input-slider { + margin: 10px 0 0 0; +} + +#unit-settings .ui-input-slider-info { + width: 50px; + line-height: 1.5em; +} + +#unit-settings input { + font-size: 12px; + width: 40px !important; +} + +#unit-settings .close { + width: 16px; + height: 16px; + background: url('close.png') no-repeat center center; + background-size: 75%; + + position: absolute; + top: 4px; + right: 4px; + opacity: 0.5; +} + +#unit-settings .close:hover { + cursor: pointer; + opacity: 1; +} + +#unit-settings[data-active='true'] { + opacity: 1; +} + +#unit-settings[data-active='false'] { + opacity: 0; + top: -100px !important; +} + +/* + * CSS Output Code + */ + +#output { + padding: 10px; + border: 2px dashed #888 !important; + box-shadow: none !important; + border-radius: 3px; + overflow: hidden; + + -moz-user-select: text; + -webkit-user-select: text; + -ms-user-select: text; + user-select: text; +} + +@media (min-width: 880px) { + #output { + width: 63.33% !important; + } +} + +@media (max-width: 879px) { + #output { + width: 87% !important; + } +} + +#output .title { + width: 100%; + height: 30px; + margin: 0 0 10px 0; + line-height: 25px; + + text-align: center; + color: #AAA; +} + +#output .css-property { + width: 100%; + margin: 0; + color: #555; + font-size: 14px; + line-height: 18px; + float: left; +} + +#output .css-property .name { + width: 30%; + font-weight: bold; + text-align: right; + float: left; +} + +#output .css-property .value { + width: 65%; + padding: 0 2.5%; + word-break: break-all; + float: left; +} From 382a70d2477e4d123260523a953cf53ae6bb9f61 Mon Sep 17 00:00:00 2001 From: Will Bamberg Date: Wed, 11 Aug 2021 11:16:26 -0700 Subject: [PATCH 007/188] Add the other CSS tools --- README.md | 2 + tools/border-image-generator/index.html | 2 +- tools/border-radius-generator/arrows.png | Bin 0 -> 372 bytes tools/border-radius-generator/checked.png | Bin 0 -> 275 bytes tools/border-radius-generator/disabled.png | Bin 0 -> 344 bytes tools/border-radius-generator/dropdown.png | Bin 0 -> 330 bytes tools/border-radius-generator/index.html | 103 + .../border-radius-generator/resize-handle.png | Bin 0 -> 239 bytes tools/border-radius-generator/script.js | 769 ++++++ tools/border-radius-generator/styles.css | 701 ++++++ tools/box-shadow-generator/add-black.png | Bin 0 -> 140 bytes tools/box-shadow-generator/add-white.png | Bin 0 -> 150 bytes tools/box-shadow-generator/alpha.png | Bin 0 -> 105 bytes tools/box-shadow-generator/alpha_mask.png | Bin 0 -> 1186 bytes tools/box-shadow-generator/checked.png | Bin 0 -> 275 bytes tools/box-shadow-generator/delete-white.png | Bin 0 -> 182 bytes tools/box-shadow-generator/delete-yellow.png | Bin 0 -> 182 bytes tools/box-shadow-generator/disabled.png | Bin 0 -> 344 bytes tools/box-shadow-generator/down-black.png | Bin 0 -> 158 bytes tools/box-shadow-generator/down-white.png | Bin 0 -> 172 bytes tools/box-shadow-generator/hue.png | Bin 0 -> 610 bytes tools/box-shadow-generator/index.html | 214 ++ .../box-shadow-generator/picker_mask_200.png | Bin 0 -> 12816 bytes tools/box-shadow-generator/script.js | 1692 +++++++++++++ tools/box-shadow-generator/styles.css | 938 +++++++ tools/box-shadow-generator/up-black.png | Bin 0 -> 158 bytes tools/box-shadow-generator/up-white.png | Bin 0 -> 175 bytes tools/color-picker/alpha.png | Bin 0 -> 105 bytes tools/color-picker/alpha_mask.png | Bin 0 -> 1152 bytes tools/color-picker/arrow.png | Bin 0 -> 226 bytes tools/color-picker/arrows.png | Bin 0 -> 372 bytes tools/color-picker/canvas-controls.png | Bin 0 -> 384 bytes tools/color-picker/close.png | Bin 0 -> 372 bytes tools/color-picker/color-wheel.png | Bin 0 -> 1985 bytes tools/color-picker/copy.png | Bin 0 -> 2215 bytes tools/color-picker/drop.png | Bin 0 -> 226 bytes tools/color-picker/grain.png | Bin 0 -> 4716 bytes tools/color-picker/hue.png | Bin 0 -> 610 bytes tools/color-picker/index.html | 40 + tools/color-picker/lock.png | Bin 0 -> 1979 bytes tools/color-picker/pick.png | Bin 0 -> 288 bytes tools/color-picker/picker.png | Bin 0 -> 1659 bytes tools/color-picker/picker_mask_200.png | Bin 0 -> 12816 bytes tools/color-picker/resize.png | Bin 0 -> 158 bytes tools/color-picker/script.js | 2157 +++++++++++++++++ tools/color-picker/styles.css | 996 ++++++++ tools/color-picker/trash-can.png | Bin 0 -> 443 bytes tools/color-picker/void.png | Bin 0 -> 1707 bytes 48 files changed, 7613 insertions(+), 1 deletion(-) create mode 100644 tools/border-radius-generator/arrows.png create mode 100644 tools/border-radius-generator/checked.png create mode 100644 tools/border-radius-generator/disabled.png create mode 100644 tools/border-radius-generator/dropdown.png create mode 100644 tools/border-radius-generator/index.html create mode 100644 tools/border-radius-generator/resize-handle.png create mode 100644 tools/border-radius-generator/script.js create mode 100644 tools/border-radius-generator/styles.css create mode 100644 tools/box-shadow-generator/add-black.png create mode 100644 tools/box-shadow-generator/add-white.png create mode 100644 tools/box-shadow-generator/alpha.png create mode 100644 tools/box-shadow-generator/alpha_mask.png create mode 100644 tools/box-shadow-generator/checked.png create mode 100644 tools/box-shadow-generator/delete-white.png create mode 100644 tools/box-shadow-generator/delete-yellow.png create mode 100644 tools/box-shadow-generator/disabled.png create mode 100644 tools/box-shadow-generator/down-black.png create mode 100644 tools/box-shadow-generator/down-white.png create mode 100644 tools/box-shadow-generator/hue.png create mode 100644 tools/box-shadow-generator/index.html create mode 100644 tools/box-shadow-generator/picker_mask_200.png create mode 100644 tools/box-shadow-generator/script.js create mode 100644 tools/box-shadow-generator/styles.css create mode 100644 tools/box-shadow-generator/up-black.png create mode 100644 tools/box-shadow-generator/up-white.png create mode 100644 tools/color-picker/alpha.png create mode 100644 tools/color-picker/alpha_mask.png create mode 100644 tools/color-picker/arrow.png create mode 100644 tools/color-picker/arrows.png create mode 100644 tools/color-picker/canvas-controls.png create mode 100644 tools/color-picker/close.png create mode 100644 tools/color-picker/color-wheel.png create mode 100644 tools/color-picker/copy.png create mode 100644 tools/color-picker/drop.png create mode 100644 tools/color-picker/grain.png create mode 100644 tools/color-picker/hue.png create mode 100644 tools/color-picker/index.html create mode 100644 tools/color-picker/lock.png create mode 100644 tools/color-picker/pick.png create mode 100644 tools/color-picker/picker.png create mode 100644 tools/color-picker/picker_mask_200.png create mode 100644 tools/color-picker/resize.png create mode 100644 tools/color-picker/script.js create mode 100644 tools/color-picker/styles.css create mode 100644 tools/color-picker/trash-can.png create mode 100644 tools/color-picker/void.png diff --git a/README.md b/README.md index a691ed70..6c994e91 100644 --- a/README.md +++ b/README.md @@ -15,3 +15,5 @@ The "object-fit-basics" directory contains a simple page demonstrating typical u The "object-fit-gallery" directory contains a fun image gallery that uses object-fit to display the images more nicely, both in thumbnail and full size view. [Run the example live](http://mdn.github.io/css-examples/object-fit-gallery/). The "overscroll-behavior" directory contains a simple page demonstrating typical usage of different overscroll-behavior values. [Run example live](http://mdn.github.io/css-examples/overscroll-behavior/). + +The "tools" directory contains various tools for working with CSS, including a [color picker](http://mdn.github.io/css-examples/tools/color-picker/) and a [box shadow generator](http://mdn.github.io/css-examples/tools/box-shadow-generator/). diff --git a/tools/border-image-generator/index.html b/tools/border-image-generator/index.html index 65d3451e..5d7d2847 100644 --- a/tools/border-image-generator/index.html +++ b/tools/border-image-generator/index.html @@ -3,7 +3,7 @@ - Border image generator + Border-image generator diff --git a/tools/border-radius-generator/arrows.png b/tools/border-radius-generator/arrows.png new file mode 100644 index 0000000000000000000000000000000000000000..30d630fdaf96be7baa2d7da9de6cda337a5ab769 GIT binary patch literal 372 zcmeAS@N?(olHy`uVBq!ia0vp^3P3Et!3-oF?)7E^DVB6cUq=Rpjs4tz5?O(K#^NA% zCx&(BWL^R}2?0JKuI>ds_4V~NH8qbOJ*udvxOM9mko*7t|MvEFhhKoOt9UUD&Ms00v8)Hrk&@Q=>AirRS zE!#K+*|}KG9yrLmP57Xs2$RsoJ;%72xespTIeO{Vt&kF+$_`H##}JM4y%XKV4k&Q2 zn(h_9EPdzyG*2;>+e+*9ojcLoF0kMKPT{+x>GF@S1;5+=aYN;%$5Sthp7|JyUG&S<>H zX285rQkCrt`y+b?8K*wR;(y8q{1y0)q%j!tot^wYxvBI8+Y087ye0Nbh5BM=Z#T~1 zy~!Y|P{%a&55tjT0UyhBX7Mu^s#i(KI0SzYJA2-sKqAt36JwFXpAYtR1w0*g03~Ot$DHFw2y=Y!%A_>zh7n2 RWq@vF@O1TaS?83{1ON%TT}uD} literal 0 HcmV?d00001 diff --git a/tools/border-radius-generator/disabled.png b/tools/border-radius-generator/disabled.png new file mode 100644 index 0000000000000000000000000000000000000000..1dd2c4c20a188993d385c72d92c3520685039a03 GIT binary patch literal 344 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!63?wyl`GbKJOS+@4BLl<6e(pbstUx|vage(c z!@6@aFM*t>0G|+7_X3~)v;pxKV@?5Wku3@G3uX}I6T6icbmcf3`)6sn{PP!1f62Y^ zGd+WcSK!C>fVc0S0~Ho~x;TbNT<$&ZDb%3A!*ZabK|$-???3-%M=4jCZGRb})p=t5 zr(>-Tdg_bU9_$Kzb-yy~RMr;N#2vF;)i(7@aPWCMZY*fw)LOpAB2M5`*95mU0nbd5 z3f_qv5I7~a`0h5=3+JO&J}REEZvW-k>)!7^_P_cIll(&VU&sFcPykxb;OXk;vd$@? F2>=;FyV(E$ literal 0 HcmV?d00001 diff --git a/tools/border-radius-generator/dropdown.png b/tools/border-radius-generator/dropdown.png new file mode 100644 index 0000000000000000000000000000000000000000..eb1fb00dd695651cb5627b7baac8256e26aed140 GIT binary patch literal 330 zcmeAS@N?(olHy`uVBq!ia0vp^JRr=$1|-8uW1a&k&H|6fVg?31We{epSZZGe6qGD+ zjVKAuPb(=;EJ|f?Ovz75Rq)JBOiv9;O-!jQJeg_(RCL|b#WAGfR_{fBt|kW&wt{pq zLC1EF4bm)eE9{>MM!j&eaTeIILV8Ewo!x~mz1(BBNo6R%SZBAEbK@B?`-(l^ZQEu} z^tn8R<*-52qIc(9-Y>ow|7WX%n~iwR?RhSNOTt38w#J6XUgzcg$~IGUlkv&IIhxO7 z&VQbBaO-M~F0oeB?`L1^A%f=d7Z literal 0 HcmV?d00001 diff --git a/tools/border-radius-generator/index.html b/tools/border-radius-generator/index.html new file mode 100644 index 00000000..90d87879 --- /dev/null +++ b/tools/border-radius-generator/index.html @@ -0,0 +1,103 @@ + + + + + + Border-radius generator + + + + + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    +
    +
    +
    +
    +
    + +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    rounded corner
    +
    +
    +
    +
    +
    + +
    +
    select border units
    +
    +
    +
    +
    + + + + + + diff --git a/tools/border-radius-generator/resize-handle.png b/tools/border-radius-generator/resize-handle.png new file mode 100644 index 0000000000000000000000000000000000000000..5d276da2390fad6cb6fc068bee946313393c7f5a GIT binary patch literal 239 zcmeAS@N?(olHy`uVBq!ia0vp^av;pa3?$v++zf#fOS+@4BLl<6e(pbstUx|vage(c z!@6@aFM%AM0G|-or%#`%s;X*eXt)>n-0|Kc1JYCyWt||9U+C%L7$R|b z>4c5E2NVRD_p*C0@jcEmQza~o--chUb3nC^6ff{=QsKfKeo{~ zI@U17C^GwC?c|)_Y|a@I4BI49eB{y$oNxBbTvqMV!gJ!Zh|bf`*Iz795?LjswQQBv gdP}JlC+`c#P1}DYQ{9T=5zul5Pgg&ebxsLQ0K2MCx&QzG literal 0 HcmV?d00001 diff --git a/tools/border-radius-generator/script.js b/tools/border-radius-generator/script.js new file mode 100644 index 00000000..a8d73b0f --- /dev/null +++ b/tools/border-radius-generator/script.js @@ -0,0 +1,769 @@ +'use strict'; + +/** + * UI-InputSliderManager + */ + +var InputSliderManager = (function InputSliderManager() { + + var subscribers = {}; + var sliders = []; + + var InputComponent = function InputComponent(obj) { + var input = document.createElement('input'); + input.setAttribute('type', 'text'); + + input.addEventListener('click', function(e) { + this.select(); + }); + + input.addEventListener('change', function(e) { + var value = parseInt(e.target.value); + + if (isNaN(value) === true) + setValue(obj.topic, obj.value); + else + setValue(obj.topic, value); + }); + + subscribe(obj.topic, function(value) { + input.value = value + obj.unit; + }); + + return input; + } + + var SliderComponent = function SliderComponent(obj, sign) { + var slider = document.createElement('div'); + var startX = null; + var start_value = 0; + + slider.addEventListener("click", function(e) { + setValue(obj.topic, obj.value + obj.step * sign); + }); + + slider.addEventListener("mousedown", function(e) { + startX = e.clientX; + start_value = obj.value; + document.body.style.cursor = "e-resize"; + document.addEventListener("mousemove", sliderMotion); + }); + + document.addEventListener("mouseup", function(e) { + document.removeEventListener("mousemove", sliderMotion); + document.body.style.cursor = "auto"; + slider.style.cursor = "pointer"; + }); + + var sliderMotion = function sliderMotion(e) { + slider.style.cursor = "e-resize"; + var delta = (e.clientX - startX) / obj.sensitivity | 0; + var value = delta * obj.step + start_value; + setValue(obj.topic, value); + } + + return slider; + } + + var InputSlider = function(node) { + var min = node.getAttribute('data-min') | 0; + var max = node.getAttribute('data-max') | 0; + var step = node.getAttribute('data-step') | 0; + var value = node.getAttribute('data-value') | 0; + var topic = node.getAttribute('data-topic'); + var unit = node.getAttribute('data-unit'); + var name = node.getAttribute('data-info'); + var sensitivity = node.getAttribute('data-sensitivity') | 0; + + this.min = min; + this.max = max > 0 ? max : 100; + this.step = step === 0 ? 1 : step; + this.topic = topic; + this.node = node; + this.unit = unit; + this.sensitivity = sensitivity > 0 ? sensitivity : 5; + + var input = new InputComponent(this); + var slider_left = new SliderComponent(this, -1); + var slider_right = new SliderComponent(this, 1); + + slider_left.className = 'ui-input-slider-left'; + slider_right.className = 'ui-input-slider-right'; + + if (name) { + var info = document.createElement('span'); + info.className = 'ui-input-slider-info'; + info.textContent = name; + node.appendChild(info); + } + + node.appendChild(slider_left); + node.appendChild(input); + node.appendChild(slider_right); + node.className = 'ui-input-slider ui-input-slider-container'; + + this.input = input; + sliders[topic] = this; + setValue(topic, value); + } + + var setValue = function setValue(topic, value, send_notify) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + if (value > slider.max) value = slider.max; + if (value < slider.min) value = slider.min; + + slider.value = value; + slider.node.setAttribute('data-value', value); + + if (send_notify !== undefined && send_notify === false) { + slider.input.value = value + slider.unit; + return; + } + + notify.call(slider); + } + + var setMax = function setMax(topic, value) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + slider.max = value; + setValue(topic, slider.value); + } + + var setMin = function setMin(topic, value) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + slider.min = value; + setValue(topic, slider.value); + } + + var setUnit = function setUnit(topic, unit) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + slider.unit = unit; + setValue(topic, slider.value); + } + + var getNode = function getNode(topic) { + return sliders[topic].node; + } + + var subscribe = function subscribe(topic, callback) { + if (subscribers[topic] === undefined) + subscribers[topic] = []; + subscribers[topic].push(callback); + } + + var unsubscribe = function unsubscribe(topic, callback) { + subscribers[topic].indexOf(callback); + subscribers[topic].splice(index, 1); + } + + var notify = function notify() { + for (var i in subscribers[this.topic]) { + subscribers[this.topic][i](this.value); + } + } + + var init = function init() { + var elem = document.querySelectorAll('.ui-input-slider'); + var size = elem.length; + for (var i = 0; i < size; i++) + new InputSlider(elem[i]); + } + + return { + init : init, + setMax : setMax, + setMin : setMin, + setUnit : setUnit, + getNode : getNode, + setValue : setValue, + subscribe : subscribe, + unsubscribe : unsubscribe + } + +})(); + +/** + * UI-ButtonManager + */ + +var ButtonManager = (function CheckBoxManager() { + + var subscribers = []; + var buttons = []; + + var CheckBox = function CheckBox(node) { + var topic = node.getAttribute('data-topic'); + var state = node.getAttribute('data-state'); + var name = node.getAttribute('data-label'); + var align = node.getAttribute('data-text-on'); + + state = (state === "true"); + + var checkbox = document.createElement("input"); + var label = document.createElement("label"); + + var id = 'checkbox-' + topic; + checkbox.id = id; + checkbox.setAttribute('type', 'checkbox'); + checkbox.checked = state; + + label.setAttribute('for', id); + if (name) { + label.className = 'text'; + if (align) + label.className += ' ' + align; + label.textContent = name; + } + + node.appendChild(checkbox); + node.appendChild(label); + + this.node = node; + this.topic = topic; + this.checkbox = checkbox; + + checkbox.addEventListener('change', function(e) { + notify.call(this); + }.bind(this)); + + buttons[topic] = this; + } + + var getNode = function getNode(topic) { + return buttons[topic].node; + } + + var setValue = function setValue(topic, value) { + try { + buttons[topic].checkbox.checked = value; + } + catch(error) { + console.log(error); + } + } + + var subscribe = function subscribe(topic, callback) { + if (subscribers[topic] === undefined) + subscribers[topic] = []; + + subscribers[topic].push(callback); + } + + var unsubscribe = function unsubscribe(topic, callback) { + subscribers[topic].indexOf(callback); + subscribers[topic].splice(index, 1); + } + + var notify = function notify() { + for (var i = 0; i < subscribers[this.topic].length; i++) + subscribers[this.topic][i](this.checkbox.checked); + } + + var init = function init() { + var elem = document.querySelectorAll('.ui-checkbox'); + var size = elem.length; + for (var i = 0; i < size; i++) + new CheckBox(elem[i]); + } + + return { + init : init, + setValue : setValue, + subscribe : subscribe, + unsubscribe : unsubscribe + } + +})(); + +window.addEventListener("load", function() { + BorderRadius.init(); +}); + +var BorderRadius = (function BorderRadius() { + + function getElemById(id) { + return document.getElementById(id); + } + + /** + * Shadow dragging + */ + var PreviewMouseTracking = (function Drag() { + var active = false; + var lastX = 0; + var lastY = 0; + var subscribers = []; + + var init = function init(id) { + var elem = getElemById(id); + elem.addEventListener('mousedown', dragStart, false); + document.addEventListener('mouseup', dragEnd, false); + } + + var dragStart = function dragStart(e) { + if (e.button !== 0) + return; + + active = true; + lastX = e.clientX; + lastY = e.clientY; + document.addEventListener('mousemove', mouseDrag, false); + } + + var dragEnd = function dragEnd(e) { + if (e.button !== 0) + return; + + if (active === true) { + active = false; + document.removeEventListener('mousemove', mouseDrag, false); + } + } + + var mouseDrag = function mouseDrag(e) { + notify(e.clientX - lastX, e.clientY - lastY); + lastX = e.clientX; + lastY = e.clientY; + } + + var subscribe = function subscribe(callback) { + subscribers.push(callback); + } + + var unsubscribe = function unsubscribe(callback) { + var index = subscribers.indexOf(callback); + subscribers.splice(index, 1); + } + + var notify = function notify(deltaX, deltaY) { + for (var i in subscribers) + subscribers[i](deltaX, deltaY); + } + + return { + init : init, + subscribe : subscribe, + unsubscribe : unsubscribe + } + + })(); + + var subject; + var units = ['px', '%']; + var output = null; + + var UnitSelector = function UnitSelector(topic) { + + this.container = document.createElement("div"); + this.select = document.createElement("select"); + for (var i in units) { + var option = document.createElement("option"); + option.value = i; + option.textContent = units[i]; + this.select.appendChild(option); + } + + this.container.className = 'dropdown ' + 'unit-' + topic; + this.container.appendChild(this.select); + } + + UnitSelector.prototype.setValue = function setValue(value) { + this.select.value = value; + } + + var RadiusContainer = function RadiusContainer(node) { + var radius = document.createElement('div'); + var handle = document.createElement('div'); + var x = node.getAttribute('data-x'); + var y = node.getAttribute('data-y'); + var active = false; + + this.id = node.id; + this.node = node; + this.radius = radius; + this.handle = handle; + this.width = 100; + this.height = 50; + this.size = 0; + this.rounded = false; + + this.unitX = 0; + this.unitY = 0; + this.unitR = 0; + + this.maxW = 100; + this.maxH = 100; + this.maxR = 100; + + this.topic = y + '-' + x; + + var sliderW = InputSliderManager.getNode(this.topic + '-w'); + var sliderH = InputSliderManager.getNode(this.topic + '-h'); + var sliderR = InputSliderManager.getNode(this.topic); + + this.setUnitX(this.unitX); + this.setUnitY(this.unitY); + this.setUnitR(this.unitR); + + this.updateWidth(); + this.updateHeight(); + this.updateRadius(); + + if (x === 'left') this.resizeX = 1; + if (x === 'right') this.resizeX = -1; + if (y === 'top') this.resizeY = 1; + if (y === 'bottom') this.resizeY = -1; + + radius.className = 'radius'; + + var unit_selector = document.getElementById("unit-selection"); + var unitW = new UnitSelector(this.topic + '-w'); + var unitH = new UnitSelector(this.topic + '-h'); + var unitR = new UnitSelector(this.topic); + + unit_selector.appendChild(unitW.container); + unit_selector.appendChild(unitH.container); + unit_selector.appendChild(unitR.container); + node.appendChild(radius); + subject.appendChild(handle); + + unitW.select.addEventListener('change', function(e) { + this.setUnitX(e.target.value | 0); + }.bind(this)); + + unitH.select.addEventListener('change', function(e) { + this.setUnitY(e.target.value | 0); + }.bind(this)); + + unitR.select.addEventListener('change', function(e) { + this.setUnitR(e.target.value | 0); + }.bind(this)); + + if (x === 'left' && y == 'top') handle.className = 'handle handle-top-left' + if (x === 'right' && y == 'top') handle.className = 'handle handle-top-right'; + if (x === 'right' && y == 'bottom') handle.className = 'handle handle-bottom-right'; + if (x === 'left' && y == 'bottom') handle.className = 'handle handle-bottom-left'; + + handle.addEventListener("mousedown", function(e) { + active = true; + this.radius.style.display = 'block'; + PreviewMouseTracking.subscribe(this.updateContainer.bind(this)); + }.bind(this)); + + document.addEventListener("mouseup", function(e) { + this.radius.style.display = 'none'; + if (active === true) + PreviewMouseTracking.unsubscribe(this.updateContainer.bind(this)); + }.bind(this)); + + InputSliderManager.subscribe(this.topic + '-w', this.setWidth.bind(this)); + InputSliderManager.subscribe(this.topic + '-h', this.setHeight.bind(this)); + InputSliderManager.subscribe(this.topic, this.setRadius.bind(this)); + + ButtonManager.subscribe(this.topic, function(value) { + this.rounded = value; + if (value === true) { + unitW.container.style.display = 'none'; + unitH.container.style.display = 'none'; + unitR.container.style.display = 'block'; + sliderW.style.display = 'none'; + sliderH.style.display = 'none'; + sliderR.style.display = 'block'; + this.setUnitR(this.unitR); + this.updateRadius(); + } + + if (value === false) { + unitW.container.style.display = 'block'; + unitH.container.style.display = 'block'; + unitR.container.style.display = 'none'; + sliderW.style.display = 'block'; + sliderH.style.display = 'block'; + sliderR.style.display = 'none'; + this.setUnitX(this.unitX); + this.setUnitY(this.unitY); + this.updateWidth(); + this.updateHeight(); + } + + this.updateBorderRadius(); + + }.bind(this)); + + this.updateBorderRadius(); + } + + RadiusContainer.prototype.updateWidth = function updateWidth() { + this.node.style.width = this.width + units[this.unitX]; + var value = Math.round(this.width / 2); + InputSliderManager.setValue(this.topic + '-w', value, false); + } + + RadiusContainer.prototype.updateHeight = function updateHeight() { + this.node.style.height = this.height + units[this.unitY]; + var value = Math.round(this.height / 2); + InputSliderManager.setValue(this.topic + '-h', value, false); + } + + RadiusContainer.prototype.updateRadius = function updateRadius() { + var value = Math.round(this.size / 2); + this.node.style.width = this.size + units[this.unitR]; + this.node.style.height = this.size + units[this.unitR]; + InputSliderManager.setValue(this.topic, value, false); + } + + RadiusContainer.prototype.setWidth = function setWidth(value) { + this.radius.style.display = 'block'; + this.width = 2 * value; + this.node.style.width = this.width + units[this.unitX]; + this.updateBorderRadius(); + } + + RadiusContainer.prototype.setHeight = function setHeight(value) { + this.radius.style.display = 'block'; + this.height = 2 * value; + this.node.style.height = this.height + units[this.unitY]; + this.updateBorderRadius(); + } + + RadiusContainer.prototype.setRadius = function setRadius(value) { + this.radius.style.display = 'block'; + this.size = 2 * value; + this.node.style.width = this.size + units[this.unitR]; + this.node.style.height = this.size + units[this.unitR]; + this.updateBorderRadius(); + } + + RadiusContainer.prototype.setUnitX = function setUnitX(value) { + this.unitX = value; + if (this.unitX === 0) this.maxW = 2 * subject.clientWidth; + if (this.unitX === 1) this.maxW = 200; + InputSliderManager.setUnit(this.topic + '-w', units[this.unitX]); + InputSliderManager.setMax(this.topic + '-w', this.maxW / 2); + } + + RadiusContainer.prototype.setUnitY = function setUnitY(value) { + this.unitY = value; + if (this.unitY === 0) this.maxH = 2 * subject.clientHeight; + if (this.unitY === 1) this.maxH = 200; + InputSliderManager.setUnit(this.topic + '-h', units[this.unitY]); + InputSliderManager.setMax(this.topic + '-h', this.maxH / 2); + } + + RadiusContainer.prototype.setUnitR = function setUnitR(value) { + this.unitR = value; + + if (this.unitR === 0) + this.maxR = 2 * Math.min(subject.clientHeight , subject.clientWidth); + + if (this.unitR === 1) + this.maxR = 200; + + InputSliderManager.setUnit(this.topic, units[this.unitR]); + InputSliderManager.setMax(this.topic, this.maxR / 2); + } + + RadiusContainer.prototype.updateUnits = function updateUnits(unit) { + if (this.rounded) { + this.setUnitR(this.unitR); + return; + } + + if (unit === 0) + this.setUnitX(this.unitX); + + if (unit === 1) + this.setUnitY(this.unitY); + } + + RadiusContainer.prototype.composeBorderRadius = function composeBorderRadius () { + + if (this.rounded === true) { + var unit = units[this.unitR]; + var value = Math.round(this.size / 2); + return value + unit; + } + + var unitX = units[this.unitX]; + var unitY = units[this.unitY]; + var valueX = Math.round(this.width / 2); + var valueY = Math.round(this.height / 2); + + if (valueX === valueY && this.unitX === this.unitY) + return valueX + unitX; + + return valueX + unitX + ' ' + valueY + unitY; + } + + RadiusContainer.prototype.updateBorderRadius = function updateBorderRadius () { + var radius = this.composeBorderRadius(); + var corner = 0; + + if (this.topic === 'top-left') { + subject.style.borderTopLeftRadius = radius; + corner = 0; + } + + if (this.topic === 'top-right') { + subject.style.borderTopRightRadius = radius; + corner = 1; + } + + if (this.topic === 'bottom-right') { + subject.style.borderBottomRightRadius = radius; + corner = 2; + } + + if (this.topic === 'bottom-left') { + subject.style.borderBottomLeftRadius = radius; + corner = 3; + } + + Tool.updateOutput(corner, radius); + } + + RadiusContainer.prototype.updateContainer = function updateContainer(deltaX, deltaY) { + + if (this.rounded === true) { + this.size += this.resizeX * deltaX + this.resizeY * deltaY; + if (this.size < 0) this.size = 0; + if (this.size > this.maxR) this.size = this.maxR; + this.updateRadius(); + this.updateBorderRadius(); + return; + } + + if (deltaX) { + this.width += this.resizeX * deltaX; + if (this.width < 0) this.width = 0; + if (this.width > this.maxW) this.width = this.maxW; + this.updateWidth(); + } + + if (deltaY) { + this.height += this.resizeY * deltaY; + if (this.height < 0) this.height = 0; + if (this.height > this.maxH) this.height = this.maxH; + this.updateHeight(); + } + + if (deltaX || deltaY) + this.updateBorderRadius(); + } + + /** + * Tool Manager + */ + var Tool = (function Tool() { + var preview; + var preview_ui; + var radius_containers = []; + var border_width = 3; + var borders1 = [null, null, null, null]; + var borders2 = [0, 0, 0, 0]; + + var updateUIWidth = function updateUIWidth(value) { + var pwidth = subject.parentElement.clientWidth; + var left = (pwidth - value) / 2; + subject.style.width = value + "px"; + + for (var i = 0; i < 4; i++) + radius_containers[i].updateUnits(0); + } + + var updateUIHeight = function updateUIHeight(value) { + var pheight = subject.parentElement.clientHeight; + var top = (pheight - value) / 2; + subject.style.height = value + "px"; + subject.style.top = top - border_width + "px"; + + for (var i = 0; i < 4; i++) + radius_containers[i].updateUnits(1); + } + + var updatePreviewUIWidth = function updatePreviewUIWidth() { + var p = subject.parentElement.clientWidth; + var v = preview_ui.clientWidth; + console.log(p, v, (p - v ) / 2); + preview_ui.style.left = (p - v) / 2 + "px" ; + } + + var updatePreviewUIHeight = function updatePreviewUIHeight() { + var p = subject.parentElement.clientHeight; + var v = preview_ui.clientHeight; + console.log(p, v, (p - v ) / 2); + preview_ui.style.top = (p - v) / 2 + "px" ; + } + + var updateOutput = function updateOutput(corner, radius) { + var values = radius.split(" "); + + borders1[corner] = values[0]; + borders2[corner] = values[0]; + + if (values.length === 2) + borders2[corner] = values[1]; + + var border_1_value = borders1.join(" "); + var border_2_value = borders2.join(" "); + var border_radius = 'border-radius: ' + border_1_value; + + if (border_2_value !== border_1_value) + border_radius += ' / ' + border_2_value; + + border_radius += ';'; + output.textContent = border_radius; + } + + var init = function init() { + preview = getElemById("preview"); + subject = getElemById("subject"); + output = getElemById("output"); + preview_ui = getElemById("radius-ui-sliders"); + + var elem = document.querySelectorAll('.radius-container'); + var size = elem.length; + for (var i = 0; i < size; i++) + radius_containers[i] = new RadiusContainer(elem[i]); + + InputSliderManager.subscribe("width", updateUIWidth); + InputSliderManager.subscribe("height", updateUIHeight); + + InputSliderManager.setValue("width", subject.clientWidth); + InputSliderManager.setValue("height", subject.clientHeight); + } + + return { + init : init, + updateOutput : updateOutput + } + + })(); + + /** + * Init Tool + */ + var init = function init() { + ButtonManager.init(); + InputSliderManager.init(); + PreviewMouseTracking.init("preview"); + Tool.init(); + } + + return { + init : init + } + +})(); diff --git a/tools/border-radius-generator/styles.css b/tools/border-radius-generator/styles.css new file mode 100644 index 00000000..9bdb4228 --- /dev/null +++ b/tools/border-radius-generator/styles.css @@ -0,0 +1,701 @@ +/* GRID OF TEN + * ========================================================================== */ + +.span_12 { + width: 100%; +} + +.span_11 { + width: 91.46%; +} + +.span_10 { + width: 83%; +} + +.span_9 { + width: 74.54%; +} + +.span_8 { + width: 66.08%; +} + +.span_7 { + width: 57.62%; +} + +.span_6 { + width: 49.16%; +} + +.span_5 { + width: 40.7%; +} + +.span_4 { + width: 32.24%; +} + +.span_3 { + width: 23.78%; +} + +.span_2 { + width: 15.32%; +} + +.span_1 { + width: 6.86%; +} + +/* SECTIONS + * ========================================================================== */ + +.section { + clear: both; + padding: 0px; + margin: 0px; +} + +/* GROUPING + * ========================================================================== */ + +.group:before, .group:after { + content: ""; + display: table; +} + +.group:after { + clear:both; +} + +.group { + zoom: 1; /* For IE 6/7 (trigger hasLayout) */ +} + +/* GRID COLUMN SETUP + * ========================================================================== */ + +.col { + display: block; + float:left; + margin: 1% 0 1% 1.6%; +} + +.col:first-child { + margin-left: 0; +} /* all browsers except IE6 and lower */ + +/* + * UI Component + */ + +.ui-input-slider-container { + height: 20px; + margin: 10px 0; + font-family: "Segoe UI", Arial, Helvetica, sans-serif; + -moz-user-select: none; + user-select: none; +} + +.ui-input-slider-container * { + float: left; + height: 100%; + line-height: 100%; +} + +/* Input Slider */ + +.ui-input-slider > input { + margin: 0; + padding: 0; + width: 50px; + text-align: center; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +.ui-input-slider-info { + width: 90px; + padding: 0px 10px 0px 0px; + text-align: right; + text-transform: lowercase; +} + +.ui-input-slider-left, .ui-input-slider-right { + width: 16px; + cursor: pointer; + background: url("arrows.png") center left no-repeat; +} + +.ui-input-slider-right { + background: url("arrows.png") center right no-repeat; +} + +.ui-input-slider-name { + width: 90px; + padding: 0 10px 0 0; + text-align: right; + text-transform: lowercase; +} + +.ui-input-slider-btn-set { + width: 25px; + background-color: #2C9FC9; + border-radius: 5px; + color: #FFF; + font-weight: bold; + line-height: 14px; + text-align: center; +} + +.ui-input-slider-btn-set:hover { + background-color: #379B4A; + cursor: pointer; +} + +/* + * UI Component + */ + +/* Checkbox */ + +.ui-checkbox { + text-align: center; + font-size: 16px; + font-family: "Segoe UI", Arial, Helvetica, sans-serif; + line-height: 1.5em; + color: #FFF; + + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.ui-checkbox > input { + display: none; +} + +.ui-checkbox > label { + font-size: 12px; + padding: 0.333em 1.666em 0.5em; + height: 1em; + line-height: 1em; + + background-color: #888; + background-image: url("disabled.png"); + background-position: center center; + background-repeat: no-repeat; + + color: #FFF; + border-radius: 3px; + font-weight: bold; + float: left; +} + +.ui-checkbox .text { + padding-left: 34px; + background-position: center left 10px; +} + +.ui-checkbox .left { + padding-right: 34px; + padding-left: 1.666em; + background-position: center right 10px; +} + +.ui-checkbox > label:hover { + cursor: pointer; +} + +.ui-checkbox > input:checked + label { + background-image: url("checked.png"); + background-color: #379B4A; +} + +body { + max-width: 1000px; + margin: 0 auto; + + font-family: "Segoe UI", Arial, Helvetica, sans-serif; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; +} + +#container { + width: 100%; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +/******************************************************************************/ +/******************************************************************************/ +/* + * Preview Area + */ + +#preview { + height: 500px; + border: 1px solid #CCC; + border-radius: 3px; + text-align: center; + overflow: hidden; + position: relative; +} + +#preview .content { + width: 100%; + height: 100%; + display: block; +} + +#preview input { + color: #333; + border: 1px solid #CCC; + border-radius: 3px; +} + +#subject { + width: 400px; + height: 150px; + margin: 0 auto; + border: 3px solid #C60; + background: #FFF; + position: relative; +} + +.radius { + width: 50%; + height: 50%; + border: 1px solid #CCC; + display: none; + position: absolute; + z-index: 1; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +.handle { + width: 16px; + height: 16px; + position: absolute; + z-index: 2; +} + +.handle-top-left { + top: -12px; + left: -12px; + cursor: se-resize; + background: url("resize-handle.png") top left no-repeat; +} + +.handle-top-right { + top: -12px; + right: -12px; + cursor: sw-resize; + background: url("resize-handle.png") top right no-repeat; +} + +.handle-bottom-right { + bottom: -12px; + right: -12px; + cursor: nw-resize; + background: url("resize-handle.png") bottom right no-repeat; +} + +.handle-bottom-left { + bottom: -12px; + left: -12px; + cursor: ne-resize; + background: url("resize-handle.png") bottom left no-repeat; +} + +.radius-container { + position: absolute; + display : block; + z-index: 1; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +/* TOP LEFT */ +#top-left { + top: 0; + left: 0; +} + +#top-left .radius { + border-top-left-radius: 100%; + top: 0; + left: 0; +} + +/* TOP RIGHT */ +#top-right { + top: 0; + right: 0; +} + +#top-right .radius { + border-top-right-radius: 100%; + top: 0; + right: 0; +} + +/* BOTTOM RIGHT */ +#bottom-right { + bottom: 0; + right: 0; +} + +#bottom-right .radius { + border-bottom-right-radius: 100%; + bottom: 0; + right: 0; +} + +/* BOTTOM lEFT */ +#bottom-left { + bottom: 0; + left: 0; +} + +#bottom-left .radius { + border-bottom-left-radius: 100%; + bottom: 0; +} + +/* INPUT SLIDERS */ + +#preview .ui-input-slider { + margin: 10px; + position: absolute; + z-index: 10; +} + +#radius-ui-sliders { + width: 100%; + height: 100%; + min-height: 75px; + min-width: 150px; + padding: 20px 50px; + top: -20px; + left: -50px; + position: relative; +} + +#tlr { + top: -30px; + left: -50px; + display: none; +} + +#tlw { + top: -30px; + left: 30px; +} + +#tlh { + top: 20px; + left: -50px; +} + +#trr { + top: -30px; + right: -50px; + display: none; +} + +#trw { + top: -30px; + right: 30px; +} + +#trh { + top: 20px; + right: -50px; +} + +#brr { + bottom: -30px; + right: -50px; + display: none; +} + +#brw { + bottom: -30px; + right: 30px; +} + +#brh { + bottom: 20px; + right: -50px; +} + +#blr { + bottom: -30px; + left: -50px; + display: none; +} + +#blw { + bottom: -30px; + left: 30px; +} + +#blh { + bottom: 20px; + left: -50px; +} + +#preview .ui-input-slider-left, #preview .ui-input-slider-right { + visibility: hidden; +} + +#preview .ui-input-slider-container:hover .ui-input-slider-left { + visibility: visible; +} + +#preview .ui-input-slider-container:hover .ui-input-slider-right { + visibility: visible; +} + +/* + * + */ + +#unit-selection { + width: 200px; + height: 75px; + margin: 30px 30px 0 0; + padding: 30px; + border: 3px solid #555; + border-radius: 10px; + position: relative; + float: right; +} + +#unit-selection .info { + height: 20%; + width: 100%; + line-height: 20%; + font-size: 20px; + text-align: center; + position: relative; + top: 40%; +} + +#unit-selection .dropdown { + width: 50px; + height: 20px; + margin: 10px; + padding: 0; + border-radius: 3px; + position: absolute; + overflow: hidden; +} + +#unit-selection select { + width: 50px; + height: 20px; + margin: 0; + padding: 0 0 0 10px; + background: #555; + border: 1px solid #555; + border: none; + color: #FFF; + float: left; +} + +#unit-selection select option { + background: #FFF; + color: #333; +} + +#unit-selection select:hover { + cursor: pointer; +} + +#unit-selection .dropdown:before { + content: ""; + width: 18px; + height: 20px; + display: block; + background-color: #555; + background-image: url("dropdown.png"); + background-position: center center; + background-repeat: no-repeat; + top: 0px; + right: 0px; + position: absolute; + z-index: 1; + pointer-events: none; +} + +#unit-selection .unit-top-left { + top: 0; + left: 0; + display: none; +} + +#unit-selection .unit-top-left-w { + top: -22px; + left: 30px; +} + +#unit-selection .unit-top-left-h { + top: 20px; + left: -37px; +} + +#unit-selection .unit-top-right { + top: 0; + right: 0; + display: none; +} + +#unit-selection .unit-top-right-w { + top: -22px; + right: 30px; +} + +#unit-selection .unit-top-right-h { + top: 20px; + right: -37px; +} + +#unit-selection .unit-bottom-right { + bottom: 0; + right: 0; + display: none; +} + +#unit-selection .unit-bottom-right-w { + bottom: -22px; + right: 30px; +} + +#unit-selection .unit-bottom-right-h { + bottom: 20px; + right: -37px; +} + +#unit-selection .unit-bottom-left { + bottom: 0; + left: 0; + display: none; +} + +#unit-selection .unit-bottom-left-w { + bottom: -22px; + left: 30px; +} + +#unit-selection .unit-bottom-left-h { + bottom: 20px; + left: -37px; +} + +/******************************************************************************/ +/******************************************************************************/ + +#radius-lock { + width: 200px; + height: 75px; + margin: 30px 0 0 30px; + padding: 30px; + border: 3px solid #555; + border-radius: 10px; + position: relative; + float: left; +} + +#radius-lock .ui-checkbox { + color: #FFF; + position: absolute; +} + +#radius-lock .ui-checkbox > label { + height: 20px; + width: 34px; + padding: 0; +} + +#radius-lock .info { + height: 20%; + width: 100%; + line-height: 20%; + font-size: 20px; + text-align: center; + position: relative; + top: 40%; +} + +#radius-lock [data-topic="top-left"] { + top: 10px; + left: 10px; +} + +#radius-lock [data-topic="top-right"] { + top: 10px; + right: 10px; +} + +#radius-lock [data-topic="bottom-right"] { + bottom: 10px; + right: 10px; +} + +#radius-lock [data-topic="bottom-left"] { + bottom: 10px; + left: 10px; +} + +/** + * Controls + */ + +#dimensions { + width: 200px; + color: #444; + float:left; +} + +#dimensions input { + background: #555; + color: #FFF; + border: none; + border-radius: 3px; +} + +#output { + width: 500px; + padding: 10px 0; + margin: 10px 0; + color: #555; + text-align: center; + border: 1px dashed #999; + border-radius: 3px; + -moz-user-select: text; + -webkit-user-select: text; + -ms-user-select: text; + user-select: text; + + float: right; +} diff --git a/tools/box-shadow-generator/add-black.png b/tools/box-shadow-generator/add-black.png new file mode 100644 index 0000000000000000000000000000000000000000..ed80eefb88a13eeee83097df5561427d01316095 GIT binary patch literal 140 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!D3?x-;bCrM;OS+@4BLl<6e(pbstUx|vage(c z!@6@aFM%Ak0G|+7_W~avbG}wfAV|6-$S;_|;n|HeAV=KO#W95AdU65~*fli0`mZQ3 cON5!3!O?+t^4BNvAbS}+UHx3vIVCg!0KXL>umAu6 literal 0 HcmV?d00001 diff --git a/tools/box-shadow-generator/add-white.png b/tools/box-shadow-generator/add-white.png new file mode 100644 index 0000000000000000000000000000000000000000..639ff706516fd33023543d3132c4b9b6691fad9b GIT binary patch literal 150 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`oCO|{#S9F3${@^GvDCf{C@5Lt z8c`CQpH@gTe~DWM4f&IK&c literal 0 HcmV?d00001 diff --git a/tools/box-shadow-generator/alpha.png b/tools/box-shadow-generator/alpha.png new file mode 100644 index 0000000000000000000000000000000000000000..a28b929a4adde81339fca7295d680bfc3e6cd6ff GIT binary patch literal 105 zcmeAS@N?(olHy`uVBq!ia0vp^93afW1|*O0@9PFqoCO|{#S9F5M?jcysy3fAP*B>_ y#WAGfR< literal 0 HcmV?d00001 diff --git a/tools/box-shadow-generator/alpha_mask.png b/tools/box-shadow-generator/alpha_mask.png new file mode 100644 index 0000000000000000000000000000000000000000..d159327b56526d2c58548c4a1d3a0f3888659b8e GIT binary patch literal 1186 zcmeAS@N?(olHy`uVBq!ia0vp^$ADOdg9%7(jR|)KQk(@Ik;M!QddeWoSh3W;jDdkA z#M8wwq~g}w8{dsDSOZuajP?qLa>S`hG8ZML^n3$+f|5sZ#@F z&RIMzSk=wlZp?T5>%QuDcHjTL{muU6-_zpr&p%i8%g?*c|Ni;S&u?#UfA{X)x^?T$ zojZ5-?AhMl-mhQ3Zr!@|+qZAqwr#t1?b@_y(~cfJ+S=Os^XE_d`hO;-rlw|QW+ogozKJ$_%!&p$tnU;g;=^0K=ByeChdq@#=de1_N_* zb6`+ix^(Hng@Ewz@Zex$BO|N&e>N^oH-O=Aevakh6)RROSioR7Yt}3kx3I8pPfku& z_nTu;_s4?eKzwE8&&$jGy*)i;EsI=&fh0+0*sx*4 zgb5RN?AS45hD1%{^=5YdPai%M6c-m47JmHn>5z8hW}uHZZQ2BMjc+lR##V-m-nokO6!sdB9okgJYLOL+PZu9?#-Jw@7=q1>(;MdUtb3X z)TV>0SFhIA);@juw70i6FzL*zIlFU#NGyL$EN z-rC<~Sy@>{MMXgCYHH@>l$Dm2hK63faN)v(2M-P$aHy}ZkBpSu`qW{jMcXn~R#sqo zOL^>QkjcIm=v+Dbx<4;2E(RJN)O$dW!^6|l6BuD$UQK#aqM8(dNlil4>eV0deC zDNLQxIt!T4fT@GUB`ZtoN=sA17hp8y<>dj>xt^Y0K<}l>=jUXrtAF3#o`3u1%|N|{ z90v>k{wf7}N5J!v;`dKaPm2gn;_giN2u!=;dNB$C3f(~~mM>op^z!1xi`TC8{n?xl z8X77pDw>*_s;a6w!Tpdz+XBndS5xN9k?Cw?F!&yC^hp7|JyUG&S<>H zX285rQkCrt`y+b?8K*wR;(y8q{1y0)q%j!tot^wYxvBI8+Y087ye0Nbh5BM=Z#T~1 zy~!Y|P{%a&55tjT0UyhBX7Mu^s#i(KI0SzYJA2-sKqAt36JwFXpAYtR1w0*g03~Ot$DHFw2y=Y!%A_>zh7n2 RWq@vF@O1TaS?83{1ON%TT}uD} literal 0 HcmV?d00001 diff --git a/tools/box-shadow-generator/delete-white.png b/tools/box-shadow-generator/delete-white.png new file mode 100644 index 0000000000000000000000000000000000000000..cac25afae6f2f2ed4bedb8b36b21822a53a2d820 GIT binary patch literal 182 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!93?!50ihlx9Ea{HEjtmSN`?>!lvI6;x#X;^) z4C~IxyaaMM1AIbU|NsB*Uf=^HT^4P+2oz*03GxfBXSipwf)U8G^>lFz;kcg6!OGM& z;X*)Qo5sZnOL^kfI&w=kiB)YiYFTqZD3#-Cl;A0WS6c<#8g?XbZV=j#w83lxqrzf_ Yg)-vy!5dA&fd(;ny85}Sb4q9e0O5u>S^xk5 literal 0 HcmV?d00001 diff --git a/tools/box-shadow-generator/delete-yellow.png b/tools/box-shadow-generator/delete-yellow.png new file mode 100644 index 0000000000000000000000000000000000000000..6e186b7c5ad0925c64119603c1613762ec664403 GIT binary patch literal 182 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!93?!50ihlx9Ea{HEjtmSN`?>!lvI6;x#X;^) z4C~IxyaaMM1AIbU|371JFYx*QoI$E`sVPv9sU*lRxSrvj$qGgw&(_n$F@)oKG6ySD z+k^`Nfo&QWCoJWOTkFUz*(6rA)u?671))@qt5Jfd1YT_waBJ9+z_~$aL(&Gb4U7tl Z85YWj+Xrtn2?rX);OXk;vd$@?2>_H)H7@`F literal 0 HcmV?d00001 diff --git a/tools/box-shadow-generator/disabled.png b/tools/box-shadow-generator/disabled.png new file mode 100644 index 0000000000000000000000000000000000000000..1dd2c4c20a188993d385c72d92c3520685039a03 GIT binary patch literal 344 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!63?wyl`GbKJOS+@4BLl<6e(pbstUx|vage(c z!@6@aFM*t>0G|+7_X3~)v;pxKV@?5Wku3@G3uX}I6T6icbmcf3`)6sn{PP!1f62Y^ zGd+WcSK!C>fVc0S0~Ho~x;TbNT<$&ZDb%3A!*ZabK|$-???3-%M=4jCZGRb})p=t5 zr(>-Tdg_bU9_$Kzb-yy~RMr;N#2vF;)i(7@aPWCMZY*fw)LOpAB2M5`*95mU0nbd5 z3f_qv5I7~a`0h5=3+JO&J}REEZvW-k>)!7^_P_cIll(&VU&sFcPykxb;OXk;vd$@? F2>=;FyV(E$ literal 0 HcmV?d00001 diff --git a/tools/box-shadow-generator/down-black.png b/tools/box-shadow-generator/down-black.png new file mode 100644 index 0000000000000000000000000000000000000000..d3c28c8549d18e8ec4bd4af0060105e7c53319fc GIT binary patch literal 158 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!93?!50ihlx9Ea{HEjtmSN`?>!lvI6;x#X;^) z4C~IxyaaMM1AIbU-3xqxOdt@;=9~bP0l+XkK2Zbe9 literal 0 HcmV?d00001 diff --git a/tools/box-shadow-generator/down-white.png b/tools/box-shadow-generator/down-white.png new file mode 100644 index 0000000000000000000000000000000000000000..ab65bddbafc306170dee6cefbc142137a4b04f32 GIT binary patch literal 172 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`oCO|{#S9F3${@^GvDCf{C@5Lt z8c`CQpH@HoE|uM8idO zq0Sx;6(HdPBwUhwRE*SwW*^bpbn~d%?g=>{F(tuHFyZ2+WGE!rdCu-_{GR9bb98!C zH|m5Pn-w81o$Q^{ANw)zO}GD}0GZD9kAGXpsXq#t)5~3Gx$bCuq4m3?hbx56KT6%x zx4lyT|0(TC#ro69l?vrgr`?&by2$g~Y000?b(7~mk^bpqH@UgU;oB*>o0_*%Hs?$z z-4qpef_+njn1|TOph&&dDQjyqW~Z!vGvV&1jc=y=KiwcRHTl!xKU(Tfx6GN`UF5p% zwC_&k?@uS%Onv^Tf6v77D);;s@>PERF9q)|w=S8y?y~4EkLNE;<}QhU!EWW|{?ee< z>-Wp#TfWvA+PRDPGj-Q4db(wb*hU4h&buo z{D`1dZo{$%T2YiCO8E^M8pAe_?VGlA2{QSAiF%)!8U d@?YUUqeNvw_<^(EBY + + + + + Box-shadow generator + + + + + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    element
    +
    + :before + +
    +
    + :after + +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + +
    + +
    +
    Shadow properties
    +
    +
    +
    inset
    +
    +
    +
    +
    Position x
    +
    +
    +
    +
    +
    +
    +
    Position y
    +
    +
    +
    +
    +
    +
    +
    Blur
    +
    +
    +
    +
    +
    +
    +
    Spread
    +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    Class element properties
    +
    +
    +
    border
    +
    +
    +
    +
    z-index
    +
    +
    +
    +
    +
    +
    +
    top
    +
    +
    +
    +
    +
    +
    +
    left
    +
    +
    +
    +
    +
    +
    +
    Rotate
    +
    +
    +
    +
    +
    +
    +
    +
    Width
    +
    +
    +
    +
    +
    +
    +
    +
    Height
    +
    +
    +
    +
    +
    +
    +
    +
    + +
    + +
    CSS Code
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + + + + + diff --git a/tools/box-shadow-generator/picker_mask_200.png b/tools/box-shadow-generator/picker_mask_200.png new file mode 100644 index 0000000000000000000000000000000000000000..77f55010c7806fc5b7cf63a7da2dfcef60e43796 GIT binary patch literal 12816 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 literal 0 HcmV?d00001 diff --git a/tools/box-shadow-generator/script.js b/tools/box-shadow-generator/script.js new file mode 100644 index 00000000..cc1727eb --- /dev/null +++ b/tools/box-shadow-generator/script.js @@ -0,0 +1,1692 @@ +'use strict'; + +/** + * UI-SlidersManager + */ + +var SliderManager = (function SliderManager() { + + var subscribers = {}; + var sliders = []; + + var Slider = function(node) { + var min = node.getAttribute('data-min') | 0; + var max = node.getAttribute('data-max') | 0; + var step = node.getAttribute('data-step') | 0; + var value = node.getAttribute('data-value') | 0; + var snap = node.getAttribute('data-snap'); + var topic = node.getAttribute('data-topic'); + + this.min = min; + this.max = max > 0 ? max : 100; + this.step = step === 0 ? 1 : step; + this.value = value <= max && value >= min ? value : (min + max) / 2 | 0; + this.snap = snap === "true" ? true : false; + this.topic = topic; + this.node = node; + + var pointer = document.createElement('div'); + pointer.className = 'ui-slider-pointer'; + node.appendChild(pointer); + this.pointer = pointer; + + setMouseTracking(node, updateSlider.bind(this)); + + sliders[topic] = this; + setValue(topic, this.value); + } + + var setButtonComponent = function setButtonComponent(node) { + var type = node.getAttribute('data-type'); + var topic = node.getAttribute('data-topic'); + if (type === "sub") { + node.textContent = '-'; + node.addEventListener("click", function() { + decrement(topic); + }); + } + if (type === "add") { + node.textContent = '+'; + node.addEventListener("click", function() { + increment(topic); + }); + } + } + + var setInputComponent = function setInputComponent(node) { + var topic = node.getAttribute('data-topic'); + var unit_type = node.getAttribute('data-unit'); + + var input = document.createElement('input'); + var unit = document.createElement('span'); + unit.textContent = unit_type; + + input.setAttribute('type', 'text'); + node.appendChild(input); + node.appendChild(unit); + + input.addEventListener('click', function(e) { + this.select(); + }); + + input.addEventListener('change', function(e) { + setValue(topic, e.target.value | 0); + }); + + subscribe(topic, function(value) { + node.children[0].value = value; + }); + } + + var increment = function increment(topic) { + var slider = sliders[topic]; + if (slider === null || slider === undefined) + return; + + if (slider.value + slider.step <= slider.max) { + slider.value += slider.step; + setValue(slider.topic, slider.value) + notify.call(slider); + } + }; + + var decrement = function decrement(topic) { + var slider = sliders[topic]; + if (slider === null || slider === undefined) + return; + + if (slider.value - slider.step >= slider.min) { + slider.value -= slider.step; + setValue(topic, slider.value) + notify.call(slider); + } + } + + // this = Slider object + var updateSlider = function updateSlider(e) { + var node = this.node; + var pos = e.pageX - node.offsetLeft; + var width = node.clientWidth; + var delta = this.max - this.min; + var offset = this.pointer.clientWidth + 4; // border width * 2 + + if (pos < 0) pos = 0; + if (pos > width) pos = width; + + var value = pos * delta / width | 0; + var precision = value % this.step; + value = value - precision + this.min; + if (precision > this.step / 2) + value = value + this.step; + + if (this.snap) + pos = (value - this.min) * width / delta; + + this.pointer.style.left = pos - offset/2 + "px"; + this.value = value; + node.setAttribute('data-value', value); + notify.call(this); + } + + var setValue = function setValue(topic, value) { + var slider = sliders[topic]; + + if (value > slider.max || value < slider.min) + return; + + var delta = slider.max - slider.min; + var width = slider.node.clientWidth; + var offset = slider.pointer.clientWidth; + var pos = (value - slider.min) * width / delta; + slider.value = value; + slider.pointer.style.left = pos - offset / 2 + "px"; + slider.node.setAttribute('data-value', value); + notify.call(slider); + } + + var setMouseTracking = function setMouseTracking(elem, callback) { + elem.addEventListener("mousedown", function(e) { + callback(e); + document.addEventListener("mousemove", callback); + }); + + document.addEventListener("mouseup", function(e) { + document.removeEventListener("mousemove", callback); + }); + } + + var subscribe = function subscribe(topic, callback) { + if (subscribers[topic] === undefined) + subscribers[topic] = []; + subscribers[topic].push(callback); + } + + var unsubscribe = function unsubscribe(topic, callback) { + subscribers[topic].indexOf(callback); + subscribers[topic].splice(index, 1); + } + + var notify = function notify() { + if (subscribers[this.topic] === undefined) + return; + + for (var i in subscribers[this.topic]) { + subscribers[this.topic][i](this.value); + } + } + + var init = function init() { + var elem, size; + + elem = document.querySelectorAll('.ui-slider-btn-set'); + size = elem.length; + for (var i = 0; i < size; i++) + setButtonComponent(elem[i]); + + elem = document.querySelectorAll('.ui-slider-input'); + size = elem.length; + for (var i = 0; i < size; i++) + setInputComponent(elem[i]); + + elem = document.querySelectorAll('.ui-slider'); + size = elem.length; + for (var i = 0; i < size; i++) + new Slider(elem[i]); + } + + return { + init : init, + setValue : setValue, + subscribe : subscribe, + unsubscribe : unsubscribe + } + +})(); + +/** + * UI-ButtonManager + */ + +var ButtonManager = (function CheckBoxManager() { + + var subscribers = []; + var buttons = []; + + var CheckBox = function CheckBox(node) { + var topic = node.getAttribute('data-topic'); + var state = node.getAttribute('data-state'); + var name = node.getAttribute('data-label'); + var align = node.getAttribute('data-text-on'); + + state = (state === "true"); + + var checkbox = document.createElement("input"); + var label = document.createElement("label"); + + var id = 'checkbox-' + topic; + checkbox.id = id; + checkbox.setAttribute('type', 'checkbox'); + checkbox.checked = state; + + label.setAttribute('for', id); + if (name) { + label.className = 'text'; + if (align) + label.className += ' ' + align; + label.textContent = name; + } + + node.appendChild(checkbox); + node.appendChild(label); + + this.node = node; + this.topic = topic; + this.checkbox = checkbox; + + checkbox.addEventListener('change', function(e) { + notify.call(this); + }.bind(this)); + + buttons[topic] = this; + } + + var getNode = function getNode(topic) { + return buttons[topic].node; + } + + var setValue = function setValue(topic, value) { + try { + buttons[topic].checkbox.checked = value; + notify.call(buttons[topic]); + } + catch(error) { + console.log(error, topic, value); + } + } + + var subscribe = function subscribe(topic, callback) { + if (subscribers[topic] === undefined) + subscribers[topic] = []; + + subscribers[topic].push(callback); + } + + var unsubscribe = function unsubscribe(topic, callback) { + subscribers[topic].indexOf(callback); + subscribers[topic].splice(index, 1); + } + + var notify = function notify() { + if (subscribers[this.topic] === undefined) + return; + for (var i = 0; i < subscribers[this.topic].length; i++) + subscribers[this.topic][i](this.checkbox.checked); + } + + var init = function init() { + var elem = document.querySelectorAll('.ui-checkbox'); + var size = elem.length; + for (var i = 0; i < size; i++) + new CheckBox(elem[i]); + } + + return { + init : init, + setValue : setValue, + subscribe : subscribe, + unsubscribe : unsubscribe + } + +})(); + +window.addEventListener("load", function(){ + BoxShadow.init(); +}); + +var BoxShadow = (function BoxShadow() { + + function getElemById(id) { + return document.getElementById(id); + } + + /** + * RGBA Color class + */ + + function Color() { + this.r = 0; + this.g = 0; + this.b = 0; + this.a = 1; + this.hue = 0; + this.saturation = 0; + this.value = 0; + } + + Color.prototype.copy = function copy(obj) { + if(obj instanceof Color !== true) { + console.log("Typeof instance not Color"); + return; + } + + this.r = obj.r; + this.g = obj.g; + this.b = obj.b; + this.a = obj.a; + this.hue = obj.hue; + this.saturation = obj.saturation; + this.value = obj.value; + } + + Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) { + if (red != undefined) + this.r = red | 0; + if (green != undefined) + this.g = green | 0; + if (blue != undefined) + this.b = blue | 0; + if (alpha != undefined) + this.a = alpha | 0; + } + + /** + * HSV/HSB (hue, saturation, value / brightness) + * @param hue 0-360 + * @param saturation 0-100 + * @param value 0-100 + */ + Color.prototype.setHSV = function setHSV(hue, saturation, value) { + this.hue = hue; + this.saturation = saturation; + this.value = value; + this.updateRGB(); + } + + Color.prototype.updateRGB = function updateRGB() { + var sat = this.saturation / 100; + var value = this.value / 100; + var C = sat * value; + var H = this.hue / 60; + var X = C * (1 - Math.abs(H % 2 - 1)); + var m = value - C; + var precision = 255; + + C = (C + m) * precision; + X = (X + m) * precision; + m = m * precision; + + if (H >= 0 && H < 1) { this.setRGBA(C, X, m); return; } + if (H >= 1 && H < 2) { this.setRGBA(X, C, m); return; } + if (H >= 2 && H < 3) { this.setRGBA(m, C, X); return; } + if (H >= 3 && H < 4) { this.setRGBA(m, X, C); return; } + if (H >= 4 && H < 5) { this.setRGBA(X, m, C); return; } + if (H >= 5 && H < 6) { this.setRGBA(C, m, X); return; } + } + + Color.prototype.updateHSV = function updateHSV() { + var red = this.r / 255; + var green = this.g / 255; + var blue = this.b / 255; + + var cmax = Math.max(red, green, blue); + var cmin = Math.min(red, green, blue); + var delta = cmax - cmin; + var hue = 0; + var saturation = 0; + + if (delta) { + if (cmax === red ) { hue = ((green - blue) / delta); } + if (cmax === green ) { hue = 2 + (blue - red) / delta; } + if (cmax === blue ) { hue = 4 + (red - green) / delta; } + if (cmax) saturation = delta / cmax; + } + + this.hue = 60 * hue | 0; + if (this.hue < 0) this.hue += 360; + this.saturation = (saturation * 100) | 0; + this.value = (cmax * 100) | 0; + } + + Color.prototype.setHexa = function setHexa(value) { + var valid = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value) + if (valid !== true) + return; + + if (value[0] === '#') + value = value.slice(1, value.length); + + if (value.length === 3) + value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,"$1$1$2$2$3$3"); + + this.r = parseInt(value.substr(0, 2), 16); + this.g = parseInt(value.substr(2, 2), 16); + this.b = parseInt(value.substr(4, 2), 16); + + this.alpha = 1; + } + + Color.prototype.getHexa = function getHexa() { + var r = this.r.toString(16); + var g = this.g.toString(16); + var b = this.b.toString(16); + if (this.r < 16) r = '0' + r; + if (this.g < 16) g = '0' + g; + if (this.b < 16) b = '0' + b; + var value = '#' + r + g + b; + return value.toUpperCase(); + } + + Color.prototype.getRGBA = function getRGBA() { + + var rgb = "(" + this.r + ", " + this.g + ", " + this.b; + var a = ''; + var v = ''; + if (this.a !== 1) { + a = 'a'; + v = ', ' + this.a; + } + + var value = "rgb" + a + rgb + v + ")"; + return value; + } + + Color.prototype.getColor = function getColor() { + if (this.a | 0 === 1) + return this.getHexa(); + return this.getRGBA(); + } + + /** + * Shadow Object + */ + function Shadow() { + this.inset = false; + this.posX = 5; + this.posY = -5; + this.blur = 5; + this.spread = 0; + this.color = new Color(); + + var hue = (Math.random() * 360) | 0; + var saturation = (Math.random() * 75) | 0; + var value = (Math.random() * 50 + 50) | 0; + this.color.setHSV(hue, saturation, value, 1); + } + + Shadow.prototype.computeCSS = function computeCSS() { + var value = ""; + if (this.inset === true) + value += "inset "; + value += this.posX + "px "; + value += this.posY + "px "; + value += this.blur + "px "; + value += this.spread + "px "; + value += this.color.getColor(); + + return value; + } + + Shadow.prototype.toggleInset = function toggleInset(value) { + if (value !== undefined || typeof value === "boolean") + this.inset = value; + else + this.inset = this.inset === true ? false : true; + } + + Shadow.prototype.copy = function copy(obj) { + if(obj instanceof Shadow !== true) { + console.log("Typeof instance not Shadow"); + return; + } + + this.inset = obj.inset; + this.posX = obj.posX; + this.posY = obj.posY; + this.blur = obj.blur; + this.spread = obj.spread; + this.color.copy(obj.color); + } + + /** + * Color Picker + */ + var ColoPicker = (function ColoPicker() { + + var colorpicker; + var hue_area; + var gradient_area; + var alpha_area; + var gradient_picker; + var hue_selector; + var alpha_selector; + var pick_object; + var info_rgb; + var info_hsv; + var info_hexa; + var output_color; + var color = new Color(); + var subscribers = []; + + var updateColor = function updateColor(e) { + var x = e.pageX - gradient_area.offsetLeft; + var y = e.pageY - gradient_area.offsetTop; + + // width and height should be the same + var size = gradient_area.clientWidth; + + if (x > size) + x = size; + if (y > size) + y = size; + + if (x < 0) x = 0; + if (y < 0) y = 0; + + var value = 100 - (y * 100 / size) | 0; + var saturation = x * 100 / size | 0; + + color.setHSV(color.hue, saturation, value); + // should update just + // color pointer location + updateUI(); + notify("color", color); + } + + var updateHue = function updateHue(e) { + var x = e.pageX - hue_area.offsetLeft; + var width = hue_area.clientWidth; + + if (x < 0) x = 0; + if (x > width) x = width; + + var hue = ((360 * x) / width) | 0; + if (hue === 360) hue = 359; + + color.setHSV(hue, color.saturation, color.value); + + // should update just + // hue pointer location + // picker area background + // alpha area background + updateUI(); + notify("color", color); + } + + var updateAlpha = function updateAlpha(e) { + var x = e.pageX - alpha_area.offsetLeft; + var width = alpha_area.clientWidth; + + if (x < 0) x = 0; + if (x > width) x = width; + + color.a = (x / width).toFixed(2); + + // should update just + // alpha pointer location + updateUI(); + notify("color", color); + } + + var setHueGfx = function setHueGfx(hue) { + var sat = color.saturation; + var val = color.value; + var alpha = color.a; + + color.setHSV(hue, 100, 100); + gradient_area.style.backgroundColor = color.getHexa(); + + color.a = 0; + var start = color.getRGBA(); + color.a = 1; + var end = color.getRGBA(); + color.a = alpha; + + var gradient = '-moz-linear-gradient(left, ' + start + '0%, ' + end + ' 100%)'; + alpha_area.style.background = gradient; + } + + var updateUI = function updateUI() { + var x, y; // coordinates + var size; // size of the area + var offset; // pointer graphic selector offset + + // Set color pointer location + size = gradient_area.clientWidth; + offset = gradient_picker.clientWidth / 2 + 2; + + x = (color.saturation * size / 100) | 0; + y = size - (color.value * size / 100) | 0; + + gradient_picker.style.left = x - offset + "px"; + gradient_picker.style.top = y - offset + "px"; + + // Set hue pointer location + size = hue_area.clientWidth; + offset = hue_selector.clientWidth/2; + x = (color.hue * size / 360 ) | 0; + hue_selector.style.left = x - offset + "px"; + + // Set alpha pointer location + size = alpha_area.clientWidth; + offset = alpha_selector.clientWidth/2; + x = (color.a * size) | 0; + alpha_selector.style.left = x - offset + "px"; + + // Set picker area background + var nc = new Color(); + nc.copy(color); + if (nc.hue === 360) nc.hue = 0; + nc.setHSV(nc.hue, 100, 100); + gradient_area.style.backgroundColor = nc.getHexa(); + + // Set alpha area background + nc.copy(color); + nc.a = 0; + var start = nc.getRGBA(); + nc.a = 1; + var end = nc.getRGBA(); + var gradient = '-moz-linear-gradient(left, ' + start + '0%, ' + end + ' 100%)'; + alpha_area.style.background = gradient; + + // Update color info + notify("color", color); + notify("hue", color.hue); + notify("saturation", color.saturation); + notify("value", color.value); + notify("r", color.r); + notify("g", color.g); + notify("b", color.b); + notify("a", color.a); + notify("hexa", color.getHexa()); + output_color.style.backgroundColor = color.getRGBA(); + } + + var setInputComponent = function setInputComponent(node) { + var topic = node.getAttribute('data-topic'); + var title = node.getAttribute('data-title'); + var action = node.getAttribute('data-action'); + title = title === null ? '' : title; + + var input = document.createElement('input'); + var info = document.createElement('span'); + info.textContent = title; + + input.setAttribute('type', 'text'); + input.setAttribute('data-action', 'set-' + action + '-' + topic); + node.appendChild(info); + node.appendChild(input); + + input.addEventListener('click', function(e) { + this.select(); + }); + + input.addEventListener('change', function(e) { + if (action === 'HSV') + inputChangeHSV(topic); + if (action === 'RGB') + inputChangeRGB(topic); + if (action === 'alpha') + inputChangeAlpha(topic); + if (action === 'hexa') + inputChangeHexa(topic); + }); + + subscribe(topic, function(value) { + node.children[1].value = value; + }); + } + + var inputChangeHSV = function actionHSV(topic) { + var selector = "[data-action='set-HSV-" + topic + "']"; + var node = document.querySelector("#colorpicker " + selector); + var value = parseInt(node.value); + + if (typeof value === 'number' && isNaN(value) === false && + value >= 0 && value < 360) + color[topic] = value; + + color.updateRGB(); + updateUI(); + } + + var inputChangeRGB = function inputChangeRGB(topic) { + var selector = "[data-action='set-RGB-" + topic + "']"; + var node = document.querySelector("#colorpicker " + selector); + var value = parseInt(node.value); + + if (typeof value === 'number' && isNaN(value) === false && + value >= 0 && value <= 255) + color[topic] = value; + + color.updateHSV(); + updateUI(); + } + + var inputChangeAlpha = function inputChangeAlpha(topic) { + var selector = "[data-action='set-alpha-" + topic + "']"; + var node = document.querySelector("#colorpicker " + selector); + var value = parseFloat(node.value); + + if (typeof value === 'number' && isNaN(value) === false && + value >= 0 && value <= 1) + color.a = value.toFixed(2); + + updateUI(); + } + + var inputChangeHexa = function inputChangeHexa(topic) { + var selector = "[data-action='set-hexa-" + topic + "']"; + var node = document.querySelector("#colorpicker " + selector); + var value = node.value; + color.setHexa(value); + color.updateHSV(); + updateUI(); + } + + var setMouseTracking = function setMouseTracking(elem, callback) { + + elem.addEventListener("mousedown", function(e) { + callback(e); + document.addEventListener("mousemove", callback); + }); + + document.addEventListener("mouseup", function(e) { + document.removeEventListener("mousemove", callback); + }); + } + + /* + * Observer + */ + var setColor = function setColor(obj) { + if(obj instanceof Color !== true) { + console.log("Typeof instance not Color"); + return; + } + color.copy(obj); + updateUI(); + } + + var subscribe = function subscribe(topic, callback) { + if (subscribers[topic] === undefined) + subscribers[topic] = []; + + subscribers[topic].push(callback); + } + + var unsubscribe = function unsubscribe(callback) { + subscribers.indexOf(callback); + subscribers.splice(index, 1); + } + + var notify = function notify(topic, value) { + for (var i in subscribers[topic]) + subscribers[topic][i](value); + } + + var init = function init() { + colorpicker = getElemById("colorpicker"); + hue_area = getElemById("hue"); + gradient_area = getElemById("gradient"); + alpha_area = getElemById("alpha"); + gradient_picker = getElemById("gradient_picker"); + hue_selector = getElemById("hue_selector"); + alpha_selector = getElemById("alpha_selector"); + output_color = getElemById("output_color"); + + var elem = document.querySelectorAll('#colorpicker .input'); + var size = elem.length; + for (var i = 0; i < size; i++) + setInputComponent(elem[i]); + + setMouseTracking(gradient_area, updateColor); + setMouseTracking(hue_area, updateHue); + setMouseTracking(alpha_area, updateAlpha); + + } + + return { + init : init, + setColor : setColor, + subscribe : subscribe, + unsubscribe : unsubscribe + } + + })(); + + /** + * Shadow dragging + */ + var PreviewMouseTracking = (function Drag() { + var active = false; + var lastX = 0; + var lastY = 0; + var subscribers = []; + + var init = function init(id) { + var elem = getElemById(id); + elem.addEventListener('mousedown', dragStart, false); + document.addEventListener('mouseup', dragEnd, false); + } + + var dragStart = function dragStart(e) { + if (e.button !== 0) + return; + + active = true; + lastX = e.clientX; + lastY = e.clientY; + document.addEventListener('mousemove', mouseDrag, false); + } + + var dragEnd = function dragEnd(e) { + if (e.button !== 0) + return; + + if (active === true) { + active = false; + document.removeEventListener('mousemove', mouseDrag, false); + } + } + + var mouseDrag = function mouseDrag(e) { + notify(e.clientX - lastX, e.clientY - lastY); + lastX = e.clientX; + lastY = e.clientY; + } + + var subscribe = function subscribe(callback) { + subscribers.push(callback); + } + + var unsubscribe = function unsubscribe(callback) { + var index = subscribers.indexOf(callback); + subscribers.splice(index, 1); + } + + var notify = function notify(deltaX, deltaY) { + for (var i in subscribers) + subscribers[i](deltaX, deltaY); + } + + return { + init : init, + subscribe : subscribe, + unsubscribe : unsubscribe + } + + })(); + + /* + * Element Class + */ + var CssClass = function CssClass(id) { + this.left = 0; + this.top = 0; + this.rotate = 0; + this.width = 300; + this.height = 100; + this.display = true; + this.border = true; + this.zIndex = -1; + this.bgcolor = new Color(); + this.id = id; + this.node = getElemById('obj-' + id); + this.object = getElemById(id); + this.shadowID = null; + this.shadows = [] + this.render = []; + this.init(); + } + + CssClass.prototype.init = function init() { + this.left = ((this.node.parentNode.clientWidth - this.node.clientWidth) / 2) | 0; + this.top = ((this.node.parentNode.clientHeight - this.node.clientHeight) / 2) | 0; + + this.setTop(this.top); + this.setLeft(this.left); + this.setHeight(this.height); + this.setWidth(this.width); + this.bgcolor.setHSV(0, 0, 100); + this.updateBgColor(this.bgcolor); + } + + CssClass.prototype.updatePos = function updatePos(deltaX, deltaY) { + this.left += deltaX; + this.top += deltaY; + this.node.style.top = this.top + "px"; + this.node.style.left = this.left + "px"; + SliderManager.setValue("left", this.left); + SliderManager.setValue("top", this.top); + } + + CssClass.prototype.setLeft = function setLeft(value) { + this.left = value; + this.node.style.left = this.left + "px"; + OutputManager.updateProperty(this.id, 'left', this.left + 'px'); + } + + CssClass.prototype.setTop = function setTop(value) { + this.top = value; + this.node.style.top = this.top + 'px'; + OutputManager.updateProperty(this.id, 'top', this.top + 'px'); + } + + CssClass.prototype.setWidth = function setWidth(value) { + this.width = value; + this.node.style.width = this.width + 'px'; + OutputManager.updateProperty(this.id, 'width', this.width + 'px'); + } + + CssClass.prototype.setHeight = function setHeight(value) { + this.height = value; + this.node.style.height = this.height + 'px'; + OutputManager.updateProperty(this.id, 'height', this.height + 'px'); + } + + // Browser support + CssClass.prototype.setRotate = function setRotate(value) { + var cssvalue = 'rotate(' + value +'deg)'; + + this.node.style.transform = cssvalue; + this.node.style.webkitTransform = cssvalue; + this.node.style.msTransform = cssvalue; + + if (value !== 0) { + if (this.rotate === 0) { + OutputManager.toggleProperty(this.id, 'transform', true); + OutputManager.toggleProperty(this.id, '-webkit-transform', true); + OutputManager.toggleProperty(this.id, '-ms-transform', true); + } + } + else { + OutputManager.toggleProperty(this.id, 'transform', false); + OutputManager.toggleProperty(this.id, '-webkit-transform', false); + OutputManager.toggleProperty(this.id, '-ms-transform', false); + } + + OutputManager.updateProperty(this.id, 'transform', cssvalue); + OutputManager.updateProperty(this.id, '-webkit-transform', cssvalue); + OutputManager.updateProperty(this.id, '-ms-transform', cssvalue); + this.rotate = value; + } + + CssClass.prototype.setzIndex = function setzIndex(value) { + this.node.style.zIndex = value; + OutputManager.updateProperty(this.id, 'z-index', value); + this.zIndex = value; + } + + CssClass.prototype.toggleDisplay = function toggleDisplay(value) { + if (typeof value !== "boolean" || this.display === value) + return; + + this.display = value; + var display = this.display === true ? "block" : "none"; + this.node.style.display = display; + this.object.style.display = display; + } + + CssClass.prototype.toggleBorder = function toggleBorder(value) { + if (typeof value !== "boolean" || this.border === value) + return; + + this.border = value; + var border = this.border === true ? "1px solid #CCC" : "none"; + this.node.style.border = border; + } + + CssClass.prototype.updateBgColor = function updateBgColor(color) { + this.bgcolor.copy(color); + this.node.style.backgroundColor = color.getColor(); + OutputManager.updateProperty(this.id, 'background-color', color.getColor()); + } + + CssClass.prototype.updateShadows = function updateShadows() { + if (this.render.length === 0) + OutputManager.toggleProperty(this.id, 'box-shadow', false); + if (this.render.length === 1) + OutputManager.toggleProperty(this.id, 'box-shadow', true); + + this.node.style.boxShadow = this.render.join(", "); + OutputManager.updateProperty(this.id, 'box-shadow', this.render.join(", \n")); + + } + + /** + * Tool Manager + */ + var Tool = (function Tool() { + + var preview; + var classes = []; + var active = null; + var animate = false; + + /* + * Toll actions + */ + var addCssClass = function addCssClass(id) { + classes[id] = new CssClass(id); + } + + var setActiveClass = function setActiveClass(id) { + active = classes[id]; + active.shadowID = null; + ColoPicker.setColor(classes[id].bgcolor); + SliderManager.setValue("top", active.top); + SliderManager.setValue("left", active.left); + SliderManager.setValue("rotate", active.rotate); + SliderManager.setValue("z-index", active.zIndex); + SliderManager.setValue("width", active.width); + SliderManager.setValue("height", active.height); + ButtonManager.setValue("border-state", active.border); + active.updateShadows(); + } + + var disableClass = function disableClass(topic) { + classes[topic].toggleDisplay(false); + ButtonManager.setValue(topic, false); + } + + var addShadow = function addShadow(position) { + if (animate === true) + return -1; + + active.shadows.splice(position, 0, new Shadow()); + active.render.splice(position, 0, null); + } + + var swapShadow = function swapShadow(id1, id2) { + var x = active.shadows[id1]; + active.shadows[id1] = active.shadows[id2]; + active.shadows[id2] = x; + updateShadowCSS(id1); + updateShadowCSS(id2); + } + + var deleteShadow = function deleteShadow(position) { + active.shadows.splice(position, 1); + active.render.splice(position, 1); + active.updateShadows(); + } + + var setActiveShadow = function setActiveShadow(id, glow) { + active.shadowID = id; + ColoPicker.setColor(active.shadows[id].color); + ButtonManager.setValue("inset", active.shadows[id].inset); + SliderManager.setValue("blur", active.shadows[id].blur); + SliderManager.setValue("spread", active.shadows[id].spread); + SliderManager.setValue("posX", active.shadows[id].posX); + SliderManager.setValue("posY", active.shadows[id].posY); + if (glow === true) + addGlowEffect(id); + } + + var addGlowEffect = function addGlowEffect(id) { + if (animate === true) + return; + + animate = true; + var store = new Shadow(); + var shadow = active.shadows[id]; + + store.copy(shadow); + shadow.color.setRGBA(40, 125, 200, 1); + shadow.blur = 10; + shadow.spread = 10; + + active.node.style.transition = "box-shadow 0.2s"; + updateShadowCSS(id); + + setTimeout(function() { + shadow.copy(store); + updateShadowCSS(id); + setTimeout(function() { + active.node.style.removeProperty("transition"); + animate = false; + }, 100); + }, 200); + } + + var updateActivePos = function updateActivePos(deltaX, deltaY) { + if (active.shadowID === null) + active.updatePos(deltaX, deltaY); + else + updateShadowPos(deltaX, deltaY); + } + + /* + * Shadow properties + */ + var updateShadowCSS = function updateShadowCSS(id) { + active.render[id] = active.shadows[id].computeCSS(); + active.updateShadows(); + } + + var toggleShadowInset = function toggleShadowInset(value) { + if (active.shadowID === null) + return; + active.shadows[active.shadowID].toggleInset(value); + updateShadowCSS(active.shadowID); + } + + var updateShadowPos = function updateShadowPos(deltaX, deltaY) { + var shadow = active.shadows[active.shadowID]; + shadow.posX += deltaX; + shadow.posY += deltaY; + SliderManager.setValue("posX", shadow.posX); + SliderManager.setValue("posY", shadow.posY); + updateShadowCSS(active.shadowID); + } + + var setShadowPosX = function setShadowPosX(value) { + if (active.shadowID === null) + return; + active.shadows[active.shadowID].posX = value; + updateShadowCSS(active.shadowID); + } + + var setShadowPosY = function setShadowPosY(value) { + if (active.shadowID === null) + return; + active.shadows[active.shadowID].posY = value; + updateShadowCSS(active.shadowID); + } + + var setShadowBlur = function setShadowBlur(value) { + if (active.shadowID === null) + return; + active.shadows[active.shadowID].blur = value; + updateShadowCSS(active.shadowID); + } + + var setShadowSpread = function setShadowSpread(value) { + if (active.shadowID === null) + return; + active.shadows[active.shadowID].spread = value; + updateShadowCSS(active.shadowID); + } + + var updateShadowColor = function updateShadowColor(color) { + active.shadows[active.shadowID].color.copy(color); + updateShadowCSS(active.shadowID); + } + + /* + * Element Properties + */ + var updateColor = function updateColor(color) { + if (active.shadowID === null) + active.updateBgColor(color); + else + updateShadowColor(color); + } + + var init = function init() { + preview = getElemById("preview"); + + ColoPicker.subscribe("color", updateColor); + PreviewMouseTracking.subscribe(updateActivePos); + + // Affects shadows + ButtonManager.subscribe("inset", toggleShadowInset); + SliderManager.subscribe("posX", setShadowPosX); + SliderManager.subscribe("posY", setShadowPosY); + SliderManager.subscribe("blur", setShadowBlur); + SliderManager.subscribe("spread", setShadowSpread); + + // Affects element + SliderManager.subscribe("top", function(value){ + active.setTop(value); + }); + SliderManager.subscribe("left", function(value){ + active.setLeft(value); + }); + SliderManager.subscribe("rotate", function(value) { + if (active == classes["element"]) + return; + active.setRotate(value); + }); + + SliderManager.subscribe("z-index", function(value) { + if (active == classes["element"]) + return; + active.setzIndex(value); + }); + + SliderManager.subscribe("width", function(value) { + active.setWidth(value) + }); + + SliderManager.subscribe("height", function(value) { + active.setHeight(value) + }); + + // Actions + classes['before'].top = -30; + classes['before'].left = -30; + classes['after'].top = 30; + classes['after'].left = 30; + classes['before'].toggleDisplay(false); + classes['after'].toggleDisplay(false); + ButtonManager.setValue('before', false); + ButtonManager.setValue('after', false); + + ButtonManager.subscribe("before", classes['before'].toggleDisplay.bind(classes['before'])); + ButtonManager.subscribe("after", classes['after'].toggleDisplay.bind(classes['after'])); + + ButtonManager.subscribe("border-state", function(value) { + active.toggleBorder(value); + }); + + } + + return { + init : init, + addShadow : addShadow, + swapShadow : swapShadow, + addCssClass : addCssClass, + disableClass : disableClass, + deleteShadow : deleteShadow, + setActiveClass : setActiveClass, + setActiveShadow : setActiveShadow + } + + })(); + + /** + * Layer Manager + */ + var LayerManager = (function LayerManager() { + var stacks = []; + var active = { + node : null, + stack : null + } + var elements = {}; + + var mouseEvents = function mouseEvents(e) { + var node = e.target; + var type = node.getAttribute('data-type'); + + if (type === 'subject') + setActiveStack(stacks[node.id]); + + if (type === 'disable') { + Tool.disableClass(node.parentNode.id); + setActiveStack(stacks['element']); + } + + if (type === 'add') + active.stack.addLayer(); + + if (type === 'layer') + active.stack.setActiveLayer(node); + + if (type === 'delete') + active.stack.deleteLayer(node.parentNode); + + if (type === 'move-up') + active.stack.moveLayer(1); + + if (type === 'move-down') + active.stack.moveLayer(-1); + } + + var setActiveStack = function setActiveStack(stackObj) { + active.stack.hide(); + active.stack = stackObj; + active.stack.show(); + } + + /* + * Stack object + */ + var Stack = function Stack(subject) { + var S = document.createElement('div'); + var title = document.createElement('div'); + var stack = document.createElement('div'); + + S.className = 'container'; + stack.className = 'stack'; + title.className = 'title'; + title.textContent = subject.getAttribute('data-title'); + S.appendChild(title); + S.appendChild(stack); + + this.id = subject.id; + this.container = S; + this.stack = stack; + this.subject = subject; + this.order = []; + this.uid = 0; + this.count = 0; + this.layer = null; + this.layerID = 0; + } + + Stack.prototype.addLayer = function addLayer() { + if (Tool.addShadow(this.layerID) == -1) + return; + + var uid = this.getUID(); + var layer = this.createLayer(uid); + + if (this.layer === null && this.stack.children.length >= 1) + this.layer = this.stack.children[0]; + + this.stack.insertBefore(layer, this.layer); + this.order.splice(this.layerID, 0, uid); + this.count++; + this.setActiveLayer(layer); + } + + Stack.prototype.createLayer = function createLayer(uid) { + var layer = document.createElement('div'); + var del = document.createElement('span'); + + layer.className = 'node'; + layer.setAttribute('data-shid', uid); + layer.setAttribute('data-type', 'layer'); + layer.textContent = 'shadow ' + uid; + + del.className = 'delete'; + del.setAttribute('data-type', 'delete'); + + layer.appendChild(del); + return layer; + } + + Stack.prototype.getUID = function getUID() { + return this.uid++; + } + + // SOLVE IE BUG + Stack.prototype.moveLayer = function moveLayer(direction) { + if (this.count <= 1 || this.layer === null) + return; + if (direction === -1 && this.layerID === (this.count - 1) ) + return; + if (direction === 1 && this.layerID === 0 ) + return; + + if (direction === -1) { + var before = null; + Tool.swapShadow(this.layerID, this.layerID + 1); + this.swapOrder(this.layerID, this.layerID + 1); + this.layerID += 1; + + if (this.layerID + 1 !== this.count) + before = this.stack.children[this.layerID + 1]; + + this.stack.insertBefore(this.layer, before); + Tool.setActiveShadow(this.layerID, false); + } + + if (direction === 1) { + Tool.swapShadow(this.layerID, this.layerID - 1); + this.swapOrder(this.layerID, this.layerID - 1); + this.layerID -= 1; + this.stack.insertBefore(this.layer, this.stack.children[this.layerID]); + Tool.setActiveShadow(this.layerID, false); + } + } + + Stack.prototype.swapOrder = function swapOrder(pos1, pos2) { + var x = this.order[pos1]; + this.order[pos1] = this.order[pos2]; + this.order[pos2] = x; + } + + Stack.prototype.deleteLayer = function deleteLayer(node) { + var shadowID = node.getAttribute('data-shid') | 0; + var index = this.order.indexOf(shadowID); + this.stack.removeChild(this.stack.children[index]); + this.order.splice(index, 1); + this.count--; + + Tool.deleteShadow(index); + + if (index > this.layerID) + return; + + if (index == this.layerID) { + if (this.count >= 1) { + this.layerID = 0; + this.setActiveLayer(this.stack.children[0], true); + } + else { + this.layer = null; + this.show(); + } + } + + if (index < this.layerID) { + this.layerID--; + Tool.setActiveShadow(this.layerID, true); + } + + } + + Stack.prototype.setActiveLayer = function setActiveLayer(node) { + elements.shadow_properties.style.display = 'block'; + elements.element_properties.style.display = 'none'; + + if (this.layer) + this.layer.removeAttribute('data-active'); + + this.layer = node; + this.layer.setAttribute('data-active', 'layer'); + + var shadowID = node.getAttribute('data-shid') | 0; + this.layerID = this.order.indexOf(shadowID); + Tool.setActiveShadow(this.layerID, true); + } + + Stack.prototype.unsetActiveLayer = function unsetActiveLayer() { + if (this.layer) + this.layer.removeAttribute('data-active'); + + this.layer = null; + this.layerID = 0; + } + + Stack.prototype.hide = function hide() { + this.unsetActiveLayer(); + this.subject.removeAttribute('data-active'); + var style = this.container.style; + style.left = '100%'; + style.zIndex = '0'; + } + + Stack.prototype.show = function show() { + elements.shadow_properties.style.display = 'none'; + elements.element_properties.style.display = 'block'; + + if (this.id === 'element') { + elements.zIndex.style.display = 'none'; + elements.transform_rotate.style.display = 'none'; + } + else { + elements.zIndex.style.display = 'block'; + elements.transform_rotate.style.display = 'block'; + } + + this.subject.setAttribute('data-active', 'subject'); + var style = this.container.style; + style.left = '0'; + style.zIndex = '10'; + Tool.setActiveClass(this.id); + } + + function init() { + + var elem, size; + var layerManager = getElemById("layer_manager"); + var layerMenu = getElemById("layer_menu"); + var container = getElemById("stack_container"); + + elements.shadow_properties = getElemById('shadow_properties'); + elements.element_properties = getElemById('element_properties'); + elements.transform_rotate = getElemById('transform_rotate'); + elements.zIndex = getElemById('z-index'); + + elem = document.querySelectorAll('#layer_menu [data-type="subject"]'); + size = elem.length; + + for (var i = 0; i < size; i++) { + var S = new Stack(elem[i]); + stacks[elem[i].id] = S; + container.appendChild(S.container); + Tool.addCssClass(elem[i].id); + } + + active.stack = stacks['element']; + stacks['element'].show(); + + layerManager.addEventListener("click", mouseEvents); + layerMenu.addEventListener("click", mouseEvents); + + ButtonManager.subscribe("before", function(value) { + if (value === false && active.stack === stacks['before']) + setActiveStack(stacks['element']) + if (value === true && active.stack !== stacks['before']) + setActiveStack(stacks['before']) + }); + + ButtonManager.subscribe("after", function(value) { + if (value === false && active.stack === stacks['after']) + setActiveStack(stacks['element']) + if (value === true && active.stack !== stacks['after']) + setActiveStack(stacks['after']) + }); + } + + return { + init : init + } + })(); + + /* + * OutputManager + */ + var OutputManager = (function OutputManager() { + var classes = []; + var buttons = []; + var active = null; + var menu = null; + var button_offset = 0; + + var crateOutputNode = function(topic, property) { + + var prop = document.createElement('div'); + var name = document.createElement('span'); + var value = document.createElement('span'); + + var pmatch = property.match(/(^([a-z0-9\-]*)=\[([a-z0-9\-\"]*)\])|^([a-z0-9\-]*)/i); + + name.textContent = '\t' + pmatch[4]; + + if (pmatch[3] !== undefined) { + name.textContent = '\t' + pmatch[2]; + value.textContent = pmatch[3] + ';'; + } + + name.textContent += ': '; + prop.className = 'css-property'; + name.className = 'name'; + value.className = 'value'; + prop.appendChild(name); + prop.appendChild(value); + + classes[topic].node.appendChild(prop); + classes[topic].line[property] = prop; + classes[topic].prop[property] = value; + } + + var OutputClass = function OutputClass(node) { + var topic = node.getAttribute('data-topic'); + var prop = node.getAttribute('data-prop'); + var name = node.getAttribute('data-name'); + var properties = prop.split(' '); + + classes[topic] = {}; + classes[topic].node = node; + classes[topic].prop = []; + classes[topic].line = []; + classes[topic].button = new Button(topic); + + var open_decl = document.createElement('div'); + var end_decl = document.createElement('div'); + + open_decl.textContent = name + ' {'; + end_decl.textContent = '}'; + node.appendChild(open_decl); + + for (var i in properties) + crateOutputNode(topic, properties[i]); + + node.appendChild(end_decl); + } + + var Button = function Button(topic) { + var button = document.createElement('div'); + + button.className = 'button'; + button.textContent = topic; + button.style.left = button_offset + 'px'; + button_offset += 100; + + button.addEventListener("click", function() { + toggleDisplay(topic); + }) + + menu.appendChild(button); + return button; + } + + var toggleDisplay = function toggleDisplay(topic) { + active.button.removeAttribute('data-active'); + active.node.style.display = 'none'; + active = classes[topic]; + active.node.style.display = 'block'; + active.button.setAttribute('data-active', 'true'); + } + + var toggleButton = function toggleButton(topic, value) { + var display = (value === true) ? 'block' : 'none'; + classes[topic].button.style.display = display; + + if (value === true) + toggleDisplay(topic); + else + toggleDisplay('element'); + } + + var updateProperty = function updateProperty(topic, property, data) { + try { + classes[topic].prop[property].textContent = data + ';'; + } + catch(error) { + // console.log("ERROR undefined : ", topic, property, data); + } + } + + var toggleProperty = function toggleProperty(topic, property, value) { + var display = (value === true) ? 'block' : 'none'; + try { + classes[topic].line[property].style.display = display; + } + catch(error) { + // console.log("ERROR undefined : ",classes, topic, property, value); + } + } + + var init = function init() { + + menu = getElemById('menu'); + + var elem = document.querySelectorAll('#output .output'); + var size = elem.length; + for (var i = 0; i < size; i++) + OutputClass(elem[i]); + + active = classes['element']; + toggleDisplay('element'); + + ButtonManager.subscribe("before", function(value) { + toggleButton('before', value); + }); + + ButtonManager.subscribe("after", function(value) { + toggleButton('after', value); + }); + } + + return { + init : init, + updateProperty : updateProperty, + toggleProperty : toggleProperty + } + + })(); + + /** + * Init Tool + */ + var init = function init() { + ButtonManager.init(); + OutputManager.init(); + ColoPicker.init(); + SliderManager.init(); + LayerManager.init(); + PreviewMouseTracking.init("preview"); + Tool.init(); + } + + return { + init : init + } + +})(); diff --git a/tools/box-shadow-generator/styles.css b/tools/box-shadow-generator/styles.css new file mode 100644 index 00000000..07fd139e --- /dev/null +++ b/tools/box-shadow-generator/styles.css @@ -0,0 +1,938 @@ +/* GRID OF TWELVE + * ========================================================================== */ + +.span_12 { + width: 100%; +} + +.span_11 { + width: 91.46%; +} + +.span_10 { + width: 83%; +} + +.span_9 { + width: 74.54%; +} + +.span_8 { + width: 66.08%; +} + +.span_7 { + width: 57.62%; +} + +.span_6 { + width: 49.16%; +} + +.span_5 { + width: 40.7%; +} + +.span_4 { + width: 32.24%; +} + +.span_3 { + width: 23.78%; +} + +.span_2 { + width: 15.32%; +} + +.span_1 { + width: 6.86%; +} + +/* SECTIONS + * ========================================================================== */ + +.section { + clear: both; + padding: 0px; + margin: 0px; +} + +/* GROUPING + * ========================================================================== */ + +.group:before, .group:after { + content: ""; + display: table; +} + +.group:after { + clear:both; +} + +.group { + zoom: 1; /* For IE 6/7 (trigger hasLayout) */ +} + +/* GRID COLUMN SETUP + * ========================================================================== */ + +.col { + display: block; + float:left; + margin: 1% 0 1% 1.6%; +} + +.col:first-child { + margin-left: 0; +} /* all browsers except IE6 and lower */ + +/* + * UI Slider + */ + +.slidergroup { + height: 20px; + margin: 10px 0; + font-family: "Segoe UI", Arial, Helvetica, sans-serif; + -moz-user-select: none; + user-select: none; +} + +.slidergroup * { + float: left; + height: 100%; + line-height: 100%; +} + +/* Slider */ + +.ui-slider { + height: 10px; + width: 200px; + margin: 4px 10px; + display: block; + border: 1px solid #999; + border-radius: 3px; + background: #EEE; +} + +.ui-slider:hover { + cursor: pointer; +} + +.ui-slider-name { + width: 90px; + padding: 0 10px 0 0; + text-align: right; + text-transform: lowercase; +} + +.ui-slider-pointer { + width: 13px; + height: 13px; + background-color: #EEE; + border: 1px solid #2C9FC9; + border-radius: 3px; + position: relative; + top: -3px; + left: 0%; +} + +.ui-slider-btn-set { + width: 25px; + background-color: #2C9FC9; + border-radius: 3px; + color: #FFF; + font-weight: bold; + text-align: center; +} + +.ui-slider-btn-set:hover { + background-color: #379B4A; + cursor: pointer; +} + +.ui-slider-input > input { + margin: 0 10px; + padding: 0; + width: 50px; + text-align: center; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +/* + * UI Button + */ + +/* Checkbox */ + +.ui-checkbox { + text-align: center; + font-size: 16px; + font-family: "Segoe UI", Arial, Helvetica, sans-serif; + line-height: 1.5em; + color: #FFF; + + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.ui-checkbox > input { + display: none; +} + +.ui-checkbox > label { + font-size: 12px; + padding: 0.333em 1.666em 0.5em; + height: 1em; + line-height: 1em; + + background-color: #888; + background-image: url("disabled.png"); + background-position: center center; + background-repeat: no-repeat; + + color: #FFF; + border-radius: 3px; + font-weight: bold; + float: left; +} + +.ui-checkbox .text { + padding-left: 34px; + background-position: center left 10px; +} + +.ui-checkbox .left { + padding-right: 34px; + padding-left: 1.666em; + background-position: center right 10px; +} + +.ui-checkbox > label:hover { + cursor: pointer; +} + +.ui-checkbox > input:checked + label { + background-image: url("checked.png"); + background-color: #379B4A; +} + +/* + * BOX SHADOW GENERATOR TOOL + */ + +body { + max-width: 1000px; + height: 800px; + margin: 20px auto 0; + + font-family: "Segoe UI", Arial, Helvetica, sans-serif; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; +} + +#container { + width: 100%; + padding: 2px; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +/* container with shadows stacks */ +#stack_container { + height: 400px; + overflow: hidden; + position: relative; + border: 1px solid #CCC; + border-radius: 3px; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +#stack_container .container { + height: 100%; + width: 100%; + position: absolute; + left: 100%; + transition-property: left; + transition-duration: 0.5s; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +#stack_container .title { + text-align: center; + font-weight: bold; + line-height: 2em; + border-bottom: 1px solid #43A6E1; + color: #666; +} + +/* + * Stack of Layers for shadow + */ + +#layer_manager { + width: 17%; + background-color: #FEFEFE; + margin: 0 1% 0 0; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + float: left; +} + +#layer_manager .button { + width: 30%; + height: 25px; + margin:0 0 10px; + color: #333; + background-color: #EEE; + text-align: center; + font-size: 0.75em; + line-height: 1.5em; + border: 1px solid #CCC; + border-radius: 3px; + + display: block; + background-position: center center; + background-repeat: no-repeat; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + float: left; +} + +#layer_manager .button:hover { + background-color: #3380C4; + border: 1px solid #3380C4; + cursor: pointer; +} + +#layer_manager [data-type='add'] { + background-image: url("add-black.png"); +} + +#layer_manager [data-type='add']:hover { + background-image: url("add-white.png"); +} + +#layer_manager [data-type='move-up'] { + background-image: url("up-black.png"); + margin-left: 5%; + margin-right: 5%; +} + +#layer_manager [data-type='move-up']:hover { + background-image: url("up-white.png"); +} + +#layer_manager [data-type='move-down'] { + background-image: url("down-black.png"); +} + +#layer_manager [data-type='move-down']:hover { + background-image: url("down-white.png"); +} + +/* shadows classes */ + +#layer_manager .node { + width: 100%; + margin: 5px 0; + padding: 5px; + text-align: center; + background-color: #EEE; + border: 1px solid #DDD; + font-size: 0.75em; + line-height: 1.5em; + color: #333; + border-radius: 3px; + + position: relative; + display: block; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +#layer_manager .node:hover { + color: #FFF; + background-color: #3380C4; + cursor: pointer; +} + +/* active element styling */ + +#layer_manager [data-active='layer'] { + color: #FFF; + border: none; + background-color: #379B4A; +} + +#layer_manager [data-active='subject'] { + color: #FFF; + background-color: #467FC9; +} + +/* delete button */ + +#layer_manager .delete { + width: 1.5em; + height: 100%; + float: right; + border-radius: 3px; + background-image: url("delete-white.png"); + background-position: center center; + background-repeat: no-repeat; + position: absolute; + top: 0; + right: 10px; + display: none; +} + +#layer_manager .delete:hover { + background-image: url("delete-yellow.png"); +} + +#layer_manager .node:hover .delete { + display: block; +} + +#layer_manager .stack { + padding: 0 5px; + max-height: 90%; + overflow: auto; + overflow-x: hidden; +} + +/* + * Layer Menu + */ + +#layer_menu { + margin: 0 0 10px 0; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +#layer_menu .button { + width: 100px; + margin: 0 5px 0 0; + padding: 2.5px; + color: #333; + background-color: #EEE; + border: 1px solid #CCC; + border-radius: 3px; + text-align: center; + font-size: 0.75em; + line-height: 1.5em; + + position: relative; + display: block; + float: left; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +#layer_menu .button:hover { + color: #FFF; + background-color: #3380C4; + border: 1px solid #3380C4; + cursor: pointer; +} + +#layer_menu .delete { + width: 1.5em; + height: 100%; + float: right; + border-radius: 3px; + background-image: url("delete-white.png"); + background-position: center center; + background-repeat: no-repeat; + position: absolute; + top: 0; + right: 5px; + display: none; +} + +#layer_menu .delete:hover { + background-image: url("delete-yellow.png"); +} + +#layer_menu .button:hover .delete { + display: block; +} + +/* + * active element styling + */ + +#layer_menu [data-active='subject'] { + color: #FFF; + background-color: #379B4A; + border: 1px solid #379B4A; +} + +/* Checkbox */ + +#layer_menu .ui-checkbox > label { + height: 15px; + line-height: 17px; + font-weight: normal; + width: 46px; + margin: 0 5px 0 0; +} + +#layer_menu .ui-checkbox > input:checked + label { + display: none; +} + +/******************************************************************************/ +/******************************************************************************/ +/* + * Preview Area + */ + +#preview_zone { + width: 82%; + float: left; + +} + +#preview { + width: 100%; + height: 400px; + border: 1px solid #CCC; + border-radius: 3px; + text-align: center; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + cursor: move; + float: left; +} + +#preview .content { + width: 100%; + height: 100%; + display: block; +} + +#obj-element { + width: 300px; + height: 100px; + border: 1px solid #CCC; + background: #FFF; + position: relative; +} + +#obj-before { + height: 100%; + width: 100%; + background: #999; + border: 1px solid #CCC; + text-align: left; + display : block; + position: absolute; + z-index: -1; +} + +#obj-after { + height: 100%; + width: 100%; + background: #DDD; + border: 1px solid #CCC; + text-align: right; + display : block; + position: absolute; + z-index: -1; +} + +/******************************************************************************/ +/******************************************************************************/ + +/** + * Controls + */ + +.wrap-left { + float: left; + overflow: hidden; +} + +.wrap-right { + float: right; + overflow: hidden; +} + +.wrap-left > * { + float: left; +} + +.wrap-right > * { + float: right; +} + +@media (min-width: 960px) { + + .wrap-left { + width: 45%; + } + + .wrap-right { + width: 55%; + } +} + +@media (max-width: 959px) { + + .wrap-left { + width: 30%; + } + + .wrap-right { + width: 70%; + } +} + +#controls { + color: #444; + margin: 10px 0 0 0; +} + +#controls .category { + width: 500px; + margin: 0 auto 20px; + padding: 0; + +} + +#controls .category .title { + width: 100%; + height: 1.5em; + line-height: 1.5em; + color: #AAA; + text-align: right; +} + +#controls .category > .group { + border: 1px solid #CCC; + border-radius: 3px; +} + +/** + * Color Picker + */ + +@media (min-width: 960px) { + #controls .colorpicker { + width: 420px; + } +} + +@media (max-width: 959px) { + #controls .colorpicker { + width: 210px; + } +} + +#colorpicker { + width: 100%; + margin: 0 auto; +} + +#colorpicker .gradient { + width: 200px; + height: 200px; + margin: 5px; + background: url("picker_mask_200.png"); + background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), + -moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%); + background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), + -webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%); + background-color: #F00; + float: left; +} + +#colorpicker .hue { + width: 200px; + height: 30px; + margin: 5px; + background: url("hue.png"); + background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, + #00F 66.66%, #F0F 83.33%, #F00 100%); + background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, + #00F 66.66%, #F0F 83.33%, #F00 100%); + float: left; +} + +#colorpicker .alpha { + width: 200px; + height: 30px; + margin: 5px; + border: 1px solid #CCC; + float: left; + background: url("alpha.png"); + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +#colorpicker #alpha { + width: 100%; + height: 100%; + background: url("alpha_mask.png"); + background: -moz-linear-gradient(left, rgba(255, 0, 0, 0) 0%, rgba(255, 0, 0, 1) 100%); +} + +#colorpicker #gradient_picker { + width: 0.5em; + height: 0.5em; + border-radius: 0.4em; + border: 2px solid #CCC; + position: relative; + top: 20%; + left: 20%; +} + +#colorpicker #hue_selector, +#colorpicker #alpha_selector { + width: 3px; + height: 100%; + border: 1px solid #777; + background-color: #FFF; + position: relative; + top: -1px; + left: 0%; +} + +/* input HSV and RGB */ +#colorpicker .info { + width: 200px; + margin: 5px; + float: left; +} + +#colorpicker .info * { + float: left; +} + +#colorpicker .info input { + margin: 0; + text-align: center; + width: 30px; + -moz-user-select: text; + -webkit-user-select: text; + -ms-user-select: text; +} + +#colorpicker .info span { + height: 20px; + width: 30px; + text-align: center; + line-height: 20px; + display: block; +} + +/* Preview color */ +#colorpicker .block { + width: 95px; + height: 54px; + float: left; + position: relative; +} + +#colorpicker .preview { + margin: 5px; + border: 1px solid #CCC; + background-image: url("alpha.png"); + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +#colorpicker .preview:before { + height: 100%; + width: 50%; + left: 50%; + content: ""; + background: #FFF; + position: absolute; + z-index: 1; +} + +#colorpicker .preview > * { + width: 50%; + height: 100%; +} + +#colorpicker #output_color { + width: 100%; + height: 100%; + position: absolute; + z-index: 2; +} + +#colorpicker .block .input { + float: right; +} + +#colorpicker [data-topic="a"] > span { + width: 50px; +} + +#colorpicker [data-topic="hexa"] { + float: right; + margin: 10px 0 0 0; +} + +#colorpicker [data-topic="hexa"] > span { + display: none; +} + +#colorpicker [data-topic="hexa"] > input { + width: 85px; + padding: 2px 0; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +/* + * UI Components + */ + +/* Property */ + +.property { + height: 20px; + margin: 10px 0; +} + +.property * { + float: left; + height: 100%; + line-height: 100%; +} + +/* Slider */ + +#controls .ui-slider-name { + margin: 0 10px 0 0; +} + +/* + * Output code styling + */ + +#output { + position: relative; +} + +#output .menu { + max-width: 70%; + height: 20px; + position: absolute; + top: 2px; +} + +#output .button { + width: 90px; + height: 22px; + margin: 0 5px 0 0; + text-align: center; + line-height: 20px; + font-size: 14px; + color: #FFF; + background-color: #999; + border-top-left-radius: 3px; + border-top-right-radius: 3px; + bottom: -5px; + float:left; +} + +#output .button:hover { + color: #FFF; + background-color: #666; + cursor: pointer; +} + +#output .menu [data-active="true"] { + color: #777; + background-color: #FFF; + border: 1px solid #CCC; + border-bottom: none; +} + +#output .menu [data-topic="before"] { + left: 100px; +} + +#output .menu [data-topic="after"] { + left: 200px; +} + +#output .output { + width: 480px; + margin: 10px; + padding: 10px; + overflow: hidden; + color: #555; + font-size: 14px; + border: 1px dashed #CCC; + border-radius: 3px; + display: none; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + + -moz-user-select: text; + -webkit-user-select: text; + -ms-user-select: text; +} + +#output .css-property { + width: 100%; + float: left; + white-space: pre; +} + +#output .name { + width: 35%; + float: left; +} + +#output .value { + width: 65%; + float: left; +} diff --git a/tools/box-shadow-generator/up-black.png b/tools/box-shadow-generator/up-black.png new file mode 100644 index 0000000000000000000000000000000000000000..110826af6bec58b88b5abbde25390b3c0a385039 GIT binary patch literal 158 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!93?!50ihlx9Ea{HEjtmSN`?>!lvI6;x#X;^) z4C~IxyaaMM1AIbU-3xqxOdt@;=9~D%t978y+Cnq>C_wYG1 uW}Sq!2)3;ffV7`|WD^LWEt R9}6^x!PC{xWt~$(69Bk^H3|R# literal 0 HcmV?d00001 diff --git a/tools/color-picker/alpha.png b/tools/color-picker/alpha.png new file mode 100644 index 0000000000000000000000000000000000000000..a28b929a4adde81339fca7295d680bfc3e6cd6ff GIT binary patch literal 105 zcmeAS@N?(olHy`uVBq!ia0vp^93afW1|*O0@9PFqoCO|{#S9F5M?jcysy3fAP*B>_ y#WAGfR< literal 0 HcmV?d00001 diff --git a/tools/color-picker/alpha_mask.png b/tools/color-picker/alpha_mask.png new file mode 100644 index 0000000000000000000000000000000000000000..8863bb615050eb500c0fcec570348453c71a52bc GIT binary patch literal 1152 zcmah}TWHfz7|s|@nVTpIZXz~BAF9}$=%=u4=~Y3hRTQS#s88TXJG@X4@%l z2;LqP@ok$o1O*WlLA)S3P!z<=oG60G2HvV{;KSw}oG05_eXtsmoD1Lg{g?A4`y1-l z78folBnYB7T*pW7co#p*<`m#};KZ z>oP!NSAA6KYL|R66{sRBlN=UM0TRii+M$_T(oaq4a(HfS(-b)cLG6BOI;oh@Kn9@! zNUzi5kX#HyvaFLS^Rg_nnsmDuH|@eV>tM<_FUz^h$(f77(G0nTi}1BGvGB@IwIZZ* zG@VE!oC%K;8gZKO`Fxg!+wH&zhndolm~?37@{9rxOvzAmq(F_d6vbxPiTo7Kbh-pp z&&q1%Oq+1S=%lFAjMHV6lmQCDzoDv{MVlxBe&_pFVKbW20UZG*>@*~Na4pNNP&yYh zfQXVZvNFg%<=ateHsEBoOBP6jpF5ip;U)EMLRA z-At$qcRl2(s43@bLqWc_%oFtbyul2Yhf=2sG?d}Wzqy{AT+0fojwAEHP__ZN)_^KG zRWhgK&c&5eZ-y)9&IOl{qYfG;Lt6*?$3bVduzRd&*0y+&H9pX=+YM~%lD+S(k76Rs z*F=*q#-4ASx63s@G}QKT!H*36J9TN(+*HY) z=jpe7r_a1I@1*N(#kRAbE{+eyY_qGDjY^40xMS?mmEnQQJG*aweH{3*`NzYZ2gcXF z{ zBEH9qdJm`9Uyz8Ci%z(DewGGLzxnoLw4}#A%U*P%`|hEYshbmA0l6-(F#r8=MqYP} g{vWk^_jMwl2;ExTX&!jxxBdy?P(6Qs&6Zui0I_G0uK)l5 literal 0 HcmV?d00001 diff --git a/tools/color-picker/arrow.png b/tools/color-picker/arrow.png new file mode 100644 index 0000000000000000000000000000000000000000..88d8479b120cd7d53f5ac22d98867c9ba3dd1292 GIT binary patch literal 226 zcmeAS@N?(olHy`uVBq!ia0vp^JRr=$3?vg*uel1OSkfJR9T^xl_H+M9WCijWi-X*q z7}lMWc?skg2l#}zx)=B?UAlDd-n}zt&Rnx*4UpWmYuDn%i-C-_Yu9evxN+ysoj~@i zS+jQU-o0+!Iv|^&_rW)yc7c*0zhH(bZoi9P`)&VKnBesJwM))9osxc_oS~7NaXlc$Q1+a0(sr4c QA3)6vp00i_>zopr0IrT!*Z=?k literal 0 HcmV?d00001 diff --git a/tools/color-picker/arrows.png b/tools/color-picker/arrows.png new file mode 100644 index 0000000000000000000000000000000000000000..30d630fdaf96be7baa2d7da9de6cda337a5ab769 GIT binary patch literal 372 zcmeAS@N?(olHy`uVBq!ia0vp^3P3Et!3-oF?)7E^DVB6cUq=Rpjs4tz5?O(K#^NA% zCx&(BWL^R}2?0JKuI>ds_4V~NH8qbOJ*udvxOM9mko*7t|MvEFhhKoOt9UUD&Ms00v8)Hrk&@Q=>AirRS zE!#K+*|}KG9yrLmP57Xs2$RsoJ;%72xespTIeO{Vt&kF+$_`H##}JM4y%XKV4k&Q2 zn(h_9EPdzyG*2;>+e+*9ojcLoF0kMKPT{+x>GF@S1;5+=aYN;%$5StUB+Sy)5{JL;)i>KRNHR&Y@T5)2sH3(kgCJ?$yhWWd0DfuVJq(Mlep zW*@J2^$r?2CzSNN!;sC8u{m44r4QUcHc9=(X+s&r7zE%b))eIqb2r s!DDxhk!SVc$C+}kj*Av-3H;A$&GLn{KYH$pG@vyMp00i_>zopr0DE%P0ssI2 literal 0 HcmV?d00001 diff --git a/tools/color-picker/color-wheel.png b/tools/color-picker/color-wheel.png new file mode 100644 index 0000000000000000000000000000000000000000..49020d9ef3187ad6a4e9ffb92ae75f3de4dbb34b GIT binary patch literal 1985 zcmV;y2R`_TP)Px&08mU+MMrQGxz+(KsDBhW|W#BQbb?*cAP6KfUlL zxZ^bc@O%IAbCu;HXU-jg(H#Htm;dgD_$_^DA6@o0kxRrIu1 z_5c6W@4(;F>`wpr?f>%a|NZp;|IhOKp8e+XFK?&*?e_op;QRiq|Ngx9&*=a1`1#%L z#OGZt#Lxfd=>OZ?N>!vUnyO|)o4Mdl|MJt-rO)j7a;4Zw{ri+RVATA?+T-+FDsI>y zd)fZR$p6{Ee9UGxq^D|2z5mU&iP)E0%DFItsXVWsN4S|@!-G=3jpMV}Ohv5q{DnnV z(i@1}8kO8pQOeu!PauN5AzGXrqS-8tsQ>E6;=JFm;$$YO$D!YJht+>X$Hi^UtpD!g z|Kr{MsHteiaynkIeL$9FOr|Gpw$<)%{-29AUc_8Z!;aBd|HHg|OSX_ovLw3I|L2iP zxUh51ka*Ld|Jcs|S&g=**;xGea5z7dcx9Vg4p522qtF&>mp%S~ga1TaUU;(lkHM95v6ipJx1!41&&JN= zsP?SV#ssI20SaecOQvewpC;|-!0RsjSHAVgm4B!3#VRt(cX4;?a z>qjK~CdApghB$q*#-`(IPo@0YF^=WXY~8Odn2vefPUf$CwDZaKTWyI+RBwL|xSRNWc`wbVX@z4VA9|5lRG(B7g3Dk#(D6GTE+6 zmt0E4RLEp_ygxf%c5`&DZ1&P6H&S__A<|E7WfevTuD;50crKe3^yZE0JgF4i3L;Uf zh+G|cZL%PnMqBjH;%%W)sYC*%U=5bYC@diZBO|X95PLA~-o@8zqosU_L=s(4P*|u| z7p{rK6J`DT+8b^YkQTIPM(sg?l+VXt;hu(uMzwl1o=EH9;5ANz_HhwzFo)C$8Q zA_N57MnI7$Jw4rern)L6xt4p5XnpwVc~^n$C1n@4_(_tON75C}*J zPNV7T8Z7RqN~y?-bEo5w>AgQesKh0|U;D1=H3DHJkU{~wosJ%7Hvy#!naI1*A&N)UH{ zLW@G7XpzbG?(Oftc=`M9zTNjz)2EP~yL38ThCA6At`Bg{2{KHzo;+E0@lYBDk2W>o z&Y;sBm`DB=ln3=|&1Q3JYgt)L%=Rx2rR9$|?>j1&%XgM`8w`eB2j))vk_*M$wUDx7 zG4X9}!}fZQy5?pRz|wA`(FkzP1f+4qdM;NFPOGg<8r$U2ksNC>$xE|OWo8-;Igd{E z!xJ2fUT-{>FE*8v>u?SS%JXz{;c@n+TYD;>6ai zTQZF~4?DCC@|cz*wur^?ZMR@-tj+c{z*2{T*cf@{G)F9kZyqM##^h03O%1^8ocXu+ zcHncT<2l&k*v9~Nbc`NWsQ_l@+{5_Sw0P**$~6Zp!x z%3)aTwB7mR8}jnheval``%&ly|e7SvHIOO9Is1W z{x0>7Gm=jA{OIGmv3&T!`)*S&(@_?S!SJCvIXO8yyLfted3m}x!wHqjV6a$pIzlIh z4=^g#2_t@f!NGT73HI{?4IHyDWD%kwosN|R3>BSSAh06};uWW#=;XcFhB%0uW@ppf Tyvl&M00000NkvXXu0mjf?++qu literal 0 HcmV?d00001 diff --git a/tools/color-picker/copy.png b/tools/color-picker/copy.png new file mode 100644 index 0000000000000000000000000000000000000000..1ffaad0830385700f650109fa2c25e2ad4b148a6 GIT binary patch literal 2215 zcmaJ@X;c$w7R|whMMa4W$kI76h=@Rv3J{VQz(5E>8`Ka4br32^1tKIBlEM^VkGQY| z5dfdFmo z@?T_PZGyw$76q*13b2ufeanpIV}JkB19Py!3h@g=f?+A50aXx=BY{N_F+dJRK>`Sr zB*ZmAY#eS5NhSQvrZTr;`CUcRC$#Ceo+?jY7pi}C z35%wZNLd0d?^`TveMNt4IlR2e9qq$%R7j=RH0Z|u)+HP8b z3#r8_nG%t~3gVO^D1ze=PZE~tA0^0@GqMWxw`0N%jDmtn3P7e#l{5|H^Z!3oE}ucG z5drj{eE+AgT9}}OC;~_g$E(Cx6=EoW>q){C$TFFP#q^-kd|bIaz|YMO0Q_7T42F*nmErE; zPIY&q`ua|Dxv)514k?gnu4IPmN1c^BWd*qsi_C>ovYn8Gr-J3guO+i&v**H{Rqq>D zGHWhezgf8yEE&pFWB;qs(_5H(rlvEt#TGNhhZLCGRhX^cC$F-=;pW){a5+M>`{%HT z_1hqG@8POpUB};*=C@YFtaO|-&uh%F-?pD=Ux)L0y({v)))}am^wd4Ad${jC=(Q}u z;@Mqdee~14*6kx#^&_|@qOkL~)w`Xuas}JEX-Pf3Ni~T#kLz$wH?Do^JzVg-_xqZj zh}{K`Mhp9&sVZ&rOt$E>r&hJtHgc@WntPoB@B{3{n;UqlrKNrj0gkFID0%nb`%>PO zAKF&-Rv7kPe`OkOmzN0Aj-D?(apDA5)Ef5!7)%zh=nTdgx|>^a%BBO}s*m3G@ma4% z$_FB|z*4DY-inolLD%f@TJTrnb2uL({qrbuZRNh0FJ-y;D69SI2{aQ;&+;c4EJBqSLZieHQ`HfZca$(jg*d}~WnU<}u6G&VMNAu}@*-Dp7w3Gp1MIOG6$ zEZ$O@aVpx~BY9$;*W0AY<`|b7C%Q|;goA>+=yo{iPtG~`1^3uTbh-Wpey}w(^mjBoJiJ^WvaO!;SKVJK65k#@{OUlhOR8a? z*S@ZMnMXW6hFnQywsybH(Q=GA#3jpa1%kO9TAGTM>5RYoe0cmK@TRP^jx^g zM03qkn(`e%8c+6l`aT?#<;offJ*0sXkd*fMFY;t?av$GcG zh)cph2v^t-JyJ4kjZfdTlF~%O^Xm(mkMwr>6d6*79h?^*Rc@VqHsizSE{_EV+qeyvc$U`=EGt04hr?a`y_X$ZHrWZX zG8={2Z{EGD?%!Eu3EXFkI+MpgUcY*_QSzjvwRT+oUf0mna50Wx45XFWW-kZs9J9;0 zEh|Voe)&NxaPH+`Va<}Z?l*z4(os7+M`N9nm=WE3X;qo4vU!sf5<6po%`GqLOTYI>DbgcBUXcQo7F2n1x%(*d_X=r_n7P|8^MLk zf_+2FZL=dg(Vm{3S08fiohcMwHlZe^Eom?U4aPyK*8B5dHRb}Pn z24{tV^%+*J9?al9Twe9|{=5|df%e>y$%zFzaZIwHV{xs9pD_SEX+L98`S^!~(oH)U e=53P(3vt~JOJf@QCyq~D9RmDC8rI^tG literal 0 HcmV?d00001 diff --git a/tools/color-picker/drop.png b/tools/color-picker/drop.png new file mode 100644 index 0000000000000000000000000000000000000000..22136172c75523c6d8b974ea1d3f0f16a6a23861 GIT binary patch literal 226 zcmeAS@N?(olHy`uVBq!ia0vp^4j|0L3?#3!&-4XSEa{HEjtmSN`?>!lvI6;x#X;^) z4C~IxyaaMM1AIbU-3xqX%$PBA=FFvj3ts~TnM#8Ef*Bg$=+yNAd6}Lrjv*GO-(Eh* z%b>{N61XFRVB7x$g=V$<2J_BA>-m(%4`4t=Px#Do{*RMZmzo$H&L&>gwa;uCLM$_XK}GOD;8grs3Ou>`kvcC^C}1hGXCC7jVs`dvonUHrYEb*DqcHQ?FNQYT1N zmFp&CL+f(6u;8W9_{B^M@X{=&RVItj3PT**=i_mJDYRY6t0LKjnwF>J@gq%8r<1u5msf%rwb!F zYEYD8Z8*W*Z(B~B|D4imzoB)Au+qPYvq^S*pBCp@3GU0(cG63e^~%Pw%ASz`Q>5lW zgn7Ts?ClH(?t@~ZjT_4a(j-+3B%@XmuVkcUR4MN>aVd=`LL-U^Oo z1gW8gi<^kt?OiW-5Eu_|o`h#LH6~WA{5Ko^D@Arb{n>=IlYsQQCQ)73nN*3@$OJKQ z=TMRiV8|-OFXd$HT9J#pLbH_5!z34l<3zZHLzNi75Vj$vLXzEV9-&8^tE3a!0{TZ_ zMc00vP1vwtUe$EGr}y>RQO;4DL0|A5<#w`-?D=gaCsB9*S57lm%H(4|*l3wy#936m zBZ84JRp5;rtY*1gTb~E}{!8FAR3~T3WgGaT#TBQoD5ROWJwFrJw9ah@!$bRD%?N&| z63o{k*oOj4hLQ!h_KK`oPkmd(XAf8Kmlm6%0`u60o&r@wb<$?RLF3cEO~)luAJcma zm;{;)ezFGr#mVBb$9r0rF4q=1lUX%~3qlszseg8EmXG_jsHIS6BVK^FOT>TH6Zq3u zi?2PeGl3*5`CToNNI9qPYUw1-G;0A%&x9LXG?J<}W?#JTt#H01mOa#UMXBor;qR*v zkG?v=WY$`@dJsN#-3;X-iMuaGq0UY*0k%NV6;XD3=hV?2XlP3gGMH|*mca+=nK(QM zTbhMtx^u7Xc)B&Wn3gEeqG{~TP$o|2$Jn6TbkN4f>4Vj)h7dlAWg#sJlQ`}!?9=LH z0;s4mDx$|eoTuzBX!*tGajJ*oM{g5Sfd5JwtVZ!SC|W9^3)O>=E5g&giEU%*A^0lQ z&HZ>$syLhmH$MIeJp_J8PhNG%#+qLI#9{T`b%F>6ESJ)&-CL$8qSR=`G8k{NLTkhk z4`_}dwA+S=_~9_FFNQ?wz-MN}Pc+A5vaz`|bf!+0>p#V=F|wla&#BW&=Nw1IXuV<+ ztW9L~Ni|JI>xomHn(2~@R&_zA;$-B!*nS)|zeHJnw0kW4<~0W|EhWD5%%@x64YtRb z%=tXMRhboDi?9xT#tg4Jydm^!g(}v7X(ihCZeH@Zp%I|H+f8dhEl$=F{rG$8aVTF_ zbUb*9omh0T9l;Wd(bHUP78}fMae8JTcA!@Y$xIktJkJxvHZ?9J_&+|tvX2Akz>Ow& zgLas2@_6fkMxVc4Q3; zK-_ad_8w4Z8_u?vPRxZevqR~R%=Z`4HO?xYnLyB{Z~Mx`?JJhV=4haZ`X{f}(%iOn zg%1dTl9MiQ30z8cvLHl4@^}Rh0428@fVhBYcLNajLX^EBMNoFL(u=a&=|ZwZ$4NJF zthig-wcKtylV8xur2GD&B5tR#8;g2@USoy>;yk{``R4ZgO+H(=>WSVjv5uCK@)W$SO!X*Yf#vL?$W85V zWc0*RQF9k%!tt$YgII{}EAGriHL>h@a~b7)XC=qE9})RW<2MS zWH}~y{teNA3Dx>Nss=SnM)wAlEd?zkZioqEAc$K6-w{1Wu|iwRfylxM|1hZPfT&Oi zX{-=Wv(`e4>U^6$`8rkoZ(O^6=!4S191`8-`Pq`}?qrft5%ky3_XQ(7K(UNSa4q@` zvp&n_Lm2qYaQ?4UjR_5#JoE7WNUWf0?8^#Gk?WQu-}KArLAXv1eaFzJod;(&O% zV4&r3fu((lR#w02(~4<7sW8*|f}%!NNEglinc>eD`@e^?xIA40@r2g}tNnrsYbJ2m zaWv642&u<`#zk_));dq#G?i6Bj<1uD^Y=p}QDv*QuUa!s4BGNgm$<)d4V)U*1^2#f zd0(cHE4g*8QHI11X(L-T8{v<>+ijJZauLP}CoUZ9ODd5_nTs8vy^#TTZxB1!yW(~E zelj33J}R>9v&mY>yT}^U=x0W}%$RQ5v6?Y{>O+o}z=_TbT-N$KOH;ta+|74PHn;@S z!RmHw&)J2W*>~@gsUB9!9-EHKQdC)^@}}iT)+00ZTzp=QSriJf6f-yNQKoF{DD(B{ z0+oAmwe5Cj>fh(AXkM-BebuT@8SxLQA_%Mm7J|4bWwEd?HELTG!@Io zt6F35tPY4vDn{cKs)vxS~1qZ*cq^p;R9aUg4pyiAA}}v&?1$uyOLz$>$nhPy_TBdm6)>hdVX+(O zXez$3`)1()`_sb6dTBg1y381uEp5miZYc+%C~z8rHO!SJO^aZx%Fjtlf;PIc_m7UC z+@mh1?CCb8(ON9uOxRGq{lHR!IZk$XdCBdi1|3*@`2~4|;D#<=LoaY@}5V$DNt{#}g)AkW8q< zDGM~0DS~st^@XmHABRX>`mkHHnI#z>k`s!IcE$tzFKtooIjmPiQKt>_|H5!i&+Uqex)vL?B#3$uj<0k6$a6{P$PMo)4YucoYrRlB*ilk`Nz&M%3);YrdrOLC6F1c* zaRbG~t3qCvg>iZtF6d;OD`NurDv=KZDUAP`B~)5Uhn(Pv{#>{u{BDtp4@zw*Ypn8& zM4A?h2}(@KMEC0QZ-ILu_6F%O6>M#Hro{P@{aRH6;VK9pp(rp}AN4xKkE|kyc2e&C9DwxI{$g%;q6nTnU~%nfY--WVx=}6PV4%(Tw9+Y)~-&-OKr` zs11ct{6vkEuA)ht(v>q9hVBd|7Iz6TVP=<@Ty+nk}sD#LHtd*a@6To1BbxI+tx5p&AmUqU{>VG#@DNf z+qVlhW9O_^`@rJ=hG>R7m^{!=w7OmJ{=hW7pUs1(L0*?n2k=W8*E4`?m{?^W zZ+{t%|**adq7ND6L zSkBY)x00hiiFK^5w1*G!&v1t(21r^hiIV{2I?VDdolrv!7L2iBBdI|KmNo-+=1^rYXf*=%HIVQn(1wwkO2qaCTL#cUt2;p4GMs)x5YA@ijVtiUus540aH?Bxyd*$KT+J0D$a=U7 za)B}xoC_uJKiF3v8%Q2PLbiiwx6Tq&3;GQ>MH7TuY36nh{F9VbZ42IDW!fzS`u$2J z4~N5U|0mQz|8zzz?VBuKM6s!_GYQm1#&MZhTHoE|uM8idO zq0Sx;6(HdPBwUhwRE*SwW*^bpbn~d%?g=>{F(tuHFyZ2+WGE!rdCu-_{GR9bb98!C zH|m5Pn-w81o$Q^{ANw)zO}GD}0GZD9kAGXpsXq#t)5~3Gx$bCuq4m3?hbx56KT6%x zx4lyT|0(TC#ro69l?vrgr`?&by2$g~Y000?b(7~mk^bpqH@UgU;oB*>o0_*%Hs?$z z-4qpef_+njn1|TOph&&dDQjyqW~Z!vGvV&1jc=y=KiwcRHTl!xKU(Tfx6GN`UF5p% zwC_&k?@uS%Onv^Tf6v77D);;s@>PERF9q)|w=S8y?y~4EkLNE;<}QhU!EWW|{?ee< z>-Wp#TfWvA+PRDPGj-Q4db(wb*hU4h&buo z{D`1dZo{$%T2YiCO8E^M8pAe_?VGlA2{QSAiF%)!8U d@?YUUqeNvw_<^(EBY + + + + + Color picker + + + + + +
    +
    +
    +
    +
    CSS Color
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    + + + + + diff --git a/tools/color-picker/lock.png b/tools/color-picker/lock.png new file mode 100644 index 0000000000000000000000000000000000000000..9a5a5043aa1ef584709c12316e3e65b44ef23cb4 GIT binary patch literal 1979 zcmaJ?dstKDAK$nX5*UI*G_b?Gp|LAtuwzrk27)p!17T$#hwZQ($Jtrifn6jccrZ$M zxTYe7xiYMtfN>32!LojUQbIwb`~s{5N>s%A5A_=j-XkRW*5nu4(c`dQ6#v`P7B9@8kAuUW2$gvCr|X00m{!4H@pwGD2AfSI5Hy`pjY9^STDNXdK?Lh$T10~* zm>RGvLK#>#&ZiQQ{+R-*c_ORUJuVYbFoprrFj#b^J*7pUSp4r$6n%o$;S%_-c>hsY zmt@qy3<<2mvb8dzahdDvt~8)f3qv@jO~SCO#VW=tF&xt=F%2M0D{AaYR12#E ze{1yO6)`>b&P`EK-znoe18%ioiw=`^X+f1P|4O7eh3;UBi$oQ|iZ z9+^_4$LEiB?0A-3`uXM2mI+dEql4AuC*fAgio%>5o$e+Z`Re_`$YXc%CT4S2srLE^ zH-ZfbM{et;SC>rl!qPtTdCE;VJwkamYW?u_(#~&FdO~_u^)yA!|H1h^i@OU1!I&3j zuUu*Uy5{VqD3$8dxyBYR&C0pFF8$Gx!ja_n{`2(R4btYe>pyzUlC2J}cs!gj_V9X& z`*Yjoe^i|o^st_}QknxiaGpPZX6)1tXGV=}10@BfWY34nF+)VkE{s(7lhfpv1&933 zTFv>_nz&70e>d&xnN>ZCo_Oz6+jAb8s75#~!B+ZGZ`jlK*VkMMg$^4doEes@$76F9 zep#pOR=2Y+bhS-f;&bdMUd<{?N)m=Uq0*-0N8fWxIyo{)URER3D`N&)9<`r{gX@erwmJT{o%r zD!6T&&`_xkL(vk^2MOYFi^W1I?MO$-_T&U1s3 z)~0Q&9#v)`o7yYxeOR7Zv8ODAoCCO5&sZb3e&)I3-D#E3&yt*y^4cHy>wVlZI&k55 z_=)(7x9;WA18pMJke_SemXLMjeI8@jmbjRh!1GMbZiC|+ulwbM`qt0I#>Fw9Wy>|{ zWdD!I&DneR?K4Lls5w^_TNka@x9=`LX1!;XoIlXreK4f5zietM^F}^$v+U8bM00mv zz=}?IDkJ!0RAFgpsh9haAk-o){!p@6Xid61JY2OoZD0m!eJ~W(>NO-xv?_;$C&PU{ zoj+H#Zb;Z{H?KCVxpjEKV4IYK@|%PHHnwS|Dt$E{?~~v3K)o8?=%4X76Ki8b@!FlX dnt?~IOj5;-`j9SNTe1Cj8XXZUst-@k|33hXAISg! literal 0 HcmV?d00001 diff --git a/tools/color-picker/pick.png b/tools/color-picker/pick.png new file mode 100644 index 0000000000000000000000000000000000000000..c928de26a83befe4c34fc7cd7cfb9ff87da595ee GIT binary patch literal 288 zcmeAS@N?(olHy`uVBq!ia0vp^JRr=$1|-8uW1a&k&H|6fVg?31We{epSZZGe6qGD+ zjVKAuPb(=;EJ|f?Ovz75Rq)JBOiv9;O-!jQJeg_(RJ7L9#WAGfR`QSk|LvK@_V9Lu zCr)-2-@y9lro$hhj`@x^)pnRXVg4Aa@Q(3Of&yRTrhJA%nO$trE0QK;hB??UcPw|h zIWIsucY8Kkz*j6*Ya#UVnEVbZ`ghCw$cifW%R@S@P3UNH8#X?hfgWfo6Jc<(( dE_6}lWoU7K(GV-VBoOFu22WQ%mvv4FO#r5?UHkw5 literal 0 HcmV?d00001 diff --git a/tools/color-picker/picker.png b/tools/color-picker/picker.png new file mode 100644 index 0000000000000000000000000000000000000000..0ab3a5f598977664df985dacec932c3162ffc917 GIT binary patch literal 1659 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 literal 0 HcmV?d00001 diff --git a/tools/color-picker/resize.png b/tools/color-picker/resize.png new file mode 100644 index 0000000000000000000000000000000000000000..b46653175e10bae147cb7978da3cdb9a3dd14db9 GIT binary patch literal 158 zcmeAS@N?(olHy`uVBq!ia0vp^93afX3?$7I7w-U4Ea{HEjtmSN`?>!lvI6;x#X;^) z4C~IxyaaOi1AIbU-3xsF|Np;g)vEL7&p&_ue4@?nJ0Nu>L4Lsu4$p3+0XYhuE{-7_ z*OL= 0 && value <= 255); + }; + + Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) { + if (this.isValidRGBValue(red) === false || + this.isValidRGBValue(green) === false || + this.isValidRGBValue(blue) === false) + return; + + this.r = red | 0; + this.g = green | 0; + this.b = blue | 0; + + if (this.isValidRGBValue(alpha) === true) + this.a = alpha | 0; + }; + + Color.prototype.setByName = function setByName(name, value) { + if (name === 'r' || name === 'g' || name === 'b') { + if(this.isValidRGBValue(value) === false) + return; + + this[name] = value; + this.updateHSX(); + } + }; + + Color.prototype.setHSV = function setHSV(hue, saturation, value) { + this.hue = hue; + this.saturation = saturation; + this.value = value; + this.HSVtoRGB(); + }; + + Color.prototype.setHSL = function setHSL(hue, saturation, lightness) { + this.hue = hue; + this.saturation = saturation; + this.lightness = lightness; + this.HSLtoRGB(); + }; + + Color.prototype.setHue = function setHue(value) { + if (typeof(value) !== 'number' || isNaN(value) === true || + value < 0 || value > 359) + return; + this.hue = value; + this.updateRGB(); + }; + + Color.prototype.setSaturation = function setSaturation(value) { + if (typeof(value) !== 'number' || isNaN(value) === true || + value < 0 || value > 100) + return; + this.saturation = value; + this.updateRGB(); + }; + + Color.prototype.setValue = function setValue(value) { + if (typeof(value) !== 'number' || isNaN(value) === true || + value < 0 || value > 100) + return; + this.value = value; + this.HSVtoRGB(); + }; + + Color.prototype.setLightness = function setLightness(value) { + if (typeof(value) !== 'number' || isNaN(value) === true || + value < 0 || value > 100) + return; + this.lightness = value; + this.HSLtoRGB(); + }; + + Color.prototype.setHexa = function setHexa(value) { + var valid = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value); + + if (valid !== true) + return; + + if (value[0] === '#') + value = value.slice(1, value.length); + + if (value.length === 3) + value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,'$1$1$2$2$3$3'); + + this.r = parseInt(value.substr(0, 2), 16); + this.g = parseInt(value.substr(2, 2), 16); + this.b = parseInt(value.substr(4, 2), 16); + + this.alpha = 1; + this.RGBtoHSV(); + }; + + /*========== Conversion Methods ==========*/ + + Color.prototype.convertToHSL = function convertToHSL() { + if (this.format === 'HSL') + return; + + this.setFormat('HSL'); + this.RGBtoHSL(); + }; + + Color.prototype.convertToHSV = function convertToHSV() { + if (this.format === 'HSV') + return; + + this.setFormat('HSV'); + this.RGBtoHSV(); + }; + + /*========== Update Methods ==========*/ + + Color.prototype.updateRGB = function updateRGB() { + if (this.format === 'HSV') { + this.HSVtoRGB(); + return; + } + + if (this.format === 'HSL') { + this.HSLtoRGB(); + return; + } + }; + + Color.prototype.updateHSX = function updateHSX() { + if (this.format === 'HSV') { + this.RGBtoHSV(); + return; + } + + if (this.format === 'HSL') { + this.RGBtoHSL(); + return; + } + }; + + Color.prototype.HSVtoRGB = function HSVtoRGB() { + var sat = this.saturation / 100; + var value = this.value / 100; + var C = sat * value; + var H = this.hue / 60; + var X = C * (1 - Math.abs(H % 2 - 1)); + var m = value - C; + var precision = 255; + + C = (C + m) * precision | 0; + X = (X + m) * precision | 0; + m = m * precision | 0; + + if (H >= 0 && H < 1) { this.setRGBA(C, X, m); return; } + if (H >= 1 && H < 2) { this.setRGBA(X, C, m); return; } + if (H >= 2 && H < 3) { this.setRGBA(m, C, X); return; } + if (H >= 3 && H < 4) { this.setRGBA(m, X, C); return; } + if (H >= 4 && H < 5) { this.setRGBA(X, m, C); return; } + if (H >= 5 && H < 6) { this.setRGBA(C, m, X); return; } + }; + + Color.prototype.HSLtoRGB = function HSLtoRGB() { + var sat = this.saturation / 100; + var light = this.lightness / 100; + var C = sat * (1 - Math.abs(2 * light - 1)); + var H = this.hue / 60; + var X = C * (1 - Math.abs(H % 2 - 1)); + var m = light - C/2; + var precision = 255; + + C = (C + m) * precision | 0; + X = (X + m) * precision | 0; + m = m * precision | 0; + + if (H >= 0 && H < 1) { this.setRGBA(C, X, m); return; } + if (H >= 1 && H < 2) { this.setRGBA(X, C, m); return; } + if (H >= 2 && H < 3) { this.setRGBA(m, C, X); return; } + if (H >= 3 && H < 4) { this.setRGBA(m, X, C); return; } + if (H >= 4 && H < 5) { this.setRGBA(X, m, C); return; } + if (H >= 5 && H < 6) { this.setRGBA(C, m, X); return; } + }; + + Color.prototype.RGBtoHSV = function RGBtoHSV() { + var red = this.r / 255; + var green = this.g / 255; + var blue = this.b / 255; + + var cmax = Math.max(red, green, blue); + var cmin = Math.min(red, green, blue); + var delta = cmax - cmin; + var hue = 0; + var saturation = 0; + + if (delta) { + if (cmax === red ) { hue = ((green - blue) / delta); } + if (cmax === green ) { hue = 2 + (blue - red) / delta; } + if (cmax === blue ) { hue = 4 + (red - green) / delta; } + if (cmax) saturation = delta / cmax; + } + + this.hue = 60 * hue | 0; + if (this.hue < 0) this.hue += 360; + this.saturation = (saturation * 100) | 0; + this.value = (cmax * 100) | 0; + }; + + Color.prototype.RGBtoHSL = function RGBtoHSL() { + var red = this.r / 255; + var green = this.g / 255; + var blue = this.b / 255; + + var cmax = Math.max(red, green, blue); + var cmin = Math.min(red, green, blue); + var delta = cmax - cmin; + var hue = 0; + var saturation = 0; + var lightness = (cmax + cmin) / 2; + var X = (1 - Math.abs(2 * lightness - 1)); + + if (delta) { + if (cmax === red ) { hue = ((green - blue) / delta); } + if (cmax === green ) { hue = 2 + (blue - red) / delta; } + if (cmax === blue ) { hue = 4 + (red - green) / delta; } + if (cmax) saturation = delta / X; + } + + this.hue = 60 * hue | 0; + if (this.hue < 0) this.hue += 360; + this.saturation = (saturation * 100) | 0; + this.lightness = (lightness * 100) | 0; + }; + + /*========== Get Methods ==========*/ + + Color.prototype.getHexa = function getHexa() { + var r = this.r.toString(16); + var g = this.g.toString(16); + var b = this.b.toString(16); + if (this.r < 16) r = '0' + r; + if (this.g < 16) g = '0' + g; + if (this.b < 16) b = '0' + b; + var value = '#' + r + g + b; + return value.toUpperCase(); + }; + + Color.prototype.getRGBA = function getRGBA() { + + var rgb = '(' + this.r + ', ' + this.g + ', ' + this.b; + var a = ''; + var v = ''; + var x = parseFloat(this.a); + if (x !== 1) { + a = 'a'; + v = ', ' + x; + } + + var value = 'rgb' + a + rgb + v + ')'; + return value; + }; + + Color.prototype.getHSLA = function getHSLA() { + if (this.format === 'HSV') { + var color = new Color(this); + color.setFormat('HSL'); + color.updateHSX(); + return color.getHSLA(); + } + + var a = ''; + var v = ''; + var hsl = '(' + this.hue + ', ' + this.saturation + '%, ' + this.lightness +'%'; + var x = parseFloat(this.a); + if (x !== 1) { + a = 'a'; + v = ', ' + x; + } + + var value = 'hsl' + a + hsl + v + ')'; + return value; + }; + + Color.prototype.getColor = function getColor() { + if (this.a | 0 === 1) + return this.getHexa(); + return this.getRGBA(); + }; + + /*=======================================================================*/ + /*=======================================================================*/ + + /*========== Capture Mouse Movement ==========*/ + + var setMouseTracking = function setMouseTracking(elem, callback) { + elem.addEventListener('mousedown', function(e) { + callback(e); + document.addEventListener('mousemove', callback); + }); + + document.addEventListener('mouseup', function(e) { + document.removeEventListener('mousemove', callback); + }); + }; + + /*====================*/ + // Color Picker Class + /*====================*/ + + function ColorPicker(node) { + this.color = new Color(); + this.node = node; + this.subscribers = []; + + var type = this.node.getAttribute('data-mode'); + var topic = this.node.getAttribute('data-topic'); + + this.topic = topic; + this.picker_mode = (type === 'HSL') ? 'HSL' : 'HSV'; + this.color.setFormat(this.picker_mode); + + this.createPickingArea(); + this.createHueArea(); + + this.newInputComponent('H', 'hue', this.inputChangeHue.bind(this)); + this.newInputComponent('S', 'saturation', this.inputChangeSaturation.bind(this)); + this.newInputComponent('V', 'value', this.inputChangeValue.bind(this)); + this.newInputComponent('L', 'lightness', this.inputChangeLightness.bind(this)); + + this.createAlphaArea(); + + this.newInputComponent('R', 'red', this.inputChangeRed.bind(this)); + this.newInputComponent('G', 'green', this.inputChangeGreen.bind(this)); + this.newInputComponent('B', 'blue', this.inputChangeBlue.bind(this)); + + this.createPreviewBox(); + this.createChangeModeButton(); + + this.newInputComponent('alpha', 'alpha', this.inputChangeAlpha.bind(this)); + this.newInputComponent('hexa', 'hexa', this.inputChangeHexa.bind(this)); + + this.setColor(this.color); + pickers[topic] = this; + } + + /*************************************************************************/ + // Function for generating the color-picker + /*************************************************************************/ + + ColorPicker.prototype.createPickingArea = function createPickingArea() { + var area = document.createElement('div'); + var picker = document.createElement('div'); + + area.className = 'picking-area'; + picker.className = 'picker'; + + this.picking_area = area; + this.color_picker = picker; + setMouseTracking(area, this.updateColor.bind(this)); + + area.appendChild(picker); + this.node.appendChild(area); + }; + + ColorPicker.prototype.createHueArea = function createHueArea() { + var area = document.createElement('div'); + var picker = document.createElement('div'); + + area.className = 'hue'; + picker.className ='slider-picker'; + + this.hue_area = area; + this.hue_picker = picker; + setMouseTracking(area, this.updateHueSlider.bind(this)); + + area.appendChild(picker); + this.node.appendChild(area); + }; + + ColorPicker.prototype.createAlphaArea = function createAlphaArea() { + var area = document.createElement('div'); + var mask = document.createElement('div'); + var picker = document.createElement('div'); + + area.className = 'alpha'; + mask.className = 'alpha-mask'; + picker.className = 'slider-picker'; + + this.alpha_area = area; + this.alpha_mask = mask; + this.alpha_picker = picker; + setMouseTracking(area, this.updateAlphaSlider.bind(this)); + + area.appendChild(mask); + mask.appendChild(picker); + this.node.appendChild(area); + }; + + ColorPicker.prototype.createPreviewBox = function createPreviewBox(e) { + var preview_box = document.createElement('div'); + var preview_color = document.createElement('div'); + + preview_box.className = 'preview'; + preview_color.className = 'preview-color'; + + this.preview_color = preview_color; + + preview_box.appendChild(preview_color); + this.node.appendChild(preview_box); + }; + + ColorPicker.prototype.newInputComponent = function newInputComponent(title, topic, onChangeFunc) { + var wrapper = document.createElement('div'); + var input = document.createElement('input'); + var info = document.createElement('span'); + + wrapper.className = 'input'; + wrapper.setAttribute('data-topic', topic); + info.textContent = title; + info.className = 'name'; + input.setAttribute('type', 'text'); + + wrapper.appendChild(info); + wrapper.appendChild(input); + this.node.appendChild(wrapper); + + input.addEventListener('change', onChangeFunc); + input.addEventListener('click', function() { + this.select(); + }); + + this.subscribe(topic, function(value) { + input.value = value; + }); + }; + + ColorPicker.prototype.createChangeModeButton = function createChangeModeButton() { + + var button = document.createElement('div'); + button.className = 'switch_mode'; + button.addEventListener('click', function() { + if (this.picker_mode === 'HSV') + this.setPickerMode('HSL'); + else + this.setPickerMode('HSV'); + + }.bind(this)); + + this.node.appendChild(button); + }; + + /*************************************************************************/ + // Updates properties of UI elements + /*************************************************************************/ + + ColorPicker.prototype.updateColor = function updateColor(e) { + var x = e.pageX - this.picking_area.offsetLeft; + var y = e.pageY - this.picking_area.offsetTop; + var picker_offset = 5; + + // width and height should be the same + var size = this.picking_area.clientWidth; + + if (x > size) x = size; + if (y > size) y = size; + if (x < 0) x = 0; + if (y < 0) y = 0; + + var value = 100 - (y * 100 / size) | 0; + var saturation = x * 100 / size | 0; + + if (this.picker_mode === 'HSV') + this.color.setHSV(this.color.hue, saturation, value); + if (this.picker_mode === 'HSL') + this.color.setHSL(this.color.hue, saturation, value); + + this.color_picker.style.left = x - picker_offset + 'px'; + this.color_picker.style.top = y - picker_offset + 'px'; + + this.updateAlphaGradient(); + this.updatePreviewColor(); + + this.notify('value', value); + this.notify('lightness', value); + this.notify('saturation', saturation); + + this.notify('red', this.color.r); + this.notify('green', this.color.g); + this.notify('blue', this.color.b); + this.notify('hexa', this.color.getHexa()); + + notify(this.topic, this.color); + }; + + ColorPicker.prototype.updateHueSlider = function updateHueSlider(e) { + var x = e.pageX - this.hue_area.offsetLeft; + var width = this.hue_area.clientWidth; + + if (x < 0) x = 0; + if (x > width) x = width; + + // TODO 360 => 359 + var hue = ((359 * x) / width) | 0; + // if (hue === 360) hue = 359; + + this.updateSliderPosition(this.hue_picker, x); + this.setHue(hue); + }; + + ColorPicker.prototype.updateAlphaSlider = function updateAlphaSlider(e) { + var x = e.pageX - this.alpha_area.offsetLeft; + var width = this.alpha_area.clientWidth; + + if (x < 0) x = 0; + if (x > width) x = width; + + this.color.a = (x / width).toFixed(2); + + this.updateSliderPosition(this.alpha_picker, x); + this.updatePreviewColor(); + + this.notify('alpha', this.color.a); + notify(this.topic, this.color); + }; + + ColorPicker.prototype.setHue = function setHue(value) { + this.color.setHue(value); + + this.updatePickerBackground(); + this.updateAlphaGradient(); + this.updatePreviewColor(); + + this.notify('red', this.color.r); + this.notify('green', this.color.g); + this.notify('blue', this.color.b); + this.notify('hexa', this.color.getHexa()); + this.notify('hue', this.color.hue); + + notify(this.topic, this.color); + }; + + // Updates when one of Saturation/Value/Lightness changes + ColorPicker.prototype.updateSLV = function updateSLV() { + this.updatePickerPosition(); + this.updateAlphaGradient(); + this.updatePreviewColor(); + + this.notify('red', this.color.r); + this.notify('green', this.color.g); + this.notify('blue', this.color.b); + this.notify('hexa', this.color.getHexa()); + + notify(this.topic, this.color); + }; + + /*************************************************************************/ + // Update positions of various UI elements + /*************************************************************************/ + + ColorPicker.prototype.updatePickerPosition = function updatePickerPosition() { + var size = this.picking_area.clientWidth; + var value = 0; + var offset = 5; + + if (this.picker_mode === 'HSV') + value = this.color.value; + if (this.picker_mode === 'HSL') + value = this.color.lightness; + + var x = (this.color.saturation * size / 100) | 0; + var y = size - (value * size / 100) | 0; + + this.color_picker.style.left = x - offset + 'px'; + this.color_picker.style.top = y - offset + 'px'; + }; + + ColorPicker.prototype.updateSliderPosition = function updateSliderPosition(elem, pos) { + elem.style.left = Math.max(pos - 3, -2) + 'px'; + }; + + ColorPicker.prototype.updateHuePicker = function updateHuePicker() { + var size = this.hue_area.clientWidth; + var offset = 1; + var pos = (this.color.hue * size / 360 ) | 0; + this.hue_picker.style.left = pos - offset + 'px'; + }; + + ColorPicker.prototype.updateAlphaPicker = function updateAlphaPicker() { + var size = this.alpha_area.clientWidth; + var offset = 1; + var pos = (this.color.a * size) | 0; + this.alpha_picker.style.left = pos - offset + 'px'; + }; + + /*************************************************************************/ + // Update background colors + /*************************************************************************/ + + ColorPicker.prototype.updatePickerBackground = function updatePickerBackground() { + var nc = new Color(this.color); + nc.setHSV(nc.hue, 100, 100); + this.picking_area.style.backgroundColor = nc.getHexa(); + }; + + ColorPicker.prototype.updateAlphaGradient = function updateAlphaGradient() { + this.alpha_mask.style.backgroundColor = this.color.getHexa(); + }; + + ColorPicker.prototype.updatePreviewColor = function updatePreviewColor() { + this.preview_color.style.backgroundColor = this.color.getColor(); + }; + + /*************************************************************************/ + // Update input elements + /*************************************************************************/ + + ColorPicker.prototype.inputChangeHue = function inputChangeHue(e) { + var value = parseInt(e.target.value); + this.setHue(value); + this.updateHuePicker(); + }; + + ColorPicker.prototype.inputChangeSaturation = function inputChangeSaturation(e) { + var value = parseInt(e.target.value); + this.color.setSaturation(value); + e.target.value = this.color.saturation; + this.updateSLV(); + }; + + ColorPicker.prototype.inputChangeValue = function inputChangeValue(e) { + var value = parseInt(e.target.value); + this.color.setValue(value); + e.target.value = this.color.value; + this.updateSLV(); + }; + + ColorPicker.prototype.inputChangeLightness = function inputChangeLightness(e) { + var value = parseInt(e.target.value); + this.color.setLightness(value); + e.target.value = this.color.lightness; + this.updateSLV(); + }; + + ColorPicker.prototype.inputChangeRed = function inputChangeRed(e) { + var value = parseInt(e.target.value); + this.color.setByName('r', value); + e.target.value = this.color.r; + this.setColor(this.color); + }; + + ColorPicker.prototype.inputChangeGreen = function inputChangeGreen(e) { + var value = parseInt(e.target.value); + this.color.setByName('g', value); + e.target.value = this.color.g; + this.setColor(this.color); + }; + + ColorPicker.prototype.inputChangeBlue = function inputChangeBlue(e) { + var value = parseInt(e.target.value); + this.color.setByName('b', value); + e.target.value = this.color.b; + this.setColor(this.color); + }; + + ColorPicker.prototype.inputChangeAlpha = function inputChangeAlpha(e) { + var value = parseFloat(e.target.value); + + if (typeof value === 'number' && isNaN(value) === false && + value >= 0 && value <= 1) + this.color.a = value.toFixed(2); + + e.target.value = this.color.a; + this.updateAlphaPicker(); + }; + + ColorPicker.prototype.inputChangeHexa = function inputChangeHexa(e) { + var value = e.target.value; + this.color.setHexa(value); + this.setColor(this.color); + }; + + /*************************************************************************/ + // Internal Pub/Sub + /*************************************************************************/ + + ColorPicker.prototype.subscribe = function subscribe(topic, callback) { + this.subscribers[topic] = callback; + }; + + ColorPicker.prototype.notify = function notify(topic, value) { + if (this.subscribers[topic]) + this.subscribers[topic](value); + }; + + /*************************************************************************/ + // Set Picker Properties + /*************************************************************************/ + + ColorPicker.prototype.setColor = function setColor(color) { + if(color instanceof Color !== true) { + console.log('Typeof parameter not Color'); + return; + } + + if (color.format !== this.picker_mode) { + color.setFormat(this.picker_mode); + color.updateHSX(); + } + + this.color.copy(color); + this.updateHuePicker(); + this.updatePickerPosition(); + this.updatePickerBackground(); + this.updateAlphaPicker(); + this.updateAlphaGradient(); + this.updatePreviewColor(); + + this.notify('red', this.color.r); + this.notify('green', this.color.g); + this.notify('blue', this.color.b); + + this.notify('hue', this.color.hue); + this.notify('saturation', this.color.saturation); + this.notify('value', this.color.value); + this.notify('lightness', this.color.lightness); + + this.notify('alpha', this.color.a); + this.notify('hexa', this.color.getHexa()); + notify(this.topic, this.color); + }; + + ColorPicker.prototype.setPickerMode = function setPickerMode(mode) { + if (mode !== 'HSV' && mode !== 'HSL') + return; + + this.picker_mode = mode; + this.node.setAttribute('data-mode', this.picker_mode); + this.setColor(this.color); + }; + + /*************************************************************************/ + // UNUSED + /*************************************************************************/ + + var setPickerMode = function setPickerMode(topic, mode) { + if (pickers[topic]) + pickers[topic].setPickerMode(mode); + }; + + var setColor = function setColor(topic, color) { + if (pickers[topic]) + pickers[topic].setColor(color); + }; + + var getColor = function getColor(topic) { + if (pickers[topic]) + return new Color(pickers[topic].color); + }; + + var subscribe = function subscribe(topic, callback) { + if (subscribers[topic] === undefined) + subscribers[topic] = []; + + subscribers[topic].push(callback); + }; + + var unsubscribe = function unsubscribe(callback) { + subscribers.indexOf(callback); + subscribers.splice(index, 1); + }; + + var notify = function notify(topic, value) { + if (subscribers[topic] === undefined || subscribers[topic].length === 0) + return; + + var color = new Color(value); + for (var i in subscribers[topic]) + subscribers[topic][i](color); + }; + + var init = function init() { + var elem = document.querySelectorAll('.ui-color-picker'); + var size = elem.length; + for (var i = 0; i < size; i++) + new ColorPicker(elem[i]); + }; + + return { + init : init, + Color : Color, + RGBColor : RGBColor, + RGBAColor : RGBAColor, + HSVColor : HSVColor, + HSVAColor : HSVAColor, + HSLColor : HSLColor, + HSLAColor : HSLAColor, + setColor : setColor, + getColor : getColor, + subscribe : subscribe, + unsubscribe : unsubscribe, + setPickerMode : setPickerMode + }; + +})(); + +/** + * UI-SlidersManager + */ + +var InputSliderManager = (function InputSliderManager() { + + var subscribers = {}; + var sliders = []; + + var InputComponent = function InputComponent(obj) { + var input = document.createElement('input'); + input.setAttribute('type', 'text'); + input.style.width = 50 + obj.precision * 10 + 'px'; + + input.addEventListener('click', function(e) { + this.select(); + }); + + input.addEventListener('change', function(e) { + var value = parseFloat(e.target.value); + + if (isNaN(value) === true) + setValue(obj.topic, obj.value); + else + setValue(obj.topic, value); + }); + + return input; + }; + + var SliderComponent = function SliderComponent(obj, sign) { + var slider = document.createElement('div'); + var startX = null; + var start_value = 0; + + slider.addEventListener("click", function(e) { + document.removeEventListener("mousemove", sliderMotion); + setValue(obj.topic, obj.value + obj.step * sign); + }); + + slider.addEventListener("mousedown", function(e) { + startX = e.clientX; + start_value = obj.value; + document.body.style.cursor = "e-resize"; + + document.addEventListener("mouseup", slideEnd); + document.addEventListener("mousemove", sliderMotion); + }); + + var slideEnd = function slideEnd(e) { + document.removeEventListener("mousemove", sliderMotion); + document.body.style.cursor = "auto"; + slider.style.cursor = "pointer"; + }; + + var sliderMotion = function sliderMotion(e) { + slider.style.cursor = "e-resize"; + var delta = (e.clientX - startX) / obj.sensitivity | 0; + var value = delta * obj.step + start_value; + setValue(obj.topic, value); + }; + + return slider; + }; + + var InputSlider = function(node) { + var min = parseFloat(node.getAttribute('data-min')); + var max = parseFloat(node.getAttribute('data-max')); + var step = parseFloat(node.getAttribute('data-step')); + var value = parseFloat(node.getAttribute('data-value')); + var topic = node.getAttribute('data-topic'); + var unit = node.getAttribute('data-unit'); + var name = node.getAttribute('data-info'); + var sensitivity = node.getAttribute('data-sensitivity') | 0; + var precision = node.getAttribute('data-precision') | 0; + + this.min = isNaN(min) ? 0 : min; + this.max = isNaN(max) ? 100 : max; + this.precision = precision >= 0 ? precision : 0; + this.step = step < 0 || isNaN(step) ? 1 : step.toFixed(precision); + this.topic = topic; + this.node = node; + this.unit = unit === null ? '' : unit; + this.sensitivity = sensitivity > 0 ? sensitivity : 5; + value = isNaN(value) ? this.min : value; + + var input = new InputComponent(this); + var slider_left = new SliderComponent(this, -1); + var slider_right = new SliderComponent(this, 1); + + slider_left.className = 'ui-input-slider-left'; + slider_right.className = 'ui-input-slider-right'; + + if (name) { + var info = document.createElement('span'); + info.className = 'ui-input-slider-info'; + info.textContent = name; + node.appendChild(info); + } + + node.appendChild(slider_left); + node.appendChild(input); + node.appendChild(slider_right); + + this.input = input; + sliders[topic] = this; + setValue(topic, value); + }; + + InputSlider.prototype.setInputValue = function setInputValue() { + this.input.value = this.value.toFixed(this.precision) + this.unit; + }; + + var setValue = function setValue(topic, value, send_notify) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + value = parseFloat(value.toFixed(slider.precision)); + + if (value > slider.max) value = slider.max; + if (value < slider.min) value = slider.min; + + slider.value = value; + slider.node.setAttribute('data-value', value); + + slider.setInputValue(); + + if (send_notify === false) + return; + + notify.call(slider); + }; + + var setMax = function setMax(topic, value) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + slider.max = value; + setValue(topic, slider.value); + }; + + var setMin = function setMin(topic, value) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + slider.min = value; + setValue(topic, slider.value); + }; + + var setUnit = function setUnit(topic, unit) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + slider.unit = unit; + setValue(topic, slider.value); + }; + + var setStep = function setStep(topic, value) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + slider.step = parseFloat(value); + setValue(topic, slider.value); + }; + + var setPrecision = function setPrecision(topic, value) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + value = value | 0; + slider.precision = value; + + var step = parseFloat(slider.step.toFixed(value)); + if (step === 0) + slider.step = 1 / Math.pow(10, value); + + setValue(topic, slider.value); + }; + + var setSensitivity = function setSensitivity(topic, value) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + value = value | 0; + + slider.sensitivity = value > 0 ? value : 5; + }; + + var getNode = function getNode(topic) { + return sliders[topic].node; + }; + + var getPrecision = function getPrecision(topic) { + return sliders[topic].precision; + }; + + var getStep = function getStep(topic) { + return sliders[topic].step; + }; + + var subscribe = function subscribe(topic, callback) { + if (subscribers[topic] === undefined) + subscribers[topic] = []; + subscribers[topic].push(callback); + }; + + var unsubscribe = function unsubscribe(topic, callback) { + subscribers[topic].indexOf(callback); + subscribers[topic].splice(index, 1); + }; + + var notify = function notify() { + if (subscribers[this.topic] === undefined) + return; + for (var i = 0; i < subscribers[this.topic].length; i++) + subscribers[this.topic][i](this.value); + }; + + var createSlider = function createSlider(topic, label) { + var slider = document.createElement('div'); + slider.className = 'ui-input-slider'; + slider.setAttribute('data-topic', topic); + + if (label !== undefined) + slider.setAttribute('data-info', label); + + new InputSlider(slider); + return slider; + }; + + var init = function init() { + var elem = document.querySelectorAll('.ui-input-slider'); + var size = elem.length; + for (var i = 0; i < size; i++) + new InputSlider(elem[i]); + }; + + return { + init : init, + setMax : setMax, + setMin : setMin, + setUnit : setUnit, + setStep : setStep, + getNode : getNode, + getStep : getStep, + setValue : setValue, + subscribe : subscribe, + unsubscribe : unsubscribe, + setPrecision : setPrecision, + setSensitivity : setSensitivity, + getPrecision : getPrecision, + createSlider : createSlider, + }; + +})(); + +'use strict'; + +window.addEventListener("load", function() { + ColorPickerTool.init(); +}); + +var ColorPickerTool = (function ColorPickerTool() { + + /*========== Get DOM Element By ID ==========*/ + + function getElemById(id) { + return document.getElementById(id); + } + + function allowDropEvent(e) { + e.preventDefault(); + } + + /*========== Make an element resizable relative to it's parent ==========*/ + + var UIComponent = (function UIComponent() { + + function makeResizable(elem, axis) { + var valueX = 0; + var valueY = 0; + var action = 0; + + var resizeStart = function resizeStart(e) { + e.stopPropagation(); + e.preventDefault(); + if (e.button !== 0) + return; + + valueX = e.clientX - elem.clientWidth; + valueY = e.clientY - elem.clientHeight; + + document.body.setAttribute('data-resize', axis); + document.addEventListener('mousemove', mouseMove); + document.addEventListener('mouseup', resizeEnd); + }; + + var mouseMove = function mouseMove(e) { + if (action >= 0) + elem.style.width = e.clientX - valueX + 'px'; + if (action <= 0) + elem.style.height = e.clientY - valueY + 'px'; + }; + + var resizeEnd = function resizeEnd(e) { + if (e.button !== 0) + return; + + document.body.removeAttribute('data-resize', axis); + document.removeEventListener('mousemove', mouseMove); + document.removeEventListener('mouseup', resizeEnd); + }; + + var handle = document.createElement('div'); + handle.className = 'resize-handle'; + + if (axis === 'width') action = 1; + else if (axis === 'height') action = -1; + else axis = 'both'; + + handle.className = 'resize-handle'; + handle.setAttribute('data-resize', axis); + handle.addEventListener('mousedown', resizeStart); + elem.appendChild(handle); + }; + + /*========== Make an element draggable relative to it's parent ==========*/ + + var makeDraggable = function makeDraggable(elem, endFunction) { + + var offsetTop; + var offsetLeft; + + elem.setAttribute('data-draggable', 'true'); + + var dragStart = function dragStart(e) { + e.preventDefault(); + e.stopPropagation(); + + if (e.target.getAttribute('data-draggable') !== 'true' || + e.target !== elem || e.button !== 0) + return; + + offsetLeft = e.clientX - elem.offsetLeft; + offsetTop = e.clientY - elem.offsetTop; + + document.addEventListener('mousemove', mouseDrag); + document.addEventListener('mouseup', dragEnd); + }; + + var dragEnd = function dragEnd(e) { + if (e.button !== 0) + return; + + document.removeEventListener('mousemove', mouseDrag); + document.removeEventListener('mouseup', dragEnd); + }; + + var mouseDrag = function mouseDrag(e) { + elem.style.left = e.clientX - offsetLeft + 'px'; + elem.style.top = e.clientY - offsetTop + 'px'; + }; + + elem.addEventListener('mousedown', dragStart, false); + }; + + return { + makeResizable : makeResizable, + makeDraggable : makeDraggable + }; + + })(); + + /*========== Color Class ==========*/ + + var Color = UIColorPicker.Color; + var HSLColor = UIColorPicker.HSLColor; + + /** + * ColorPalette + */ + var ColorPalette = (function ColorPalette() { + + var samples = []; + var color_palette; + var complementary; + + var hideNode = function(node) { + node.setAttribute('data-hidden', 'true'); + }; + + var ColorSample = function ColorSample(id) { + var node = document.createElement('div'); + node.className = 'sample'; + + this.uid = samples.length; + this.node = node; + this.color = new Color(); + + node.setAttribute('sample-id', this.uid); + node.setAttribute('draggable', 'true'); + node.addEventListener('dragstart', this.dragStart.bind(this)); + node.addEventListener('click', this.pickColor.bind(this)); + + samples.push(this); + }; + + ColorSample.prototype.updateBgColor = function updateBgColor() { + this.node.style.backgroundColor = this.color.getColor(); + }; + + ColorSample.prototype.updateColor = function updateColor(color) { + this.color.copy(color); + this.updateBgColor(); + }; + + ColorSample.prototype.updateHue = function updateHue(color, degree, steps) { + this.color.copy(color); + var hue = (steps * degree + this.color.hue) % 360; + if (hue < 0) hue += 360; + this.color.setHue(hue); + this.updateBgColor(); + }; + + ColorSample.prototype.updateSaturation = function updateSaturation(color, value, steps) { + var saturation = color.saturation + value * steps; + if (saturation <= 0) { + this.node.setAttribute('data-hidden', 'true'); + return; + } + + this.node.removeAttribute('data-hidden'); + this.color.copy(color); + this.color.setSaturation(saturation); + this.updateBgColor(); + }; + + ColorSample.prototype.updateLightness = function updateLightness(color, value, steps) { + var lightness = color.lightness + value * steps; + if (lightness <= 0) { + this.node.setAttribute('data-hidden', 'true'); + return; + } + this.node.removeAttribute('data-hidden'); + this.color.copy(color); + this.color.setLightness(lightness); + this.updateBgColor(); + }; + + ColorSample.prototype.updateBrightness = function updateBrightness(color, value, steps) { + var brightness = color.value + value * steps; + if (brightness <= 0) { + this.node.setAttribute('data-hidden', 'true'); + return; + } + this.node.removeAttribute('data-hidden'); + this.color.copy(color); + this.color.setValue(brightness); + this.updateBgColor(); + }; + + ColorSample.prototype.updateAlpha = function updateAlpha(color, value, steps) { + var alpha = parseFloat(color.a) + value * steps; + if (alpha <= 0) { + this.node.setAttribute('data-hidden', 'true'); + return; + } + this.node.removeAttribute('data-hidden'); + this.color.copy(color); + this.color.a = parseFloat(alpha.toFixed(2)); + this.updateBgColor(); + }; + + ColorSample.prototype.pickColor = function pickColor() { + UIColorPicker.setColor('picker', this.color); + }; + + ColorSample.prototype.dragStart = function dragStart(e) { + e.dataTransfer.setData('sampleID', this.uid); + e.dataTransfer.setData('location', 'palette-samples'); + }; + + var Palette = function Palette(text, size) { + this.samples = []; + this.locked = false; + + var palette = document.createElement('div'); + var title = document.createElement('div'); + var controls = document.createElement('div'); + var container = document.createElement('div'); + var lock = document.createElement('div'); + + container.className = 'container'; + title.className = 'title'; + palette.className = 'palette'; + controls.className = 'controls'; + lock.className = 'lock'; + title.textContent = text; + + controls.appendChild(lock); + container.appendChild(title); + container.appendChild(controls); + container.appendChild(palette); + + lock.addEventListener('click', function () { + this.locked = !this.locked; + lock.setAttribute('locked-state', this.locked); + }.bind(this)); + + for(var i = 0; i < size; i++) { + var sample = new ColorSample(); + this.samples.push(sample); + palette.appendChild(sample.node); + } + + this.container = container; + this.title = title; + }; + + var createHuePalette = function createHuePalette() { + var palette = new Palette('Hue', 12); + + UIColorPicker.subscribe('picker', function(color) { + if (palette.locked === true) + return; + + for(var i = 0; i < 12; i++) { + palette.samples[i].updateHue(color, 30, i); + } + }); + + color_palette.appendChild(palette.container); + }; + + var createSaturationPalette = function createSaturationPalette() { + var palette = new Palette('Saturation', 11); + + UIColorPicker.subscribe('picker', function(color) { + if (palette.locked === true) + return; + + for(var i = 0; i < 11; i++) { + palette.samples[i].updateSaturation(color, -10, i); + } + }); + + color_palette.appendChild(palette.container); + }; + + /* Brightness or Lightness - depends on the picker mode */ + var createVLPalette = function createSaturationPalette() { + var palette = new Palette('Lightness', 11); + + UIColorPicker.subscribe('picker', function(color) { + if (palette.locked === true) + return; + + if(color.format === 'HSL') { + palette.title.textContent = 'Lightness'; + for(var i = 0; i < 11; i++) + palette.samples[i].updateLightness(color, -10, i); + } + else { + palette.title.textContent = 'Value'; + for(var i = 0; i < 11; i++) + palette.samples[i].updateBrightness(color, -10, i); + } + }); + + color_palette.appendChild(palette.container); + }; + + var isBlankPalette = function isBlankPalette(container, value) { + if (value === 0) { + container.setAttribute('data-collapsed', 'true'); + return true; + } + + container.removeAttribute('data-collapsed'); + return false; + }; + + var createAlphaPalette = function createAlphaPalette() { + var palette = new Palette('Alpha', 10); + + UIColorPicker.subscribe('picker', function(color) { + if (palette.locked === true) + return; + + for(var i = 0; i < 10; i++) { + palette.samples[i].updateAlpha(color, -0.1, i); + } + }); + + color_palette.appendChild(palette.container); + }; + + var getSampleColor = function getSampleColor(id) { + if (samples[id] !== undefined && samples[id]!== null) + return new Color(samples[id].color); + }; + + var init = function init() { + color_palette = getElemById('color-palette'); + + createHuePalette(); + createSaturationPalette(); + createVLPalette(); + createAlphaPalette(); + + }; + + return { + init : init, + getSampleColor : getSampleColor + }; + + })(); + + /** + * ColorInfo + */ + var ColorInfo = (function ColorInfo() { + + var info_box; + var select; + var RGBA; + var HEXA; + var HSLA; + + var updateInfo = function updateInfo(color) { + if (color.a | 0 === 1) { + RGBA.info.textContent = 'RGB'; + HSLA.info.textContent = 'HSL'; + } + else { + RGBA.info.textContent = 'RGBA'; + HSLA.info.textContent = 'HSLA'; + } + + RGBA.value.value = color.getRGBA(); + HSLA.value.value = color.getHSLA(); + HEXA.value.value = color.getHexa(); + }; + + var InfoProperty = function InfoProperty(info) { + + var node = document.createElement('div'); + var title = document.createElement('div'); + var value = document.createElement('input'); + var copy = document.createElement('div'); + + node.className = 'property'; + title.className = 'type'; + value.className = 'value'; + copy.className = 'copy'; + + title.textContent = info; + value.setAttribute('type', 'text'); + + copy.addEventListener('click', function() { + value.select(); + }); + + node.appendChild(title); + node.appendChild(value); + node.appendChild(copy); + + this.node = node; + this.value = value; + this.info = title; + + info_box.appendChild(node); + }; + + var init = function init() { + + info_box = getElemById('color-info'); + + RGBA = new InfoProperty('RGBA'); + HSLA = new InfoProperty('HSLA'); + HEXA = new InfoProperty('HEXA'); + + UIColorPicker.subscribe('picker', updateInfo); + + }; + + return { + init: init + }; + + })(); + + /** + * ColorPicker Samples + */ + var ColorPickerSamples = (function ColorPickerSamples() { + + var samples = []; + var nr_samples = 0; + var active = null; + var container = null; + var samples_per_line = 10; + var trash_can = null; + var base_color = new HSLColor(0, 50, 100); + var add_btn; + var add_btn_pos; + + var ColorSample = function ColorSample() { + var node = document.createElement('div'); + node.className = 'sample'; + + this.uid = samples.length; + this.index = nr_samples++; + this.node = node; + this.color = new Color(base_color); + + node.setAttribute('sample-id', this.uid); + node.setAttribute('draggable', 'true'); + + node.addEventListener('dragstart', this.dragStart.bind(this)); + node.addEventListener('dragover' , allowDropEvent); + node.addEventListener('drop' , this.dragDrop.bind(this)); + + this.updatePosition(this.index); + this.updateBgColor(); + samples.push(this); + }; + + ColorSample.prototype.updateBgColor = function updateBgColor() { + this.node.style.backgroundColor = this.color.getColor(); + }; + + ColorSample.prototype.updatePosition = function updatePosition(index) { + this.index = index; + this.posY = 5 + ((index / samples_per_line) | 0) * 52; + this.posX = 5 + ((index % samples_per_line) | 0) * 52; + this.node.style.top = this.posY + 'px'; + this.node.style.left = this.posX + 'px'; + }; + + ColorSample.prototype.updateColor = function updateColor(color) { + this.color.copy(color); + this.updateBgColor(); + }; + + ColorSample.prototype.activate = function activate() { + UIColorPicker.setColor('picker', this.color); + this.node.setAttribute('data-active', 'true'); + }; + + ColorSample.prototype.deactivate = function deactivate() { + this.node.removeAttribute('data-active'); + }; + + ColorSample.prototype.dragStart = function dragStart(e) { + e.dataTransfer.setData('sampleID', this.uid); + e.dataTransfer.setData('location', 'picker-samples'); + }; + + ColorSample.prototype.dragDrop = function dragDrop(e) { + e.stopPropagation(); + this.color = Tool.getSampleColorFrom(e); + this.updateBgColor(); + }; + + ColorSample.prototype.deleteSample = function deleteSample() { + container.removeChild(this.node); + samples[this.uid] = null; + nr_samples--; + }; + + var updateUI = function updateUI() { + updateContainerProp(); + + var index = 0; + var nr = samples.length; + for (var i=0; i < nr; i++) + if (samples[i] !== null) { + samples[i].updatePosition(index); + index++; + } + + AddSampleButton.updatePosition(index); + }; + + var deleteSample = function deleteSample(e) { + trash_can.parentElement.setAttribute('drag-state', 'none'); + + var location = e.dataTransfer.getData('location'); + if (location !== 'picker-samples') + return; + + var sampleID = e.dataTransfer.getData('sampleID'); + samples[sampleID].deleteSample(); + console.log(samples); + + updateUI(); + }; + + var createDropSample = function createDropSample() { + var sample = document.createElement('div'); + sample.id = 'drop-effect-sample'; + sample.className = 'sample'; + container.appendChild(sample); + }; + + var setActivateSample = function setActivateSample(e) { + if (e.target.className !== 'sample') + return; + + unsetActiveSample(active); + Tool.unsetVoidSample(); + CanvasSamples.unsetActiveSample(); + active = samples[e.target.getAttribute('sample-id')]; + active.activate(); + }; + + var unsetActiveSample = function unsetActiveSample() { + if (active) + active.deactivate(); + active = null; + }; + + var getSampleColor = function getSampleColor(id) { + if (samples[id] !== undefined && samples[id]!== null) + return new Color(samples[id].color); + }; + + var updateContainerProp = function updateContainerProp() { + samples_per_line = ((container.clientWidth - 5) / 52) | 0; + var height = 52 * (1 + (nr_samples / samples_per_line) | 0); + container.style.height = height + 10 + 'px'; + }; + + var AddSampleButton = (function AddSampleButton() { + var node; + var _index = 0; + var _posX; + var _posY; + + var updatePosition = function updatePosition(index) { + _index = index; + _posY = 5 + ((index / samples_per_line) | 0) * 52; + _posX = 5 + ((index % samples_per_line) | 0) * 52; + + node.style.top = _posY + 'px'; + node.style.left = _posX + 'px'; + }; + + var addButtonClick = function addButtonClick() { + var sample = new ColorSample(); + container.appendChild(sample.node); + updatePosition(_index + 1); + updateUI(); + }; + + var init = function init() { + node = document.createElement('div'); + var icon = document.createElement('div'); + + node.className = 'sample'; + icon.id = 'add-icon'; + node.appendChild(icon); + node.addEventListener('click', addButtonClick); + + updatePosition(0); + container.appendChild(node); + }; + + return { + init : init, + updatePosition : updatePosition + }; + })(); + + var init = function init() { + container = getElemById('picker-samples'); + trash_can = getElemById('trash-can'); + + AddSampleButton.init(); + + for (var i=0; i<16; i++) { + var sample = new ColorSample(); + container.appendChild(sample.node); + } + + AddSampleButton.updatePosition(samples.length); + updateUI(); + + active = samples[0]; + active.activate(); + + container.addEventListener('click', setActivateSample); + + trash_can.addEventListener('dragover', allowDropEvent); + trash_can.addEventListener('dragenter', function() { + this.parentElement.setAttribute('drag-state', 'enter'); + }); + trash_can.addEventListener('dragleave', function(e) { + this.parentElement.setAttribute('drag-state', 'none'); + }); + trash_can.addEventListener('drop', deleteSample); + + UIColorPicker.subscribe('picker', function(color) { + if (active) + active.updateColor(color); + }); + + }; + + return { + init : init, + getSampleColor : getSampleColor, + unsetActiveSample : unsetActiveSample + }; + + })(); + + /** + * Canvas Samples + */ + var CanvasSamples = (function CanvasSamples() { + + var active = null; + var canvas = null; + var samples = []; + var zindex = null; + var tutorial = true; + + var CanvasSample = function CanvasSample(color, posX, posY) { + + var node = document.createElement('div'); + var pick = document.createElement('div'); + var delete_btn = document.createElement('div'); + node.className = 'sample'; + pick.className = 'pick'; + delete_btn.className = 'delete'; + + this.uid = samples.length; + this.node = node; + this.color = color; + this.updateBgColor(); + this.zIndex = 1; + + node.style.top = posY - 50 + 'px'; + node.style.left = posX - 50 + 'px'; + node.setAttribute('sample-id', this.uid); + + node.appendChild(pick); + node.appendChild(delete_btn); + + var activate = function activate() { + setActiveSample(this); + }.bind(this); + + node.addEventListener('dblclick', activate); + pick.addEventListener('click', activate); + delete_btn.addEventListener('click', this.deleteSample.bind(this)); + + UIComponent.makeDraggable(node); + UIComponent.makeResizable(node); + + samples.push(this); + canvas.appendChild(node); + return this; + }; + + CanvasSample.prototype.updateBgColor = function updateBgColor() { + this.node.style.backgroundColor = this.color.getColor(); + }; + + CanvasSample.prototype.updateColor = function updateColor(color) { + this.color.copy(color); + this.updateBgColor(); + }; + + CanvasSample.prototype.updateZIndex = function updateZIndex(value) { + this.zIndex = value; + this.node.style.zIndex = value; + }; + + CanvasSample.prototype.activate = function activate() { + this.node.setAttribute('data-active', 'true'); + zindex.setAttribute('data-active', 'true'); + + UIColorPicker.setColor('picker', this.color); + InputSliderManager.setValue('z-index', this.zIndex); + }; + + CanvasSample.prototype.deactivate = function deactivate() { + this.node.removeAttribute('data-active'); + zindex.removeAttribute('data-active'); + }; + + CanvasSample.prototype.deleteSample = function deleteSample() { + if (active === this) + unsetActiveSample(); + canvas.removeChild(this.node); + samples[this.uid] = null; + }; + + CanvasSample.prototype.updatePosition = function updatePosition(posX, posY) { + this.node.style.top = posY - this.startY + 'px'; + this.node.style.left = posX - this.startX + 'px'; + }; + + var canvasDropEvent = function canvasDropEvent(e) { + var color = Tool.getSampleColorFrom(e); + + if (color) { + var offsetX = e.pageX - canvas.offsetLeft; + var offsetY = e.pageY - canvas.offsetTop; + var sample = new CanvasSample(color, offsetX, offsetY); + if (tutorial) { + tutorial = false; + canvas.removeAttribute('data-tutorial'); + var info = new CanvasSample(new Color(), 100, 100); + info.node.setAttribute('data-tutorial', 'dblclick'); + } + } + + }; + + var setActiveSample = function setActiveSample(sample) { + ColorPickerSamples.unsetActiveSample(); + Tool.unsetVoidSample(); + unsetActiveSample(); + active = sample; + active.activate(); + }; + + var unsetActiveSample = function unsetActiveSample() { + if (active) + active.deactivate(); + active = null; + }; + + var createToggleBgButton = function createToggleBgButton() { + var button = document.createElement('div'); + var state = false; + button.className = 'toggle-bg'; + canvas.appendChild(button); + + button.addEventListener('click', function() { + console.log(state); + state = !state; + canvas.setAttribute('data-bg', state); + }); + }; + + var init = function init() { + canvas = getElemById('canvas'); + zindex = getElemById('zindex'); + + canvas.addEventListener('dragover', allowDropEvent); + canvas.addEventListener('drop', canvasDropEvent); + + createToggleBgButton(); + + UIColorPicker.subscribe('picker', function(color) { + if (active) active.updateColor(color); + }); + + InputSliderManager.subscribe('z-index', function (value) { + if (active) active.updateZIndex(value); + }); + + UIComponent.makeResizable(canvas, 'height'); + }; + + return { + init : init, + unsetActiveSample : unsetActiveSample + }; + + })(); + + var StateButton = function StateButton(node, state) { + this.state = false; + this.callback = null; + + node.addEventListener('click', function() { + this.state = !this.state; + if (typeof this.callback === "function") + this.callback(this.state); + }.bind(this)); + }; + + StateButton.prototype.set = function set() { + this.state = true; + if (typeof this.callback === "function") + this.callback(this.state); + }; + + StateButton.prototype.unset = function unset() { + this.state = false; + if (typeof this.callback === "function") + this.callback(this.state); + }; + + StateButton.prototype.subscribe = function subscribe(func) { + this.callback = func; + }; + + /** + * Tool + */ + var Tool = (function Tool() { + + var samples = []; + var controls = null; + var void_sw; + + var createPickerModeSwitch = function createPickerModeSwitch() { + var parent = getElemById('controls'); + var icon = document.createElement('div'); + var button = document.createElement('div'); + var hsv = document.createElement('div'); + var hsl = document.createElement('div'); + var active = null; + + icon.className = 'icon picker-icon'; + button.className = 'switch'; + button.appendChild(hsv); + button.appendChild(hsl); + + hsv.textContent = 'HSV'; + hsl.textContent = 'HSL'; + + active = hsl; + active.setAttribute('data-active', 'true'); + + function switchPickingModeTo(elem) { + active.removeAttribute('data-active'); + active = elem; + active.setAttribute('data-active', 'true'); + UIColorPicker.setPickerMode('picker', active.textContent); + }; + + var picker_sw = new StateButton(icon); + picker_sw.subscribe(function() { + if (active === hsv) + switchPickingModeTo(hsl); + else + switchPickingModeTo(hsv); + }); + + hsv.addEventListener('click', function() { + switchPickingModeTo(hsv); + }); + hsl.addEventListener('click', function() { + switchPickingModeTo(hsl); + }); + + parent.appendChild(icon); + parent.appendChild(button); + }; + + var setPickerDragAndDrop = function setPickerDragAndDrop() { + var preview = document.querySelector('#picker .preview-color'); + var picking_area = document.querySelector('#picker .picking-area'); + + preview.setAttribute('draggable', 'true'); + preview.addEventListener('drop', drop); + preview.addEventListener('dragstart', dragStart); + preview.addEventListener('dragover', allowDropEvent); + + picking_area.addEventListener('drop', drop); + picking_area.addEventListener('dragover', allowDropEvent); + + function drop(e) { + var color = getSampleColorFrom(e); + UIColorPicker.setColor('picker', color); + }; + + function dragStart(e) { + e.dataTransfer.setData('sampleID', 'picker'); + e.dataTransfer.setData('location', 'picker'); + }; + }; + + var getSampleColorFrom = function getSampleColorFrom(e) { + var sampleID = e.dataTransfer.getData('sampleID'); + var location = e.dataTransfer.getData('location'); + + if (location === 'picker') + return UIColorPicker.getColor(sampleID); + if (location === 'picker-samples') + return ColorPickerSamples.getSampleColor(sampleID); + if (location === 'palette-samples') + return ColorPalette.getSampleColor(sampleID); + }; + + var setVoidSwitch = function setVoidSwitch() { + var void_sample = getElemById('void-sample'); + void_sw = new StateButton(void_sample); + void_sw.subscribe( function (state) { + void_sample.setAttribute('data-active', state); + if (state === true) { + ColorPickerSamples.unsetActiveSample(); + CanvasSamples.unsetActiveSample(); + } + }); + }; + + var unsetVoidSample = function unsetVoidSample() { + void_sw.unset(); + }; + + var init = function init() { + controls = getElemById('controls'); + + var color = new Color(); + color.setHSL(0, 51, 51); + UIColorPicker.setColor('picker', color); + + setPickerDragAndDrop(); + createPickerModeSwitch(); + setVoidSwitch(); + }; + + return { + init : init, + unsetVoidSample : unsetVoidSample, + getSampleColorFrom : getSampleColorFrom + }; + + })(); + + var init = function init() { + UIColorPicker.init(); + InputSliderManager.init(); + ColorInfo.init(); + ColorPalette.init(); + ColorPickerSamples.init(); + CanvasSamples.init(); + Tool.init(); + }; + + return { + init : init + }; + +})(); diff --git a/tools/color-picker/styles.css b/tools/color-picker/styles.css new file mode 100644 index 00000000..050dcc99 --- /dev/null +++ b/tools/color-picker/styles.css @@ -0,0 +1,996 @@ +/* + * COLOR PICKER TOOL + */ + +.ui-color-picker { + width: 420px; + margin: 0; + border: 1px solid #DDD; + background-color: #FFF; + display: table; + + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.ui-color-picker .picking-area { + width: 198px; + height: 198px; + margin: 5px; + border: 1px solid #DDD; + position: relative; + float: left; + display: table; +} + +.ui-color-picker .picking-area:hover { + cursor: default; +} + +/* HSV format - Hue-Saturation-Value(Brightness) */ +.ui-color-picker .picking-area { + background: url('picker_mask_200.png') center center; + + background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), + -moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%); + background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), + -webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%); + background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), + -ms-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%); + background: -o-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), + -o-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%); + + background-color: #F00; +} + +/* HSL format - Hue-Saturation-Lightness */ +.ui-color-picker[data-mode='HSL'] .picking-area { + background: -moz-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, + hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), + -moz-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); + background: -webkit-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, + hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), + -webkit-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); + background: -ms-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, + hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), + -ms-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); + background: -o-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, + hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), + -o-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); + background-color: #F00; +} + +.ui-color-picker .picker { + width: 10px; + height: 10px; + border-radius: 50%; + border: 1px solid #FFF; + position: absolute; + top: 45%; + left: 45%; +} + +.ui-color-picker .picker:before { + width: 8px; + height: 8px; + content: ""; + position: absolute; + border: 1px solid #999; + border-radius: 50%; +} + +.ui-color-picker .hue, +.ui-color-picker .alpha { + width: 198px; + height: 28px; + margin: 5px; + border: 1px solid #FFF; + float: left; +} + +.ui-color-picker .hue { + background: url("hue.png") center; + background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, + #00F 66.66%, #F0F 83.33%, #F00 100%); + background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, + #00F 66.66%, #F0F 83.33%, #F00 100%); + background: -ms-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, + #00F 66.66%, #F0F 83.33%, #F00 100%); + background: -o-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, + #00F 66.66%, #F0F 83.33%, #F00 100%); +} + +.ui-color-picker .alpha { + border: 1px solid #CCC; + background: url("alpha.png"); +} + +.ui-color-picker .alpha-mask { + width: 100%; + height: 100%; + background: url("alpha_mask.png"); +} + +.ui-color-picker .slider-picker { + width: 2px; + height: 100%; + border: 1px solid #777; + background-color: #FFF; + position: relative; + top: -1px; +} + +/* input HSV and RGB */ + +.ui-color-picker .info { + width: 200px; + margin: 5px; + float: left; +} + +.ui-color-picker .info * { + float: left; +} + +.ui-color-picker .input { + width: 64px; + margin: 5px 2px; + float: left; +} + +.ui-color-picker .input .name { + height: 20px; + width: 30px; + text-align: center; + font-size: 14px; + line-height: 18px; + float: left; +} + +.ui-color-picker .input input { + width: 30px; + height: 18px; + margin: 0; + padding: 0; + border: 1px solid #DDD; + text-align: center; + float: right; + + -moz-user-select: text; + -webkit-user-select: text; + -ms-user-select: text; +} + +.ui-color-picker .input[data-topic="lightness"] { + display: none; +} + +.ui-color-picker[data-mode='HSL'] .input[data-topic="value"] { + display: none; +} + +.ui-color-picker[data-mode='HSL'] .input[data-topic="lightness"] { + display: block; +} + +.ui-color-picker .input[data-topic="alpha"] { + margin-top: 10px; + width: 93px; +} + +.ui-color-picker .input[data-topic="alpha"] > .name { + width: 60px; +} + +.ui-color-picker .input[data-topic="alpha"] > input { + float: right; +} + +.ui-color-picker .input[data-topic="hexa"] { + width: auto; + float: right; + margin: 6px 8px 0 0; +} + +.ui-color-picker .input[data-topic="hexa"] > .name { + display: none; +} + +.ui-color-picker .input[data-topic="hexa"] > input { + width: 90px; + height: 24px; + padding: 2px 0; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +/* Preview color */ +.ui-color-picker .preview { + width: 95px; + height: 53px; + margin: 5px; + margin-top: 10px; + border: 1px solid #DDD; + background-image: url("alpha.png"); + float: left; + position: relative; +} + +.ui-color-picker .preview:before { + height: 100%; + width: 50%; + left: 50%; + top: 0; + content: ""; + background: #FFF; + position: absolute; + z-index: 1; +} + +.ui-color-picker .preview-color { + width: 100%; + height: 100%; + background-color: rgba(255, 0, 0, 0.5); + position: absolute; + z-index: 1; +} + +.ui-color-picker .switch_mode { + width: 10px; + height: 20px; + position: relative; + border-radius: 5px 0 0 5px; + border: 1px solid #DDD; + background-color: #EEE; + left: -12px; + top: -1px; + z-index: 1; + transition: all 0.5s; +} + +.ui-color-picker .switch_mode:hover { + background-color: #CCC; + cursor: pointer; +} + +/* + * UI Component + */ + +.ui-input-slider { + height: 20px; + font-family: "Segoe UI", Arial, Helvetica, sans-serif; + -moz-user-select: none; + user-select: none; +} + +.ui-input-slider * { + float: left; + height: 100%; + line-height: 100%; +} + +/* Input Slider */ + +.ui-input-slider > input { + margin: 0; + padding: 0; + width: 50px; + text-align: center; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +.ui-input-slider-info { + width: 90px; + padding: 0px 10px 0px 0px; + text-align: right; + text-transform: lowercase; +} + +.ui-input-slider-left, .ui-input-slider-right { + width: 16px; + cursor: pointer; + background: url("arrows.png") center left no-repeat; +} + +.ui-input-slider-right { + background: url("arrows.png") center right no-repeat; +} + +.ui-input-slider-name { + width: 90px; + padding: 0 10px 0 0; + text-align: right; + text-transform: lowercase; +} + +.ui-input-slider-btn-set { + width: 25px; + background-color: #2C9FC9; + border-radius: 5px; + color: #FFF; + font-weight: bold; + line-height: 14px; + text-align: center; +} + +.ui-input-slider-btn-set:hover { + background-color: #379B4A; + cursor: pointer; +} + +/* + * COLOR PICKER TOOL + */ + +body { + max-width: 1000px; + margin: 0 auto; + + font-family: "Segoe UI", Arial, Helvetica, sans-serif; + + box-shadow: 0 0 5px 0 #999; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; + +} + +/** + * Resize Handle + */ +.resize-handle { + width: 10px; + height: 10px; + background: url('resize.png') center center no-repeat; + position: absolute; + bottom: 0; + right: 0; +} + +[data-resize='both']:hover { + cursor: nw-resize !important; +} + +[data-resize='width']:hover { + cursor: w-resize !important; +} + +[data-resize='height']:hover { + cursor: n-resize !important; +} + +[data-hidden='true'] { + display: none; +} + +[data-collapsed='true'] { + height: 0 !important; +} + +.block { + display: table; +} + +/** + * Container + */ +#container { + width: 100%; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + + display: table; +} + +/** + * Picker Zone + */ + +#picker { + padding: 10px; + width: 980px; +} + +.ui-color-picker { + padding: 3px 5px; + float: left; + border-color: #FFF; +} + +.ui-color-picker .switch_mode { + display: none; +} + +.ui-color-picker .preview-color:hover { + cursor: move; +} + +/** + * Picker Container + */ + +#picker-samples { + width: 375px; + height: 114px; + max-height: 218px; + margin: 0 10px 0 30px; + overflow: hidden; + position: relative; + float: left; + + transition: all 0.2s; +} + +#picker-samples .sample { + width: 40px; + height: 40px; + margin: 5px; + border: 1px solid #DDD; + position: absolute; + float: left; + transition: all 0.2s; +} + +#picker-samples .sample:hover { + cursor: pointer; + border-color: #BBB; + transform: scale(1.15); + border-radius: 3px; +} + +#picker-samples .sample[data-active='true'] { + border-color: #999; +} + +#picker-samples .sample[data-active='true']:after { + content: ""; + position: absolute; + background: url('arrow.png') center no-repeat; + width: 100%; + height: 12px; + top: -12px; + z-index: 2; +} + +#picker-samples #add-icon { + width: 100%; + height: 100%; + position: relative; + box-shadow: inset 0px 0px 2px 0px #DDD; +} + +#picker-samples #add-icon:hover { + cursor: pointer; + border-color: #DDD; + box-shadow: inset 0px 0px 5px 0px #CCC; +} + +#picker-samples #add-icon:before, +#picker-samples #add-icon:after { + content: ""; + position: absolute; + background-color: #EEE; + box-shadow: 0 0 1px 0 #EEE; +} + +#picker-samples #add-icon:before { + width: 70%; + height: 16%; + top: 42%; + left: 15%; +} + +#picker-samples #add-icon:after { + width: 16%; + height: 70%; + top: 15%; + left: 42%; +} + +#picker-samples #add-icon:hover:before, +#picker-samples #add-icon:hover:after { + background-color: #DDD; + box-shadow: 0 0 1px 0 #DDD; +} + +/** + * Controls + */ + +#controls { + width: 110px; + padding: 10px; + float: right; +} + +#controls #picker-switch { + text-align: center; + float: left; +} + +#controls .icon { + width: 48px; + height: 48px; + margin: 10px 0; + background-repeat: no-repeat; + background-position: center; + border: 1px solid #DDD; + display: table; + float: left; +} + +#controls .icon:hover { + cursor: pointer; +} + +#controls .picker-icon { + background-image: url('picker.png'); +} + +#controls #void-sample { + margin-right: 10px; + background-image: url('void.png'); + background-position: center left; +} + +#controls #void-sample[data-active='true'] { + border-color: #CCC; + background-position: center right; +} + +#controls .switch { + width: 106px; + padding: 1px; + border: 1px solid #CCC; + font-size: 14px; + text-align: center; + line-height: 24px; + overflow: hidden; + float: left; +} + +#controls .switch:hover { + cursor: pointer; +} + +#controls .switch > * { + width: 50%; + padding: 2px 0; + background-color: #EEE; + float: left; +} + +#controls .switch [data-active='true'] { + color: #FFF; + background-image: url('grain.png'); + background-color: #777; +} + +/** + * Trash Can + */ + +#delete { + width: 100%; + height: 94px; + background-color: #DDD; + background-image: url('grain.png'); + background-repeat: repeat; + + text-align: center; + color: #777; + + position: relative; + float: right; +} + +#delete #trash-can { + width: 80%; + height: 80%; + border: 2px dashed #FFF; + border-radius: 5px; + background: url('trash-can.png') no-repeat center; + + position: absolute; + top: 10%; + left: 10%; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + + transition: all 0.2s; +} + +#delete[drag-state='enter'] { + background-color: #999; +} + +/** + * Color Theme + */ + +#color-theme { + margin: 0 8px 0 0; + border: 1px solid #EEE; + display: inline-block; + float: right; +} + +#color-theme .box { + width: 80px; + height: 92px; + float: left; +} + +/** + * Color info box + */ +#color-info { + width: 360px; + float: left; +} + +#color-info .title { + width: 100%; + padding: 15px; + font-size: 18px; + text-align: center; + background-image: url('color-wheel.png'); + background-repeat:no-repeat; + background-position: center left 30%; +} + +#color-info .copy-container { + position: absolute; + top: -100%; +} + +#color-info .property { + min-width: 280px; + height: 30px; + margin: 10px 0; + text-align: center; + line-height: 30px; +} + +#color-info .property > * { + float: left; +} + +#color-info .property .type { + width: 60px; + height: 100%; + padding: 0 16px 0 0; + text-align: right; +} + +#color-info .property .value { + width: 200px; + height: 100%; + padding: 0 10px; + font-family: "Segoe UI", Arial, Helvetica, sans-serif; + font-size: 16px; + color: #777; + text-align: center; + background-color: #FFF; + border: none; +} + +#color-info .property .value:hover { + color: #37994A; +} + +#color-info .property .value:hover + .copy { + background-position: center right; +} + +#color-info .property .copy { + width: 24px; + height: 100%; + padding: 0 5px; + background-color: #FFF; + background-image: url('copy.png'); + background-repeat: no-repeat; + background-position: center left; + border-left: 1px solid #EEE; + text-align: right; + float: left; +} + +#color-info .property .copy:hover { + background-position: center right; +} + +/** + * Color Palette + */ + +#palette { + width: 1000px; + padding: 10px 0; + background-image: url('grain.png'); + background-repeat: repeat; + background-color: #EEE; + color: #777; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +#color-palette { + width: 640px; + font-family: Arial, Helvetica, sans-serif; + color: #777; + float: left; +} + +#color-palette .container { + width: 100%; + height: 50px; + line-height: 50px; + overflow: hidden; + float: left; + transition: all 0.5s; +} + +#color-palette .container > * { + float: left; +} + +#color-palette .title { + width: 100px; + padding: 0 10px; + text-align: right; + line-height: inherit; +} + +#color-palette .palette { + width: 456px; + height: 38px; + margin: 3px; + padding: 3px; + display: table; + background-color: #FFF; +} + +#color-palette .palette .sample { + width: 30px; + height: 30px; + margin: 3px; + position: relative; + border: 1px solid #DDD; + float: left; + transition: all 0.2s; +} + +#color-palette .palette .sample:hover { + cursor: pointer; + border-color: #BBB; + transform: scale(1.15); + border-radius: 3px; +} + +#color-palette .controls { +} + +#color-palette .controls > * { + float: left; +} + +#color-palette .controls > *:hover { + cursor: pointer; +} + +#color-palette .controls .lock { + width: 24px; + height: 24px; + margin: 10px; + padding: 3px; + background-image: url('lock.png'); + background-repeat: no-repeat; + background-position: bottom right; +} + +#color-palette .controls .lock:hover { + /*background-image: url('images/unlocked-hover.png');*/ + background-position: bottom left; +} + +#color-palette .controls .lock[locked-state='true'] { + /*background-image: url('images/locked.png');*/ + background-position: top left ; +} + +#color-palette .controls .lock[locked-state='true']:hover { + /*background-image: url('images/lock-hover.png');*/ + background-position: top right; +} + +/** + * Canvas + */ + +#canvas { + width: 100%; + height: 300px; + min-height: 250px; + border-top: 1px solid #DDD; + background-image: url('grain.png'); + background-repeat: repeat; + position: relative; + float: left; +} + +#canvas[data-tutorial='drop'] { + text-align: center; + font-size: 30px; + color: #777; +} + +#canvas[data-tutorial='drop']:before { + content: "Drop colors here to compare"; + width: 40%; + padding: 30px 9% 70px 11%; + + background-image: url('drop.png'); + background-repeat: no-repeat; + background-position: left 35px top 60%; + + text-align: right; + + border: 3px dashed rgb(221, 221, 221); + border-radius: 15px; + + position: absolute; + top: 50px; + left: 20%; +} + +#canvas[data-tutorial='drop']:after { + content: "adjust, change or modify"; + width: 40%; + font-size: 24px; + position: absolute; + top: 130px; + left: 32%; + z-index: 2; +} + +#canvas [data-tutorial='dblclick'] { + background-color: #999 !important; +} + +#canvas [data-tutorial='dblclick']:before { + content: "double click to activate"; + width: 80px; + color: #FFF; + position: absolute; + top: 10%; + left: 20%; + z-index: 2; +} + +#canvas .sample { + width: 100px; + height: 100px; + min-width: 20px; + min-height: 20px; + position: absolute; + border: 1px solid rgba(255, 255, 255, 0.3); +} + +#canvas .sample:hover { + cursor: move; +} + +#canvas .sample[data-active='true']:after { + content: ""; + position: absolute; + background: url('arrow.png') center no-repeat; + width: 100%; + height: 12px; + top: -12px; + z-index: 2; +} + +#canvas .sample:hover > * { + cursor: pointer; + display: block !important; +} + +#canvas .sample .resize-handle { + display: none; +} + +#canvas .sample .pick { + width: 10px; + height: 10px; + margin: 5px; + background: url('pick.png') center no-repeat; + position: absolute; + top: 0; + left: 0; + display: none; +} + +#canvas .sample .delete { + width: 10px; + height: 10px; + margin: 5px; + background: url('close.png') center no-repeat; + position: absolute; + top: 0; + right: 0; + display: none; +} + +/** + * Canvas controls + */ + +#canvas .toggle-bg { + width: 16px; + height: 16px; + margin: 5px; + background: url("images/canvas-controls.png") center left no-repeat; + position: absolute; + top: 0; + right: 0; +} + +#canvas .toggle-bg:hover { + cursor: pointer; +} + +#canvas[data-bg='true'] { + background: none; +} + +#canvas[data-bg='true'] .toggle-bg { + background: url('canvas-controls.png') center right no-repeat; +} + +#zindex { + height: 20px; + margin: 5px; + font-size: 16px; + position: absolute; + opacity: 0; + top: -10000px; + left: 0; + color: #777; + float: left; + transition: opacity 1s; +} + +#zindex input { + border: 1px solid #DDD; + font-size: 16px; + color: #777; +} + +#zindex .ui-input-slider-info { + width: 60px; +} + +#zindex[data-active='true'] { + top: 0; + opacity: 1; +} diff --git a/tools/color-picker/trash-can.png b/tools/color-picker/trash-can.png new file mode 100644 index 0000000000000000000000000000000000000000..e7528bdb55c65b13c87c58596c7ab23fe214478c GIT binary patch literal 443 zcmeAS@N?(olHy`uVBq!ia0vp^1|ZDA3?vioaBc-sEa{HEjtmSN`?>!lvI6;x#X;^) z4C~IxyaaNp1AIbU-3xsF4-n8x+3yN;hDJ${UoeA$28#%Xw~0-~&-s6M^?c#(T*}0y zqkGTtGoy-lLSfBQ{gSAEJk#Csg|tF}dRBS5IEHu}e>>&0&>;mLSLUXxzgE59{x$dC ze{NN)X5*2xS4PV=y)3&hg;P;L4LTXJ1?&@t3 zy#FaK$!`a9%m)GGIh_1VRUJ;#FZekLO}fxipmgU0*M#GoruDtasUcm5HeJ(qyUG6Q z^-hI1R`(;%{`jZF-6p=}+U-*(c1Y@LEM1f~|8WmvhM*bC|6H_V+Po~;1Ffc1+hD4M^`1)8S=jZArg4F0$^BXQ!4Z zB&DWj=GiK}-@RW+Av48RDcsc8z_-9TH6zobswg$M$}c3jDm&RSMakYy!KT6rXh3di zNuokUZcbjYRfVk**jy_h8zii+qySb@l5ML5aa4qFfP!;=QL2Kep0RGSfuW&-nVFuU ziK&^Hp^k!)fuWJU0T7w#8k$&{npqi{D?ot~(6*wKG^-#NH>h1eo~=?wNlAf~zJ7Um zxn8-kUVc%!zM-Y1CCCgTBVC{h-Qvo;lEez#ykcdT2`;I{$wiq3C7Jno3Lp~`lk!VT zY?Xj6g?J&i0B&qvF*KNf0j6J(SfFpHX8`gNOrftYexnUy@&(kzb(T9Bihb5uTZsl3!k| z30CjxYvq|&T#}fVoa*Ufs{}MbFEca6%F@Wd)X>1x$j}vt4PA{b4J{1ZTrJGZoZZ}9 z%$=NJdR_99OLJ56N?>|Z5PFSq>IEf*+ybD@E~!PCWvMA{Mftf3U@u!`;&zJxPV=C8 zQ*gTl=mi}9&<8q39~7}j5e*XprXCOzo@{{}c*0N31E%&OV6yh<_WTXZE%Kf&jv*Dd zuFUex5OEY~)9ySd`pC7=J$cVA)fGD$#jjUzEYfJIFi37X?f7BB1K}Et0LVSEKvuH0{D+LDt_Sl(irz)=LK$~nLVqPq|TnDwR->l{VKM}LaV|> zZ}9Rps3xo_tX12{D#Li)F+9XoCOYfaYGHx(i=Wu-Uf57>J#2(iA13atd_`N@>v#RPq&V`vlkC(68FT%61YJQlw|=DiQZ zW!Eo1v1&`_rToVXf1SNo&RNX$;>1pgpw1*S2Tj=$uCi6!$6|2nsanY{z($OgNxyuOcpWy+Jzl;ovxC#;vXaF_x#_Qlu9{vp@8Uq>g~ zT$U5^e11@5RY1aCJ{bkC{k_a>Jty7MC+;)xNZ%~Pez16(+-Jc%We*qvf93ACI=As) z&c09KOs|vNg2aDkWh7kp+u#|v)VHTDn*D|7;lpn#WGfh^9j^%E{+lpo_sTz4J;T-9 z>MifzH9rtow&tk);*~$$45r4;UhwDXEk3VkIZJ;B?b+vc8wvh8eOK`EY(eEOvOnEwW=sEt1?C>{T(ji8`j#&HKc9h_A!ezF)afrAv7qY1 M)78&qol`;+07Za~Z~y=R literal 0 HcmV?d00001 From 02a3238cff33e2b08c8f9bc1ee4ef87833990deb Mon Sep 17 00:00:00 2001 From: Rachel Andrew Date: Mon, 16 Aug 2021 12:49:42 +0100 Subject: [PATCH 008/188] Moves oblique demo --- assets/playable.js | 27 ++++++++ assets/styles.css | 61 +++++++++++++++++ variable-fonts/fonts/AmstelvarAlpha-VF.ttf | Bin 0 -> 148820 bytes variable-fonts/oblique.html | 72 +++++++++++++++++++++ 4 files changed, 160 insertions(+) create mode 100644 assets/playable.js create mode 100644 assets/styles.css create mode 100644 variable-fonts/fonts/AmstelvarAlpha-VF.ttf create mode 100644 variable-fonts/oblique.html diff --git a/assets/playable.js b/assets/playable.js new file mode 100644 index 00000000..ab6da198 --- /dev/null +++ b/assets/playable.js @@ -0,0 +1,27 @@ +var section = document.querySelector('section'); +var editable = document.querySelector('.editable'); +var textareaHTML = document.querySelector('.playable-html'); +var textareaCSS = document.querySelector('.playable-css'); +var reset = document.getElementById('reset'); +var htmlCode = textareaHTML.value; +var cssCode = textareaCSS.value; + +let editorHeading = document.createElement("h4"); +editorHeading.innerHTML = "Interactive editor"; +document.querySelector('body').insertBefore(editorHeading,textareaCSS); + +function fillCode() { + editable.innerHTML = textareaCSS.value; + section.innerHTML = textareaHTML.value; +} + +reset.addEventListener('click', function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); +}); + + +textareaHTML.addEventListener('input', fillCode); +textareaCSS.addEventListener('input', fillCode); +window.addEventListener('load', fillCode); \ No newline at end of file diff --git a/assets/styles.css b/assets/styles.css new file mode 100644 index 00000000..b733e436 --- /dev/null +++ b/assets/styles.css @@ -0,0 +1,61 @@ +/* Some default styling for cookbook examples */ +/* +rgb(53,43,34) +rgb(75,70,74) +rgb(95,97,110) +rgb(137,151,188) +rgb(160,178,226) +*/ +body { + background-color: #fff; + color: #333; + font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif; + padding: 0; + margin: 0; +} + +/* styles for the editor */ + +.playable { + font-family: monospace; + display: block; + margin-bottom: 10px; + background-color: #F4F7F8; + border: none; + border-left: 6px solid #558ABB; + color: #4D4E53; + width: 90%; + max-width: 700px; + padding: 10px 10px 0px; + font-size: 90%; + } + + .playable-css { + height: 80px; + } + + .playable-html { + height: 160px; + } + + .playable-buttons { + text-align: right; + width: 90%; + max-width: 700px; + padding: 5px 10px 5px 26px; + font-size: 100%; + } + + .preview { + width: 90%; + max-width: 700px; + border: 1px solid #4D4E53; + border-radius: 2px; + padding: 10px 14px 10px 10px; + margin-bottom: 10px; + } + + .preview input { + display: block; + margin: 5px; + } diff --git a/variable-fonts/fonts/AmstelvarAlpha-VF.ttf b/variable-fonts/fonts/AmstelvarAlpha-VF.ttf new file mode 100644 index 0000000000000000000000000000000000000000..10b64111478acbceae1511114136c59cd4472cdb GIT binary patch literal 148820 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 literal 0 HcmV?d00001 diff --git a/variable-fonts/oblique.html b/variable-fonts/oblique.html new file mode 100644 index 00000000..e6273303 --- /dev/null +++ b/variable-fonts/oblique.html @@ -0,0 +1,72 @@ + + + + + Variable fonts: oblique + + + + + + + +

    + +
    +

    ...it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill.

    +
    + +
    + + + + + +
    + +
    + + + + From 78cf4e49dd27241305eda514a733773d356180e7 Mon Sep 17 00:00:00 2001 From: Rachel Andrew Date: Mon, 16 Aug 2021 13:10:11 +0100 Subject: [PATCH 009/188] font-weight example --- variable-fonts/font-weight.html | 77 +++++++++++++++++++++++++++ variable-fonts/fonts/MutatorSans.ttf | Bin 0 -> 13696 bytes variable-fonts/oblique.html | 6 ++- 3 files changed, 82 insertions(+), 1 deletion(-) create mode 100644 variable-fonts/font-weight.html create mode 100644 variable-fonts/fonts/MutatorSans.ttf diff --git a/variable-fonts/font-weight.html b/variable-fonts/font-weight.html new file mode 100644 index 00000000..f1773e7c --- /dev/null +++ b/variable-fonts/font-weight.html @@ -0,0 +1,77 @@ + + + + + Variable fonts: weight + + + + + + + +
    + +
    +

    ...it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill.

    +
    + +
    + + + + + +
    + +
    + + + + diff --git a/variable-fonts/fonts/MutatorSans.ttf b/variable-fonts/fonts/MutatorSans.ttf new file mode 100644 index 0000000000000000000000000000000000000000..56aeb5ac46c04d71135eb79369749bfc8b025cd9 GIT binary patch literal 13696 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 From 11b138e2bbdd29564344cb932ead2dedf8211438 Mon Sep 17 00:00:00 2001 From: Rachel Andrew Date: Mon, 16 Aug 2021 13:18:11 +0100 Subject: [PATCH 010/188] font-stretch example --- variable-fonts/font-stretch.html | 95 ++++++++++++++++++++ variable-fonts/fonts/LeagueMonoVariable.ttf | Bin 0 -> 73472 bytes 2 files changed, 95 insertions(+) create mode 100644 variable-fonts/font-stretch.html create mode 100644 variable-fonts/fonts/LeagueMonoVariable.ttf diff --git a/variable-fonts/font-stretch.html b/variable-fonts/font-stretch.html new file mode 100644 index 00000000..f0e95fc1 --- /dev/null +++ b/variable-fonts/font-stretch.html @@ -0,0 +1,95 @@ + + + + + Variable fonts: font-stretch + + + + + + + +
    + +
    +

    an elephantine lizard

    +

    an elephantine lizard

    +

    an elephantine lizard

    +
    + +
    + + + + + +
    + +
    + + + + diff --git a/variable-fonts/fonts/LeagueMonoVariable.ttf b/variable-fonts/fonts/LeagueMonoVariable.ttf new file mode 100644 index 0000000000000000000000000000000000000000..809795e003b5fa975812c99d67260177f13f67cc GIT binary patch literal 73472 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    *508t@%Zr*Q98ZdxOwyDj(usks2)yAPyx=A)6Z z*%cKPxi=yYtqxl0AGrBgWL#c#b+ryBLRPG-tz{JopxmAx$73=UZy<>5iUos{0Ju^T zji6s2eDJ|c(9meCr|bq<;YUae-$QFY4mXs5P-sN&zyJOu+;A1kCS}ksz(|deXMhGD zz)8d!kzB6umq-;7N*tlPGmeIK?Z9Ker%gKmH7r00eTMPAc9~z#;3#T?
    3ggcGg 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    mVR$5 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 Ntf*#RBn{T){T~3;KFa_A literal 0 HcmV?d00001 From 1acda993dbf22acaaac02da7bad25649227ef46f Mon Sep 17 00:00:00 2001 From: Lukas Date: Thu, 19 Aug 2021 19:22:43 +0200 Subject: [PATCH 011/188] Added missing --- learn/tasks/selectors/class-id-download.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/learn/tasks/selectors/class-id-download.html b/learn/tasks/selectors/class-id-download.html index dc06d970..9128d668 100644 --- a/learn/tasks/selectors/class-id-download.html +++ b/learn/tasks/selectors/class-id-download.html @@ -33,6 +33,6 @@

    Another level 2 heading

    Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    - + - \ No newline at end of file + From 0b9503ca77a9da40733240dd7f5be6ac8a565a98 Mon Sep 17 00:00:00 2001 From: Rachel Andrew Date: Fri, 27 Aug 2021 15:29:34 +0100 Subject: [PATCH 012/188] Painting API example 1 --- houdini/css_painting_api/boxbg.js | 21 ++++++++ houdini/css_painting_api/example-boxbg.html | 54 +++++++++++++++++++++ 2 files changed, 75 insertions(+) create mode 100644 houdini/css_painting_api/boxbg.js create mode 100644 houdini/css_painting_api/example-boxbg.html diff --git a/houdini/css_painting_api/boxbg.js b/houdini/css_painting_api/boxbg.js new file mode 100644 index 00000000..f8aec7a3 --- /dev/null +++ b/houdini/css_painting_api/boxbg.js @@ -0,0 +1,21 @@ +registerPaint('boxbg', class { + + static get contextOptions() { return {alpha: true}; } + + /* + use this function to retrieve any custom properties (or regular properties, such as 'height') + defined for the element, return them in the specified array + */ + static get inputProperties() { return ['--boxColor', '--widthSubtractor']; } + + paint(ctx, size, props) { + /* + ctx -> drawing context + size -> paintSize: width and height + props -> properties: get() method + */ + + ctx.fillStyle = props.get('--boxColor'); + ctx.fillRect(0, size.height/3, size.width*0.4 - props.get('--widthSubtractor'), size.height*0.6); + } + }); \ No newline at end of file diff --git a/houdini/css_painting_api/example-boxbg.html b/houdini/css_painting_api/example-boxbg.html new file mode 100644 index 00000000..05f171ba --- /dev/null +++ b/houdini/css_painting_api/example-boxbg.html @@ -0,0 +1,54 @@ + + + + + + + + + + CSS Painting API example + + + + +
      +
    • item 1
      • +
    • item 2
      • +
    • item 3
      • +
    • item 4
      • +
    • item 5
      • +
    • item 6
      • +
    • item 7
      • +
    • item 8
      • +
    • item 9
      • +
    • item 10
      • +
    • item 11
      • +
    • item 12
      • +
    • item 13
      • +
    • item 14
      • +
    • item 15
      • +
    • item 16
      • +
    • item 17
      • +
    • item
      • +
    + + + From 72f51bb1253035374df9718fdbf88b4cd0067678 Mon Sep 17 00:00:00 2001 From: Jon Bauman <5906042+baumanj@users.noreply.github.com> Date: Sat, 28 Aug 2021 13:25:20 -0700 Subject: [PATCH 013/188] Fix invalid AVIF The existing file has a number of errors common in older writers: - [miaf][Rule #4] Error: 'hdlr' not found in MetaBox - [miaf][Rule #26] Error: Found no 'pixi' associated for 2 displayable (not hidden) images (ItemIds={1,2}) - [heif][Rule #0] Error: 'mif1' brand not found in 'ftyp' box - And several others See https://gpac.github.io/ComplianceWarden-wasm/avif.html for details. This replaces it with a valid AVIF encoded from large-balloons.jpg with avifenc from https://github.com/AOMediaCodec/libavif. --- images/large-balloons.avif | Bin 39813 -> 29391 bytes 1 file changed, 0 insertions(+), 0 deletions(-) diff --git a/images/large-balloons.avif b/images/large-balloons.avif index 5bc1c571339ceda42be7a4543597a2c1a2dac2b5..8043c1dec880d27eb9421fa6508a433cf3a517fd 100644 GIT binary patch literal 29391 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    `@nshO#BUq``7*?d*)@7e4&` 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 MiU_^?T=;=OK+Dx6OaK4? From 6008e99b7e7d3c15b62c3749330829ab782cd81c Mon Sep 17 00:00:00 2001 From: Rachel Andrew Date: Wed, 1 Sep 2021 08:01:59 +0100 Subject: [PATCH 014/188] fixing grid-gap --- box-alignment/overview/grid-gap.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/box-alignment/overview/grid-gap.html b/box-alignment/overview/grid-gap.html index 090125a4..57ad5572 100644 --- a/box-alignment/overview/grid-gap.html +++ b/box-alignment/overview/grid-gap.html @@ -72,7 +72,7 @@ .box { display: grid; grid-template-columns: 1fr 1fr 1fr; - grid-gap: 10px 2em; + gap: 10px 2em; } .box :first-child { @@ -97,7 +97,7 @@ .box { display: grid; grid-template-columns: 1fr 1fr 1fr; - grid-gap: 10px 2em; + gap: 10px 2em; } .box :first-child { From b7d0d4815ece3e43f35e792761edea2cfa0cb163 Mon Sep 17 00:00:00 2001 From: Michael Koch <9440351+mikoMK@users.noreply.github.com> Date: Sat, 4 Sep 2021 18:02:53 +0200 Subject: [PATCH 015/188] add semicolon to grid task marking guide --- learn/tasks/grid/marking.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/learn/tasks/grid/marking.md b/learn/tasks/grid/marking.md index f2ca4b9b..835846b4 100644 --- a/learn/tasks/grid/marking.md +++ b/learn/tasks/grid/marking.md @@ -34,7 +34,7 @@ I have used the shorthands below, however it would be correct for the student to This extra question requires a little bit of research. One way of achieving this would be to use `order`, which we've encountered in the flexbox tutorial. ``` .item1 { - order: 1 + order: 1; } ``` Another valid solution is to use `z-index`: From 7ca61ef7e1943ad127fc58807e9db9d648c29e4d Mon Sep 17 00:00:00 2001 From: Himanshu <74658643+digi-booster@users.noreply.github.com> Date: Mon, 13 Sep 2021 10:48:20 +0530 Subject: [PATCH 016/188] add cross browser support for image-set() css ref in alternative image formats example --- images/image-set-type.html | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/images/image-set-type.html b/images/image-set-type.html index 2ea04cdd..2d04ebfe 100644 --- a/images/image-set-type.html +++ b/images/image-set-type.html @@ -16,6 +16,9 @@ diff --git a/css-cookbook/sticky-footer-flexbox.html b/css-cookbook/sticky-footer-flexbox.html index 80e8eed7..075e95fd 100644 --- a/css-cookbook/sticky-footer-flexbox.html +++ b/css-cookbook/sticky-footer-flexbox.html @@ -10,17 +10,15 @@ From f8b3f4f3f11e5b50658b3c5bba21b2c0e3109cec Mon Sep 17 00:00:00 2001 From: Javad <79276645+Javad-93@users.noreply.github.com> Date: Sat, 15 Jan 2022 13:12:11 +0000 Subject: [PATCH 028/188] Update inheritance-simple.html The correct form of the word is "targeting" not "targetting". --- learn/cascade/inheritance-simple.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/learn/cascade/inheritance-simple.html b/learn/cascade/inheritance-simple.html index 4c04525b..417f77b0 100644 --- a/learn/cascade/inheritance-simple.html +++ b/learn/cascade/inheritance-simple.html @@ -23,7 +23,7 @@

    As the body has been set to have a color of blue this is inherited through the descendants.

    -

    We can change the color by targetting the element with a selector, such as this span.

    +

    We can change the color by targeting the element with a selector, such as this span.

    @@ -47,4 +47,4 @@ - \ No newline at end of file + From 62dd3167c3ed38c10e69514101f517c75f392cca Mon Sep 17 00:00:00 2001 From: Kaspar Vollenweider Date: Thu, 24 Mar 2022 11:04:45 +0100 Subject: [PATCH 029/188] fix(cookbook-breadcrumb-navigation): make example responsive - make breadcrumbs wrappable with `flex-wrap: wrap` - don't hide list-style, margin and padding on ul in example - links href with dummy hash `#` href --- .../breadcrumb-navigation--download.html | 28 ++++----- css-cookbook/breadcrumb-navigation.html | 62 +++++++++---------- 2 files changed, 44 insertions(+), 46 deletions(-) diff --git a/css-cookbook/breadcrumb-navigation--download.html b/css-cookbook/breadcrumb-navigation--download.html index d0143c96..3f958d6a 100644 --- a/css-cookbook/breadcrumb-navigation--download.html +++ b/css-cookbook/breadcrumb-navigation--download.html @@ -6,7 +6,6 @@ CSS Cookbook: Breadcrumb Navigation - @@ -43,9 +40,10 @@ diff --git a/css-cookbook/breadcrumb-navigation.html b/css-cookbook/breadcrumb-navigation.html index 145b3f89..5c2da39c 100644 --- a/css-cookbook/breadcrumb-navigation.html +++ b/css-cookbook/breadcrumb-navigation.html @@ -5,32 +5,24 @@ CSS Cookbook: Breadcrumb Navigation - - - @@ -38,34 +30,42 @@
    - - From 7e6587903144168b56d749b1f5dc44b902fd01dc Mon Sep 17 00:00:00 2001 From: ivan <95487764+glmvc@users.noreply.github.com> Date: Sat, 7 May 2022 16:20:30 +0200 Subject: [PATCH 033/188] increase alpha value for better visibility from 0.2 to 0.6 --- learn/tasks/values/color.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/learn/tasks/values/color.html b/learn/tasks/values/color.html index dda3b58e..912b22a6 100644 --- a/learn/tasks/values/color.html +++ b/learn/tasks/values/color.html @@ -43,7 +43,7 @@
  8. hex color
  9. RGB color
  10. HSL color
    11. -
  11. Alpha value 0.2
    12. +
  12. Alpha value 0.6
    13. @@ -70,7 +70,7 @@
  13. hex color
  14. RGB color
  15. HSL color
    16. -
  16. Alpha value 0.2
    17. +
  17. Alpha value 0.6
    18. From 223a209d9d3c0644d7132232a69b3188f8942232 Mon Sep 17 00:00:00 2001 From: glmvc Date: Sat, 7 May 2022 16:48:57 +0200 Subject: [PATCH 034/188] Also change alpha channel value for color-download.html --- learn/tasks/values/color-download.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/learn/tasks/values/color-download.html b/learn/tasks/values/color-download.html index ad6de314..8f7107f9 100644 --- a/learn/tasks/values/color-download.html +++ b/learn/tasks/values/color-download.html @@ -43,7 +43,7 @@
  18. hex color
  19. RGB color
  20. HSL color
    21. -
  21. Alpha value .2
    22. +
  22. Alpha value 0.6
    23. From f2451891614ccb0385a4a321b9f0fcdc2d99b285 Mon Sep 17 00:00:00 2001 From: ivan <95487764+glmvc@users.noreply.github.com> Date: Sat, 7 May 2022 17:04:03 +0200 Subject: [PATCH 035/188] Improve contrast of interactive examples --- learn/tasks/cascade/cascade.html | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/learn/tasks/cascade/cascade.html b/learn/tasks/cascade/cascade.html index 5da37449..bdda41c1 100644 --- a/learn/tasks/cascade/cascade.html +++ b/learn/tasks/cascade/cascade.html @@ -11,14 +11,14 @@ @@ -37,14 +37,14 @@ @@ -65,4 +65,4 @@ - \ No newline at end of file + From 669f6bdf7219a86015a9d9c866a0e1498df80e4b Mon Sep 17 00:00:00 2001 From: glmvc Date: Sat, 7 May 2022 17:15:29 +0200 Subject: [PATCH 036/188] Also change colors for cascade-download.html --- learn/tasks/cascade/cascade-download.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/learn/tasks/cascade/cascade-download.html b/learn/tasks/cascade/cascade-download.html index 1d8072cc..ba9fcb98 100644 --- a/learn/tasks/cascade/cascade-download.html +++ b/learn/tasks/cascade/cascade-download.html @@ -15,14 +15,14 @@ margin: 0; } #outer div ul .nav a { - background-color: blue; + background-color: yellow; padding: 5px; display: inline-block; margin-bottom: 10px; } div div li a { - color: yellow; + color: rebeccapurple; } From bafce6a972d54085aa8db5e01d460db1581913f5 Mon Sep 17 00:00:00 2001 From: glmvc Date: Sat, 7 May 2022 17:56:59 +0200 Subject: [PATCH 037/188] Improve contrast of interactive examples --- learn/tasks/float/float1-download.html | 3 ++- learn/tasks/float/float1.html | 3 ++- learn/tasks/float/float2-download.html | 3 ++- learn/tasks/float/float2.html | 3 ++- learn/tasks/float/float3-download.html | 2 +- learn/tasks/float/float3.html | 2 +- 6 files changed, 10 insertions(+), 6 deletions(-) diff --git a/learn/tasks/float/float1-download.html b/learn/tasks/float/float1-download.html index e566e7a5..b8987774 100644 --- a/learn/tasks/float/float1-download.html +++ b/learn/tasks/float/float1-download.html @@ -23,7 +23,8 @@ width: 150px; height: 150px; border-radius: 5px; - background-color: rgb(207,232,220); + background-color: rebeccapurple; + color: #fff; padding: 1em; } diff --git a/learn/tasks/float/float1.html b/learn/tasks/float/float1.html index 71a24bcb..708dff0a 100644 --- a/learn/tasks/float/float1.html +++ b/learn/tasks/float/float1.html @@ -17,7 +17,8 @@ width: 150px; height: 150px; border-radius: 5px; - background-color: rgb(207,232,220); + background-color: rebeccapurple; + color: #fff; padding: 1em; } diff --git a/learn/tasks/float/float2-download.html b/learn/tasks/float/float2-download.html index 5621b8dc..6bc6f696 100644 --- a/learn/tasks/float/float2-download.html +++ b/learn/tasks/float/float2-download.html @@ -23,7 +23,8 @@ width: 150px; height: 150px; border-radius: 5px; - background-color: rgb(207,232,220); + background-color: rebeccapurple; + color: #fff; padding: 1em; } .float { diff --git a/learn/tasks/float/float2.html b/learn/tasks/float/float2.html index 0a85d8d1..af391967 100644 --- a/learn/tasks/float/float2.html +++ b/learn/tasks/float/float2.html @@ -17,7 +17,8 @@ width: 150px; height: 150px; border-radius: 5px; - background-color: rgb(207,232,220); + background-color: rebeccapurple; + color: #fff; padding: 1em; } diff --git a/learn/tasks/float/float3-download.html b/learn/tasks/float/float3-download.html index b1b193c8..16518d12 100644 --- a/learn/tasks/float/float3-download.html +++ b/learn/tasks/float/float3-download.html @@ -30,7 +30,7 @@ } .box { - background-color: rgb(79,185,227); + background-color: rebeccapurple; padding: 10px; color: #fff; } diff --git a/learn/tasks/float/float3.html b/learn/tasks/float/float3.html index c567e742..da6bfd68 100644 --- a/learn/tasks/float/float3.html +++ b/learn/tasks/float/float3.html @@ -25,7 +25,7 @@ } .box { - background-color: rgb(79,185,227); + background-color: rebeccapurple; padding: 10px; color: #fff; } From 0a53027d0ce43da7505b0c2f8124af32fc4b36c8 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Wed, 8 Jun 2022 19:24:14 -0700 Subject: [PATCH 038/188] Minor: updates specificity weights to reflect updated tutorial --- learn/cascade/specificity-boxes.html | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/learn/cascade/specificity-boxes.html b/learn/cascade/specificity-boxes.html index 6af96f2f..ce5f6b3e 100644 --- a/learn/cascade/specificity-boxes.html +++ b/learn/cascade/specificity-boxes.html @@ -10,37 +10,37 @@ + + + + + +
    +

    + A paragraph with a border and background +

    +
    + + + + + +
    + +
    + + + + \ No newline at end of file diff --git a/learn/cascade/specificity-boxes.html b/learn/cascade/specificity-boxes.html index ce5f6b3e..f614bdcc 100644 --- a/learn/cascade/specificity-boxes.html +++ b/learn/cascade/specificity-boxes.html @@ -81,37 +81,37 @@ From b0a8255648cf6994d229d1738004c0b755507b2a Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Tue, 14 Jun 2022 12:02:23 -0700 Subject: [PATCH 041/188] add layers to task --- learn/tasks/cascade/cascade.html | 56 ++++++++++++++++++++++---------- 1 file changed, 38 insertions(+), 18 deletions(-) diff --git a/learn/tasks/cascade/cascade.html b/learn/tasks/cascade/cascade.html index 5da37449..b526343c 100644 --- a/learn/tasks/cascade/cascade.html +++ b/learn/tasks/cascade/cascade.html @@ -10,15 +10,25 @@ @@ -35,17 +45,27 @@
    - + + + +
    + +
    + + + + \ No newline at end of file diff --git a/learn/layers/layer-order.html b/learn/layers/layer-order.html new file mode 100644 index 00000000..10b70f29 --- /dev/null +++ b/learn/layers/layer-order.html @@ -0,0 +1,65 @@ + + + + + + Cascade Layers: layer order + + + + + + + +
    +

    Is this heading underlined?

    +
    + + + + + +
    + +
    + + + + \ No newline at end of file diff --git a/learn/layers/media-order.html b/learn/layers/media-order.html new file mode 100644 index 00000000..225d11d9 --- /dev/null +++ b/learn/layers/media-order.html @@ -0,0 +1,69 @@ + + + + + + Cascade Layers: layer order + + + + + + + +
    +

    Is this heading underlined?

    +
    + + + + + +
    + +
    + + + + \ No newline at end of file From 6c4ac6b79e1ea97b3345129a11dde55a48ea3348 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Wed, 29 Jun 2022 17:58:52 -0700 Subject: [PATCH 047/188] New files: cascade layers --- learn/layers/layer-precedence.html | 96 ++++++++++++++++++++++++++++++ 1 file changed, 96 insertions(+) create mode 100644 learn/layers/layer-precedence.html diff --git a/learn/layers/layer-precedence.html b/learn/layers/layer-precedence.html new file mode 100644 index 00000000..f8e42069 --- /dev/null +++ b/learn/layers/layer-precedence.html @@ -0,0 +1,96 @@ + + + + + + Cascade Layers: layer order + + + + + + + +
    +
    +

    Inline styles

    +
    +
    + + + + + +
    + +
    + + + + \ No newline at end of file From f59765ace53bac7b01edd5d8f38c9dd2485a544e Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Wed, 20 Jul 2022 15:37:59 -0700 Subject: [PATCH 048/188] Cascade Layers: New task --- .../tasks/cascade/cascadelayer-download.html | 48 +++++++++++ learn/tasks/cascade/cascadelayer.html | 85 +++++++++++++++++++ learn/tasks/cascade/marking.md | 17 +++- 3 files changed, 147 insertions(+), 3 deletions(-) create mode 100644 learn/tasks/cascade/cascadelayer-download.html create mode 100644 learn/tasks/cascade/cascadelayer.html diff --git a/learn/tasks/cascade/cascadelayer-download.html b/learn/tasks/cascade/cascadelayer-download.html new file mode 100644 index 00000000..1b2f6bca --- /dev/null +++ b/learn/tasks/cascade/cascadelayer-download.html @@ -0,0 +1,48 @@ + + + + + + The Cascade Layer Task + + + + + + +
    +
    + +
    +
    + + + + \ No newline at end of file diff --git a/learn/tasks/cascade/cascadelayer.html b/learn/tasks/cascade/cascadelayer.html new file mode 100644 index 00000000..28ec868e --- /dev/null +++ b/learn/tasks/cascade/cascadelayer.html @@ -0,0 +1,85 @@ + + + + + + The Cascade Layer Task + + + + + + + +
    +
    +
    + +
    +
    +
    + + + + +
    + +
    + + + + \ No newline at end of file diff --git a/learn/tasks/cascade/marking.md b/learn/tasks/cascade/marking.md index dde06b3a..ef7290ed 100644 --- a/learn/tasks/cascade/marking.md +++ b/learn/tasks/cascade/marking.md @@ -1,4 +1,6 @@ -# The Cascade Task Marking Guide +# Cascade and inheritance marking guide + +## Task 1 One possible solution is as follows: @@ -8,6 +10,15 @@ One possible solution is as follows: } ``` -There are two things the student needs to do in this task. First, you need to write a selector for the a element which is more specific than the selector used to turn the background blue. I have achieved this by using the id selector which has very high specificity. +There are two things the student needs to do in this task. First, write a selector for the `a` element which is more specific than the selector used to turn the background blue. In this solution, this is achieved by using the `id` selector which has very high specificity. + +Then the student needs to remember there are special keyword values for all properties. In this case, using `inherit` sets the background color back to be the same as its parent element. + +## Task 2 + +One possible solution is as follows: + +``` + @layer yellow, green, purple; +``` -Then they need to remember that there are special keyword values for all properties. In this case I am using inherit to set the background back to be the same as its parent element. \ No newline at end of file From b521009800cf3ad815aa96d0d1373b424ab30f18 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Wed, 20 Jul 2022 15:43:06 -0700 Subject: [PATCH 049/188] Cascade Layers: New task --- learn/tasks/cascade/marking.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/learn/tasks/cascade/marking.md b/learn/tasks/cascade/marking.md index ef7290ed..01944efa 100644 --- a/learn/tasks/cascade/marking.md +++ b/learn/tasks/cascade/marking.md @@ -22,3 +22,6 @@ One possible solution is as follows: @layer yellow, green, purple; ``` +There is one thing the student needs to do in this task: change the order of precedence so the declaration for the desired color is in the last declared layer, which is what his solution shows. + +The student needs to remember that unlayered normal styles take precedence over layered normal styles. But, if all styles are within layers, as in the case of this task, styles in later declared layers take precedence over styles declared in earlier layers. Moving the purple layer to end means it has precedence over the green and yellow layers. \ No newline at end of file From bd343d459a04cb267415af9b57f925859241405b Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Wed, 20 Jul 2022 15:43:41 -0700 Subject: [PATCH 050/188] Cascade Layers: New task --- learn/tasks/cascade/cascade.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/learn/tasks/cascade/cascade.html b/learn/tasks/cascade/cascade.html index 5da37449..579b6a60 100644 --- a/learn/tasks/cascade/cascade.html +++ b/learn/tasks/cascade/cascade.html @@ -35,7 +35,7 @@ - + div div li a { + color: yellow; + } + + -
    - +
    - - - + + diff --git a/learn/tasks/cascade/cascadelayer-download.html b/learn/tasks/cascade/cascadelayer-download.html index 1b2f6bca..b2628e4c 100644 --- a/learn/tasks/cascade/cascadelayer-download.html +++ b/learn/tasks/cascade/cascadelayer-download.html @@ -1,8 +1,7 @@ - + - - + The Cascade Layer Task -
      @@ -42,7 +40,5 @@
    - - - \ No newline at end of file + diff --git a/learn/tasks/cascade/cascadelayer.html b/learn/tasks/cascade/cascadelayer.html index 28ec868e..099e189c 100644 --- a/learn/tasks/cascade/cascadelayer.html +++ b/learn/tasks/cascade/cascadelayer.html @@ -1,38 +1,35 @@ - + - - - + + The Cascade Layer Task - - + + - + - +
    @@ -43,7 +40,7 @@
    - -
    - +
    - - - - \ No newline at end of file + + + From d1628e5ecbe2d527bc40a67878b9644f1b875ff5 Mon Sep 17 00:00:00 2001 From: Aditya Date: Thu, 21 Jul 2022 22:10:58 +0530 Subject: [PATCH 058/188] Added quotes to the font name --- learn/tasks/cascade/cascade-download.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/learn/tasks/cascade/cascade-download.html b/learn/tasks/cascade/cascade-download.html index 6e0e65c3..a902ac38 100644 --- a/learn/tasks/cascade/cascade-download.html +++ b/learn/tasks/cascade/cascade-download.html @@ -8,7 +8,7 @@ body { background-color: #fff; color: #333; - font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif; + font: 1.2em / 1.5 "Helvetica Neue", Helvetica, Arial, sans-serif; padding: 1em; margin: 0; } From 1a73aaae765fee1c000c668ace6ce5bb4fe638d0 Mon Sep 17 00:00:00 2001 From: ppeyliang Date: Sat, 23 Jul 2022 09:08:18 +0800 Subject: [PATCH 059/188] fix typo in logical-mbp.html --- learn/writing-modes/logical-mbp.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/learn/writing-modes/logical-mbp.html b/learn/writing-modes/logical-mbp.html index 47890e41..cf750e4e 100644 --- a/learn/writing-modes/logical-mbp.html +++ b/learn/writing-modes/logical-mbp.html @@ -56,7 +56,7 @@

    Physical Properties

    -

    A paragraph. Demonstrating Logical Properties in CSS.

    +

    A paragraph. Demonstrating Physical Properties in CSS.

    Logical Properties

    From f90a98bc6d6b6658c58e3eb14bfac8817cf51012 Mon Sep 17 00:00:00 2001 From: Keyacom <70766223+Keyacom@users.noreply.github.com> Date: Sat, 6 Aug 2022 18:07:55 +0200 Subject: [PATCH 060/188] Add `` I got intrigued by a quirks mode warning and just had to fix this. --- web-fonts/basic-web-font.html | 1 + 1 file changed, 1 insertion(+) diff --git a/web-fonts/basic-web-font.html b/web-fonts/basic-web-font.html index 9846f215..0633025d 100644 --- a/web-fonts/basic-web-font.html +++ b/web-fonts/basic-web-font.html @@ -1,3 +1,4 @@ + Web Font Sample From 269ee5df47740f4c92f5c2e20e191777ebbc5718 Mon Sep 17 00:00:00 2001 From: Gabe <66077254+MrBrain295@users.noreply.github.com> Date: Sun, 14 Aug 2022 20:44:58 -0500 Subject: [PATCH 061/188] Remove IE specific code --- object-fit-gallery/index.html | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/object-fit-gallery/index.html b/object-fit-gallery/index.html index 01d9e10d..d2b09294 100644 --- a/object-fit-gallery/index.html +++ b/object-fit-gallery/index.html @@ -8,9 +8,6 @@ Object-fit gallery - @@ -41,4 +38,4 @@ - \ No newline at end of file + From 6d62d08f4c8574b2c97e15ca170a36c36ae9cb40 Mon Sep 17 00:00:00 2001 From: Brian Thomas Smith Date: Mon, 22 Aug 2022 14:28:00 +0200 Subject: [PATCH 062/188] chore: add example for 'contain: style' --- contain/contain-style.html | 29 +++++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) create mode 100644 contain/contain-style.html diff --git a/contain/contain-style.html b/contain/contain-style.html new file mode 100644 index 00000000..c27dd3ac --- /dev/null +++ b/contain/contain-style.html @@ -0,0 +1,29 @@ + + + + + Float interference + + + +

    Introduction

    +

    Background

    +
    +

    Contained counter

    +
    +

    Conclusion

    + + From b661ec0c8ffe4429afc2a91248997ab3e7d0e57b Mon Sep 17 00:00:00 2001 From: Brian Thomas Smith Date: Mon, 22 Aug 2022 19:03:33 +0200 Subject: [PATCH 063/188] chore: add example for style containment for quotes --- ...-style.html => contain-style-counter.html} | 0 contain/contain-style-quotes.html | 28 +++++++++++++++++++ 2 files changed, 28 insertions(+) rename contain/{contain-style.html => contain-style-counter.html} (100%) create mode 100644 contain/contain-style-quotes.html diff --git a/contain/contain-style.html b/contain/contain-style-counter.html similarity index 100% rename from contain/contain-style.html rename to contain/contain-style-counter.html diff --git a/contain/contain-style-quotes.html b/contain/contain-style-quotes.html new file mode 100644 index 00000000..e599ab40 --- /dev/null +++ b/contain/contain-style-quotes.html @@ -0,0 +1,28 @@ + + + + + Float interference + + + + + outer + + inner + + + close + + From eeee9e39aa653b016db97cf8c4a3d982b4c51c0d Mon Sep 17 00:00:00 2001 From: TaebeomHeo Date: Fri, 9 Sep 2022 20:08:46 +0900 Subject: [PATCH 064/188] fix typo in marking.md of css-examples/learn/tasks/grid --- learn/tasks/grid/marking.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/learn/tasks/grid/marking.md b/learn/tasks/grid/marking.md index 835846b4..1b918793 100644 --- a/learn/tasks/grid/marking.md +++ b/learn/tasks/grid/marking.md @@ -83,7 +83,7 @@ The container will need to be a grid layout, as we have alignment in rows and co The ul for the tags needs to be a flex container as tags are not lined up in columns, only in rows and they are centered in the space with the alignment property `justify-content` set to `center`. -The student may try to use flexbox on the container and restrict the cards with percentage values. They may also try to make the items into a grid layout in which case you should point out that the items are not aligned in two dimensions so grid isn't the best choice. +The student may try to use flexbox on the container and restrict the cards with percentage values. They may also try to make the items into a grid layout in which case you should point out that the items are not aligned in two dimensions so flexbox isn't the best choice. ``` .container { From 6826331c2fe858fcf75dd4d9132d983bdd6d5463 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Thu, 15 Sep 2022 20:56:15 -0700 Subject: [PATCH 065/188] Update: to match learn --- learn/layers/layer-precedence.html | 2 +- learn/layers/media-order.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/learn/layers/layer-precedence.html b/learn/layers/layer-precedence.html index f8e42069..10632ce8 100644 --- a/learn/layers/layer-precedence.html +++ b/learn/layers/layer-precedence.html @@ -3,7 +3,7 @@ - Cascade Layers: layer order + Cascade Layers: layer precedence @@ -37,31 +37,31 @@
    -
    hsla(188, 97%, 28%, .3)
    -
    hsla(321, 47%, 57%, .7)
    -
    hsla(174, 77%, 31%, .9)
    +
    hsl(188 97% 28% / .3)
    +
    hsl(321 47% 57% / .7)
    +
    hsl(174 77% 31% / .9)
    - - From c36caeac5fd9823e07ab5be121d4d7796b3b80ae Mon Sep 17 00:00:00 2001 From: dawei-wang Date: Sat, 7 Jan 2023 13:39:44 -0800 Subject: [PATCH 068/188] Select more accessible default colors Fix mdn/content#15621 --- learn/cascade/all.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/learn/cascade/all.html b/learn/cascade/all.html index 7e292f5f..dd22f949 100644 --- a/learn/cascade/all.html +++ b/learn/cascade/all.html @@ -11,8 +11,8 @@ @@ -72,7 +72,7 @@ color: #fff; } -input[type="submit"]:hover { +input[type="submit"]:hover, input[type="submit"]:focus { background-color: #333; } From 0bd1edd8d2e0cbc3d06073fba5ca529636dd08c5 Mon Sep 17 00:00:00 2001 From: Mashrafi Mahin <101042038+MAHIN0093@users.noreply.github.com> Date: Sat, 28 Jan 2023 01:00:20 +0600 Subject: [PATCH 071/188] Update gaps.html I am updating the guttering section in content/flexbox. As the section moves from negative margin to `gap`, we need to update the live editor as well --- flexbox/wrapping/gaps.html | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/flexbox/wrapping/gaps.html b/flexbox/wrapping/gaps.html index 0e9ea43e..e9011024 100644 --- a/flexbox/wrapping/gaps.html +++ b/flexbox/wrapping/gaps.html @@ -78,11 +78,10 @@ display: flex; flex-wrap: wrap; - margin:-10px; + gap: 10px; } .box>* { flex: 1 1 160px; - margin: 10px; } @@ -114,11 +113,10 @@ display: flex; flex-wrap: wrap; - margin:-10px; + gap: 10px; } .box>* { flex: 1 1 160px; - margin: 10px; } From 9457d500634dc9e303ffdc3f241e4f284d527aca Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Wed, 8 Feb 2023 10:56:34 -0800 Subject: [PATCH 072/188] Group 1: modernize content --- variable-fonts/grade.html | 6 +++--- variable-fonts/italic.html | 6 +++--- variable-fonts/optical-sizing.html | 6 +++--- variable-fonts/sample-page.html | 6 +++--- variable-fonts/slant.html | 6 +++--- variable-fonts/weight.html | 6 +++--- variable-fonts/width.html | 6 +++--- visual-formatting/anonymous-block.html | 3 ++- visual-formatting/anonymous-flex.html | 3 ++- visual-formatting/line-boxes.html | 3 ++- web-fonts/basic-web-font.html | 4 ++-- 11 files changed, 29 insertions(+), 26 deletions(-) diff --git a/variable-fonts/grade.html b/variable-fonts/grade.html index 39d2ac17..6c43f92d 100644 --- a/variable-fonts/grade.html +++ b/variable-fonts/grade.html @@ -1,8 +1,8 @@ - - + - + + Variable Font example - grade - diff --git a/display/two-value/block-flow-root.html b/display/two-value/block-flow-root.html index 46af30a0..da177154 100644 --- a/display/two-value/block-flow-root.html +++ b/display/two-value/block-flow-root.html @@ -1,8 +1,8 @@ - - + - + + Two Values of Display: display: flow-root - diff --git a/learn/tasks/selectors/attribute-links-download.html b/learn/tasks/selectors/attribute-links-download.html index 9ff129da..7a4f2df9 100644 --- a/learn/tasks/selectors/attribute-links-download.html +++ b/learn/tasks/selectors/attribute-links-download.html @@ -1,8 +1,9 @@ - + - + + Selectors: attribute selectors - - - CSS Painting API example -
      From f0f531c7d7375aff87df289e58a9ca0c336eae8d Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Wed, 8 Feb 2023 15:06:33 -0800 Subject: [PATCH 081/188] CSS animations module example --- modules/animation.html | 204 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 204 insertions(+) create mode 100644 modules/animation.html diff --git a/modules/animation.html b/modules/animation.html new file mode 100644 index 00000000..358c41ba --- /dev/null +++ b/modules/animation.html @@ -0,0 +1,204 @@ + + + + + + CSS animation sample: snow storm + + + + + +
      + +
      +
      +
      + + From 7999b0b58141becf2e081b59f044e99a3c7ee27e Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Wed, 8 Feb 2023 15:07:00 -0800 Subject: [PATCH 082/188] CSS backgrounds and borders example --- modules/backgrounds.html | 48 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 48 insertions(+) create mode 100644 modules/backgrounds.html diff --git a/modules/backgrounds.html b/modules/backgrounds.html new file mode 100644 index 00000000..66cb44bb --- /dev/null +++ b/modules/backgrounds.html @@ -0,0 +1,48 @@ + + + + + + CSS backgrounds and borders sample + + + +
      +
      +
      +
      + + From 835085551e9edfe0f1a3e88ab1813c28045cc12b Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Wed, 8 Feb 2023 15:07:18 -0800 Subject: [PATCH 083/188] CSS blending and compositing example --- modules/compositing.html | 63 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 63 insertions(+) create mode 100644 modules/compositing.html diff --git a/modules/compositing.html b/modules/compositing.html new file mode 100644 index 00000000..c541fc3d --- /dev/null +++ b/modules/compositing.html @@ -0,0 +1,63 @@ + + + + + + CSS blending and compositing sample + + + +
      +
      Normal, with no blending
      +
      Multiplies colors
      +
      Multiplies based on background color
      +
      Normal, with no blending
      +
      Multiplies colors
      +
      Multiplies based on background color
      +
      + + From e5285669ed2eac1f46d231327f6931e0d4be517c Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Wed, 8 Feb 2023 15:07:52 -0800 Subject: [PATCH 084/188] CSS basic user interface module example --- modules/basicUI.html | 60 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 60 insertions(+) create mode 100644 modules/basicUI.html diff --git a/modules/basicUI.html b/modules/basicUI.html new file mode 100644 index 00000000..47f622a1 --- /dev/null +++ b/modules/basicUI.html @@ -0,0 +1,60 @@ + + + + + + CSS basic UI module sample + + + +
      Edit this text
      +
      Play with these fake form controls + + + + + +
      +
      + Be careful not to ruin usability: try resizing these. + + + +
      + + From 84e5084cb4c1ec453d03b48d702346824866c890 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Wed, 8 Feb 2023 15:13:50 -0800 Subject: [PATCH 085/188] CSS filter effects sample --- modules/filters.html | 151 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 151 insertions(+) create mode 100644 modules/filters.html diff --git a/modules/filters.html b/modules/filters.html new file mode 100644 index 00000000..96b7f723 --- /dev/null +++ b/modules/filters.html @@ -0,0 +1,151 @@ + + + + + + + + + +
      +A colorful memorial honoring George Floyd and the Black Lives Matter movement +
      +
      + Select your filters + + + + + + + + + + + +
      +
      +
      + +

      Image by DigitalNomad

      + + From d0fc86df0faca163ed35a1d507d6a471f12a2b30 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Wed, 8 Feb 2023 15:18:09 -0800 Subject: [PATCH 086/188] images --- modules/assets/george_floyd_memorial_sm.jpg | Bin 0 -> 58116 bytes modules/filters.html | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) create mode 100644 modules/assets/george_floyd_memorial_sm.jpg diff --git a/modules/assets/george_floyd_memorial_sm.jpg b/modules/assets/george_floyd_memorial_sm.jpg new file mode 100644 index 0000000000000000000000000000000000000000..2ec1a1b12c63bb129e6d1cf2dfce8781ca0d427b GIT binary patch literal 58116 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 R9RC1xRH_rGvFbcO|Jk
      -A colorful memorial honoring George Floyd and the Black Lives Matter movement +A colorful memorial honoring George Floyd and the Black Lives Matter movement
      Select your filters From 2de5b8563e58fa7336378c278a36f4959ea84846 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Wed, 8 Feb 2023 15:45:24 -0800 Subject: [PATCH 087/188] images --- modules/filters.html | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/modules/filters.html b/modules/filters.html index 6730bc7b..2033cad5 100644 --- a/modules/filters.html +++ b/modules/filters.html @@ -7,12 +7,13 @@
      -A colorful memorial honoring George Floyd and the Black Lives Matter movement +A colorful memorial honoring George Floyd and the Black Lives Matter movement
      Select your filters From acf44b9072bb31823fbcbb14cd6c542d1ebdb364 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Wed, 8 Feb 2023 23:25:51 -0800 Subject: [PATCH 088/188] make everything harder to read --- modules/animation.html | 8 +- modules/backgrounds.html | 96 ++++++------ modules/basicUI.html | 113 +++++++------- modules/compositing.html | 123 +++++++-------- modules/filters.html | 325 +++++++++++++++++++++------------------ 5 files changed, 355 insertions(+), 310 deletions(-) diff --git a/modules/animation.html b/modules/animation.html index 358c41ba..bde620b0 100644 --- a/modules/animation.html +++ b/modules/animation.html @@ -193,12 +193,12 @@ - +
      - -
      -
      + +
      +
      diff --git a/modules/backgrounds.html b/modules/backgrounds.html index 66cb44bb..ad5d680f 100644 --- a/modules/backgrounds.html +++ b/modules/backgrounds.html @@ -1,48 +1,56 @@ - - - - CSS backgrounds and borders sample - - - -
      -
      -
      -
      - + background-color: currentcolor; + background-position: center; + background-size: 60px 60px, 120px 120px; + background-clip: content-box, content-box, padding-box; + box-shadow: + inset 5px 5px 5px rgba(0, 0, 0, 0.4), + inset -5px -5px 5px rgba(0, 0, 0, 0.4), + 5px 5px 5px rgba(0, 0, 0, 0.4), + -5px -5px 5px rgba(0, 0, 0, 0.4); + } + div:first-of-type { + border-radius: 0; + border-image-source: repeating-conic-gradient( + from 3deg at 25% 25%, + currentColor 0 3deg, + transparent 3deg 6deg + ); + border-image-slice: 30; + } + + + +
      +
      +
      +
      + diff --git a/modules/basicUI.html b/modules/basicUI.html index 47f622a1..6d52eab1 100644 --- a/modules/basicUI.html +++ b/modules/basicUI.html @@ -1,60 +1,65 @@ - - - - CSS basic UI module sample - + + +
      Edit this text
      +
      + Play with these fake form controls + + + + + +
      +
      + Be careful not to ruin usability: try resizing these. + + + - - -
      - + +
      + diff --git a/modules/compositing.html b/modules/compositing.html index c541fc3d..fd739b15 100644 --- a/modules/compositing.html +++ b/modules/compositing.html @@ -1,63 +1,66 @@ - - - - CSS blending and compositing sample - - - -
      -
      Normal, with no blending
      -
      Multiplies colors
      -
      Multiplies based on background color
      -
      Normal, with no blending
      -
      Multiplies colors
      -
      Multiplies based on background color
      -
      - + + + + CSS blending and compositing sample + + + +
      +
      Normal, with no blending
      +
      Multiplies colors
      +
      Multiplies based on background color
      +
      Normal, with no blending
      +
      Multiplies colors
      +
      Multiplies based on background color
      +
      + diff --git a/modules/filters.html b/modules/filters.html index 2033cad5..6877fc4c 100644 --- a/modules/filters.html +++ b/modules/filters.html @@ -1,153 +1,182 @@ - - - - - - - -
      -A colorful memorial honoring George Floyd and the Black Lives Matter movement - -
      - Select your filters - - - - - - - - - - - -
      - -
      - -

      Image by DigitalNomad

      - + function changeCSS() { + image.setAttribute("style", "filter: " + + blur() + + brightness() + + contrast() + + dropShadow() + + grayscale() + + hueRotate() + + invert() + + opacity() + + saturate() + + sepia() + ); + } + /* blur()*/ + function blur() { + let blurValue = document.getElementsByName("blur")[0]; + return "blur(" + blurValue.value + "rem) "; + } + /* brightness()*/ + function brightness() { + let brightnessValue = document.getElementsByName("brightness")[0]; + return "brightness(" + brightnessValue.value + ") "; + } + /* contrast()*/ + function contrast() { + let contrastValue = document.getElementsByName("contrast")[0]; + return "contrast(" + contrastValue.value + ") "; + } + /* drop-shadow()*/ + function dropShadow() { + let dropShadowValue = document.getElementsByName("dropShadow")[0]; + return ( + "drop-shadow(" + dropShadowValue.value + + "rem " + dropShadowValue.value + "rem " + "0rem orange) " + ); + } + /* grayscale()*/ + function grayscale() { + let grayscaleValue = document.getElementsByName("grayscale")[0]; + return "grayscale(" + grayscaleValue.value + ") "; + } + /* hue-rotate()*/ + function hueRotate() { + let hueRotateValue = document.getElementsByName("hueRotate")[0]; + return "hue-rotate(" + hueRotateValue.value + "turn) "; + } + /* invert()*/ + function invert() { + let invertValue = document.getElementsByName("invert")[0]; + return "invert(" + invertValue.value + ") "; + } + /* opacity()*/ + function opacity() { + let opacityValue = document.getElementsByName("opacity")[0]; + return "opacity(" + opacityValue.value + ") "; + } + /* saturate()*/ + function saturate() { + let saturateValue = document.getElementsByName("saturate")[0]; + return "saturate(" + saturateValue.value + ") "; + } + /* sepia()*/ + function sepia() { + let sepiaValue = document.getElementsByName("sepia")[0]; + return "sepia(" + sepiaValue.value + ") "; + } + +

      Image by DigitalNomad

      + From 9ad722b5fe5576f859336188ed5d9e4c31306e35 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Wed, 8 Feb 2023 23:29:44 -0800 Subject: [PATCH 089/188] make everything harder to read --- modules/animation.html | 415 ++++++++++++++++++++++------------------- modules/basicUI.html | 11 +- 2 files changed, 226 insertions(+), 200 deletions(-) diff --git a/modules/animation.html b/modules/animation.html index bde620b0..fd7f2a56 100644 --- a/modules/animation.html +++ b/modules/animation.html @@ -1,204 +1,233 @@ - - - - CSS animation sample: snow storm - - - - - -
      - -
      -
      -
      - + /* Change the content of the label that comes right after the input. Included aria-label on the label to improve accessibility. */ + input + label::before { + content: "Play "; + } + input:checked + label::before { + content: "Pause "; + } + + + + + +
      + +
      +
      +
      + diff --git a/modules/basicUI.html b/modules/basicUI.html index 6d52eab1..58eab64c 100644 --- a/modules/basicUI.html +++ b/modules/basicUI.html @@ -44,22 +44,19 @@ - +
      Be careful not to ruin usability: try resizing these. + + +
      From e755c61c9a9037fd5e9fa5033ec81c80b814904d Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Thu, 9 Feb 2023 00:25:36 -0800 Subject: [PATCH 090/188] Update modules/filters.html Co-authored-by: Jean-Yves Perrier --- modules/filters.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/filters.html b/modules/filters.html index 6877fc4c..d9ac6d5d 100644 --- a/modules/filters.html +++ b/modules/filters.html @@ -93,7 +93,7 @@

      Image by DigitalNomad

      From 7571f51683310c0bc26903dbbbd1c3eb552936a1 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Fri, 10 Feb 2023 15:35:35 -0800 Subject: [PATCH 092/188] example for filter-functions --- types/filterfunctions.html | 149 +++++++++++++++++++++++++++++++++++++ 1 file changed, 149 insertions(+) create mode 100644 types/filterfunctions.html diff --git a/types/filterfunctions.html b/types/filterfunctions.html new file mode 100644 index 00000000..bf4afe06 --- /dev/null +++ b/types/filterfunctions.html @@ -0,0 +1,149 @@ + + + + + + CSS filter functions + + + +
      +
        +
      • + + +
        • +
        • +
      • +

        Current value:

        +
        • +
      + + + From 069ddd821e97be5d099d7f9b14dbcd945486ea33 Mon Sep 17 00:00:00 2001 From: "Queen Vinyl Da.i'gyu-Kazotetsu" Date: Fri, 10 Feb 2023 22:36:56 -0800 Subject: [PATCH 093/188] display: two-value -> multi-keyword --- display/{two-value => multi-keyword}/block-flow-root.html | 2 +- display/{two-value => multi-keyword}/inline-block.html | 2 +- display/{two-value => multi-keyword}/inline-flex.html | 2 +- .../multi-keyword-flex.html} | 6 +++--- display/{two-value => multi-keyword}/span-flex.html | 2 +- 5 files changed, 7 insertions(+), 7 deletions(-) rename display/{two-value => multi-keyword}/block-flow-root.html (97%) rename display/{two-value => multi-keyword}/inline-block.html (97%) rename display/{two-value => multi-keyword}/inline-flex.html (97%) rename display/{two-value/two-value-flex.html => multi-keyword/multi-keyword-flex.html} (95%) rename display/{two-value => multi-keyword}/span-flex.html (97%) diff --git a/display/two-value/block-flow-root.html b/display/multi-keyword/block-flow-root.html similarity index 97% rename from display/two-value/block-flow-root.html rename to display/multi-keyword/block-flow-root.html index da177154..f0240470 100644 --- a/display/two-value/block-flow-root.html +++ b/display/multi-keyword/block-flow-root.html @@ -3,7 +3,7 @@ - Two Values of Display: display: flow-root + Multi-Keyword Values of Display: display: flow-root @@ -24,7 +24,7 @@ @@ -38,4 +38,4 @@ - \ No newline at end of file + From 36f3193e01294195e6bb7c532c3041acf20bd8e4 Mon Sep 17 00:00:00 2001 From: yarusome <97945148+yarusome@users.noreply.github.com> Date: Mon, 13 Mar 2023 09:40:52 +0800 Subject: [PATCH 105/188] Adding semicolon after declaration --- learn/selectors/before.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/learn/selectors/before.html b/learn/selectors/before.html index 2921d737..25fe3c28 100644 --- a/learn/selectors/before.html +++ b/learn/selectors/before.html @@ -11,7 +11,7 @@ @@ -24,7 +24,7 @@ @@ -38,4 +38,4 @@ - \ No newline at end of file + From 7834f6ec7ed7745763ba6a49a45930d170f9c95d Mon Sep 17 00:00:00 2001 From: yarusome <97945148+yarusome@users.noreply.github.com> Date: Wed, 15 Mar 2023 09:56:08 +0800 Subject: [PATCH 106/188] Adding missing `}` --- types/filterfunctions.html | 1 + 1 file changed, 1 insertion(+) diff --git a/types/filterfunctions.html b/types/filterfunctions.html index b810adf3..4bd183f1 100644 --- a/types/filterfunctions.html +++ b/types/filterfunctions.html @@ -123,6 +123,7 @@ break; default: console.error("Unknown filter set"); + } } function setDiv(filter) { From 64204bd5108a36f18d91dec19a6cd23cc2d52864 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Wed, 15 Mar 2023 02:43:39 -0700 Subject: [PATCH 107/188] New page: color modules example --- modules/colors.html | 180 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 180 insertions(+) create mode 100644 modules/colors.html diff --git a/modules/colors.html b/modules/colors.html new file mode 100644 index 00000000..b5a20d24 --- /dev/null +++ b/modules/colors.html @@ -0,0 +1,180 @@ + + + + + Color picker + + + +
      + + + + + + + + + +
      Current color values:
      RGB
      HEX
      HSL
      HWB
      + +

      +

      +

      +
      + + + From ca1a78624ce992c24e8c09db87bb06431929413b Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Wed, 15 Mar 2023 09:20:13 -0700 Subject: [PATCH 108/188] accent color on form controls --- modules/colors.html | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/modules/colors.html b/modules/colors.html index b5a20d24..a76322e1 100644 --- a/modules/colors.html +++ b/modules/colors.html @@ -160,11 +160,12 @@ const setBackgroundColor = function ( color, opacity ) { const body = document.querySelector( "div" ); - if( opacity == 1 ) { - body.style.backgroundColor = color; - } else { - body.style.backgroundColor = color + "" + hexOpacity( opacity ); + if( opacity != 1 ) { + color = color + "" + hexOpacity( opacity ); } + body.style.backgroundColor = color; + opacityPicker.style.accentColor = color; + colorPicker.style.accentColor = color; } const hexOpacity = function( opacity ) { From de471724b9a1b9caa9bb61db5f0d23d9ccf4c174 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Wed, 15 Mar 2023 13:52:07 -0700 Subject: [PATCH 109/188] write JS a different way --- modules/colors.html | 42 +++++++++++++++++++++--------------------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/modules/colors.html b/modules/colors.html index a76322e1..4cb6ade6 100644 --- a/modules/colors.html +++ b/modules/colors.html @@ -73,7 +73,7 @@ createColor(); }); -const createColor = function() { +function createColor() { const currentColor = colorPicker.value; const currentOpacity = opacityPicker.value; setBackgroundColor( currentColor, currentOpacity ); @@ -81,32 +81,32 @@ createRGB( currentColor, currentOpacity ); } -const createHEX = function ( color, opacity ) { +function createHEX ( color, opacity ) { const cell = document.querySelector( "#HEX td" ); if ( opacity == 1 ) { - cell.innerHTML = color; + cell.textContent = color; } else { - cell.innerHTML = color + hexOpacity( opacity ); + cell.textContent = color + hexOpacity( opacity ); } } -const createRGB = function ( color, opacity ) { +function createRGB ( color, opacity ) { const cell = document.querySelector( "#RGB td" ); color = color.substring( 1, 6 ); - let hexArray = color.match( /.{1,2}/g ); - let R = parseInt( hexArray[0], 16 ), - G = parseInt( hexArray[1], 16 ), - B = parseInt( hexArray[2], 16 ); + const hexArray = color.match( /.{1,2}/g ); + const R = parseInt( hexArray[0], 16 ); + const G = parseInt( hexArray[1], 16 ); + const B = parseInt( hexArray[2], 16 ); if( opacity == 1 ) { - cell.innerHTML = `rgb(${R} ${G} ${B})`; + cell.textContent = `rgb(${R} ${G} ${B})`; } else { - cell.innerHTML = `rgb(${R} ${G} ${B} / ${opacity})`; + cell.textContent = `rgb(${R} ${G} ${B} / ${opacity})`; } createHSL( R, G, B, opacity ); } -const createHSL = function ( r, g, b, opacity ) { +function createHSL ( r, g, b, opacity ) { const cell = document.querySelector( "#HSL td" ); r = r / 255, g = g / 255, @@ -138,27 +138,27 @@ l = +( l * 100 ).toFixed( 1 ); if( opacity == 1 ) { - cell.innerHTML = `hsl(${h} ${s}% ${l}%)`; + cell.textContent = `hsl(${h} ${s}% ${l}%)`; } else { - cell.innerHTML = `hsl(${h} ${s}% ${l}% / ${opacity})` + cell.textContent = `hsl(${h} ${s}% ${l}% / ${opacity})` } createHWB( h, s, l, opacity ); } -const createHWB = function ( h, s, l, opacity ) { +function createHWB ( h, s, l, opacity ) { const cell = document.querySelector( "#HWB td" ); const hsv = s * ( l < 50 ? l : 100 - l ) / 100; const W = hsv === 0 ? 0 : 2 * hsv / ( l + hsv ) * 100; const B = l + hsv; if( opacity == 1 ) { - cell.innerHTML = `hwb(${h} ${W.toFixed( 1 )}% ${B.toFixed( 1 )}%)`; + cell.textContent = `hwb(${h} ${W.toFixed( 1 )}% ${B.toFixed( 1 )}%)`; } else { - cell.innerHTML = `hwb(${h} ${W.toFixed( 1 )}% ${B.toFixed( 1 )}% / ${opacity})`; + cell.textContent = `hwb(${h} ${W.toFixed( 1 )}% ${B.toFixed( 1 )}% / ${opacity})`; } } -const setBackgroundColor = function ( color, opacity ) { +function setBackgroundColor ( color, opacity ) { const body = document.querySelector( "div" ); if( opacity != 1 ) { color = color + "" + hexOpacity( opacity ); @@ -168,14 +168,14 @@ colorPicker.style.accentColor = color; } -const hexOpacity = function( opacity ) { - if( opacity > 0 ) { +function hexOpacity( opacity ) { + if( opacity > 0 ){ return Math.floor( opacity * 255 ).toString( 16 ); } else { return "00"; } -} +} From 11060ca9e54abce5a3372a92ced3018f87690a6e Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Wed, 15 Mar 2023 14:07:53 -0700 Subject: [PATCH 110/188] prettier --- modules/colors.html | 355 ++++++++++++++++++++++++-------------------- 1 file changed, 190 insertions(+), 165 deletions(-) diff --git a/modules/colors.html b/modules/colors.html index 4cb6ade6..bc78120a 100644 --- a/modules/colors.html +++ b/modules/colors.html @@ -4,178 +4,203 @@ Color picker - +
      - + - + - - - - + + + + + + + + + + + + + + + +
      Current color values: + Current color values: +
      RGB
      HEX
      HSL
      HWB
      RGB
      HEX
      HSL
      HWB
      - -

      -

      + +

      + +

      +

      + +

      - - + + From da98dd5519bf3bb5ea14d838b0af91709a17c991 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Wed, 15 Mar 2023 22:07:15 -0700 Subject: [PATCH 111/188] oopsie fixed --- modules/colors.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/colors.html b/modules/colors.html index bc78120a..e08c8dba 100644 --- a/modules/colors.html +++ b/modules/colors.html @@ -124,7 +124,7 @@ function createRGB(color, opacity) { const cell = document.querySelector("#RGB td"); - color = color.substring(1, 6); + color = color.substring(1, 7); const hexArray = color.match(/.{1,2}/g); const R = parseInt(hexArray[0], 16); const G = parseInt(hexArray[1], 16); From e810473e400976ee9678b7bab9ee9fd966147236 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Thu, 16 Mar 2023 10:28:02 -0700 Subject: [PATCH 112/188] stringify hexopacity --- modules/colors.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/colors.html b/modules/colors.html index e08c8dba..9bf35551 100644 --- a/modules/colors.html +++ b/modules/colors.html @@ -118,7 +118,7 @@ if (opacity === 1) { cell.textContent = color; } else { - cell.textContent = color + hexOpacity(opacity); + cell.textContent = `${color}${hexOpacity(opacity)}`; } } From 35906ee1c9c68bcf297279e19e28ce3cb7aa85de Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Thu, 16 Mar 2023 10:35:44 -0700 Subject: [PATCH 113/188] make re-used code a function --- modules/colors.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/modules/colors.html b/modules/colors.html index 9bf35551..7b1f26c4 100644 --- a/modules/colors.html +++ b/modules/colors.html @@ -118,7 +118,7 @@ if (opacity === 1) { cell.textContent = color; } else { - cell.textContent = `${color}${hexOpacity(opacity)}`; + cell.textContent = hexOpacity(color, opacity); } } @@ -187,19 +187,19 @@ function setBackgroundColor(color, opacity) { const body = document.querySelector("div"); if (opacity !== 1) { - color = color + "" + hexOpacity(opacity); + color = hexOpacity(color, opacity); } body.style.backgroundColor = color; opacityPicker.style.accentColor = color; colorPicker.style.accentColor = color; } - function hexOpacity(opacity) { + function hexOpacity(color, opacity) { + let char = "00" if (opacity > 0) { - return Math.floor(opacity * 255).toString(16); - } else { - return "00"; + char = Math.floor(opacity * 255).toString(16); } + return `${color}${char}` } From b7711ca9cdc5759d20058707432115973a670e75 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Thu, 16 Mar 2023 10:36:35 -0700 Subject: [PATCH 114/188] prettier --- modules/colors.html | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/modules/colors.html b/modules/colors.html index 7b1f26c4..ab32f3c2 100644 --- a/modules/colors.html +++ b/modules/colors.html @@ -27,7 +27,13 @@ font-family: monospace; } body { - background: linear-gradient(-90deg, transparent 0 38%, 47%, rgb(0 0 0 / 0.7) 50%, white 50% 100%), + background: linear-gradient( + -90deg, + transparent 0 38%, + 47%, + rgb(0 0 0 / 0.7) 50%, + white 50% 100% + ), conic-gradient( black 0 90deg, transparent 90deg 180deg, @@ -195,11 +201,11 @@ } function hexOpacity(color, opacity) { - let char = "00" + let char = "00"; if (opacity > 0) { - char = Math.floor(opacity * 255).toString(16); + char = Math.floor(opacity * 255).toString(16); } - return `${color}${char}` + return `${color}${char}`; } From 614929adb16a6bb305601a2fe570f604b2c1a4e4 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Thu, 16 Mar 2023 10:52:15 -0700 Subject: [PATCH 115/188] js syntax === and () around tertiaries --- modules/colors.html | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/modules/colors.html b/modules/colors.html index ab32f3c2..e2beaf04 100644 --- a/modules/colors.html +++ b/modules/colors.html @@ -136,7 +136,7 @@ const G = parseInt(hexArray[1], 16); const B = parseInt(hexArray[2], 16); - if (opacity == 1) { + if (opacity === 1) { cell.textContent = `rgb(${R} ${G} ${B})`; } else { cell.textContent = `rgb(${R} ${G} ${B} / ${opacity})`; @@ -154,9 +154,9 @@ s = 0, l = 0; - if (delta == 0) h = 0; - else if (cmax == r) h = ((g - b) / delta) % 6; - else if (cmax == g) h = (b - r) / delta + 2; + if (delta === 0) h = 0; + else if (cmax === r) h = ((g - b) / delta) % 6; + else if (cmax === g) h = (b - r) / delta + 2; else h = (r - g) / delta + 4; h = Math.round(h * 60); @@ -164,11 +164,11 @@ if (h < 0) h += 360; l = (cmax + cmin) / 2; - s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1)); + s = (delta === 0) ? 0 : delta / (1 - Math.abs(2 * l - 1)); s = +(s * 100).toFixed(1); l = +(l * 100).toFixed(1); - if (opacity == 1) { + if (opacity === 1) { cell.textContent = `hsl(${h} ${s}% ${l}%)`; } else { cell.textContent = `hsl(${h} ${s}% ${l}% / ${opacity})`; @@ -178,8 +178,8 @@ function createHWB(h, s, l, opacity) { const cell = document.querySelector("#HWB td"); - const hsv = (s * (l < 50 ? l : 100 - l)) / 100; - const W = hsv === 0 ? 0 : ((2 * hsv) / (l + hsv)) * 100; + const hsv = (s * ((l < 50) ? l : 100 - l)) / 100; + const W = (hsv === 0) ? 0 : ((2 * hsv) / (l + hsv)) * 100; const B = l + hsv; if (opacity === 1) { cell.textContent = `hwb(${h} ${W.toFixed(1)}% ${B.toFixed(1)}%)`; From 3aed42a4fb900b402598c741536e77372f404298 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Fri, 17 Mar 2023 12:12:13 -0700 Subject: [PATCH 116/188] Update modules/colors.html Co-authored-by: Jean-Yves Perrier --- modules/colors.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/modules/colors.html b/modules/colors.html index e2beaf04..33e867d9 100644 --- a/modules/colors.html +++ b/modules/colors.html @@ -179,14 +179,14 @@ function createHWB(h, s, l, opacity) { const cell = document.querySelector("#HWB td"); const hsv = (s * ((l < 50) ? l : 100 - l)) / 100; - const W = (hsv === 0) ? 0 : ((2 * hsv) / (l + hsv)) * 100; - const B = l + hsv; + let W = (hsv === 0) ? 0 : ((2 * hsv) / (l + hsv)) * 100; + let B = l + hsv; + W = W.toFixed(1); + B = B.toFixed(1); if (opacity === 1) { - cell.textContent = `hwb(${h} ${W.toFixed(1)}% ${B.toFixed(1)}%)`; + cell.textContent = `hwb(${h} ${W}% ${B}%)`; } else { - cell.textContent = `hwb(${h} ${W.toFixed(1)}% ${B.toFixed( - 1 - )}% / ${opacity})`; + cell.textContent = `hwb(${h} ${W}% ${B}% / ${opacity})`; } } From fb7cad5fa2de6ecda5bc792b38032ead71abb2a1 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Fri, 17 Mar 2023 12:13:19 -0700 Subject: [PATCH 117/188] Apply suggestions from code review Co-authored-by: Jean-Yves Perrier --- modules/colors.html | 26 ++++++++++++++++++-------- 1 file changed, 18 insertions(+), 8 deletions(-) diff --git a/modules/colors.html b/modules/colors.html index 33e867d9..0f1cef5b 100644 --- a/modules/colors.html +++ b/modules/colors.html @@ -113,7 +113,7 @@ function createColor() { const currentColor = colorPicker.value; - const currentOpacity = opacityPicker.value * 1; + const currentOpacity = Number(opacityPicker.value); setBackgroundColor(currentColor, currentOpacity); createHEX(currentColor, currentOpacity); createRGB(currentColor, currentOpacity); @@ -146,7 +146,10 @@ function createHSL(r, g, b, opacity) { const cell = document.querySelector("#HSL td"); - (r = r / 255), (g = g / 255), (b = b / 255); + // Let's have r, g, b in the range [0, 1] + r = r / 255; + g = g / 255; + b = b / 255; const cmin = Math.min(r, g, b); const cmax = Math.max(r, g, b); const delta = cmax - cmin; @@ -154,19 +157,26 @@ s = 0, l = 0; - if (delta === 0) h = 0; - else if (cmax === r) h = ((g - b) / delta) % 6; - else if (cmax === g) h = (b - r) / delta + 2; + if (delta === 0) { + h = 0; + } else if (cmax === r) { + h = ((g - b) / delta) % 6; + } else if (cmax === g) { + h = (b - r) / delta + 2; + } else h = (r - g) / delta + 4; h = Math.round(h * 60); - if (h < 0) h += 360; + // We want an angle between 0 and 360° + if (h < 0) { + h += 360; + } l = (cmax + cmin) / 2; s = (delta === 0) ? 0 : delta / (1 - Math.abs(2 * l - 1)); - s = +(s * 100).toFixed(1); - l = +(l * 100).toFixed(1); + s = Number((s * 100).toFixed(1)); + l = Number((l * 100).toFixed(1)); if (opacity === 1) { cell.textContent = `hsl(${h} ${s}% ${l}%)`; From fb9c0e27afde36883eb0b5b2d1fcdabebb701192 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Mon, 20 Mar 2023 16:15:35 -0700 Subject: [PATCH 118/188] add viewport meta tag --- modules/colors.html | 1 + 1 file changed, 1 insertion(+) diff --git a/modules/colors.html b/modules/colors.html index 0f1cef5b..84d09214 100644 --- a/modules/colors.html +++ b/modules/colors.html @@ -2,6 +2,7 @@ + Color picker + + +
      +
      Select options: + + + + +
      Scroll programatically: + + + +
      +
      + 
       
+    Oh, Rubber Duckie, you're the one
+    You make bath time lots of fun
+    Rubber Duckie, I'm awfully fond of you
+    
+    Rubber Duckie, joy of joys
+    When I squeeze you, you make noise
+    Rubber Duckie, you're my very best friend, it's true
+    
+    Oh, every day when I make my way to the tubby
+    I find a little fella who's cute and yellow and chubby
+    Rub-a-dub-dubby
+    
+    Rubber Duckie, you're so fine
+    And I'm lucky that you're mine
+    Rubber Duckie, I'm awfully fond of you
+
      +
      + + + From 773cea42e77e3e8ef7fbe5665640a47beb1bb9b4 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Sun, 23 Apr 2023 18:11:02 -0700 Subject: [PATCH 129/188] shrink title so it doesn't always overflow --- modules/overflow.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/overflow.html b/modules/overflow.html index 90020584..edb413f2 100644 --- a/modules/overflow.html +++ b/modules/overflow.html @@ -33,7 +33,7 @@ color: white; background: crimson; display: inline-block; - width: 100%; + min-width: 50%; padding: 3px 5px; box-sizing: border-box; } From 95308ff1b90284df5351df9bfff821b3f2ce3e2c Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Sun, 23 Apr 2023 18:17:05 -0700 Subject: [PATCH 130/188] prettier --- modules/overflow.html | 291 ++++++++++++++++++++++-------------------- 1 file changed, 153 insertions(+), 138 deletions(-) diff --git a/modules/overflow.html b/modules/overflow.html index edb413f2..63f70216 100644 --- a/modules/overflow.html +++ b/modules/overflow.html @@ -5,112 +5,128 @@ Overflow
      -
      Select options: -
      From ecc29d5bbe03cbdd22091ed863080094ea50f995 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Sun, 23 Apr 2023 18:19:32 -0700 Subject: [PATCH 131/188] keep scroll position when changing views --- modules/overflow.html | 2 ++ 1 file changed, 2 insertions(+) diff --git a/modules/overflow.html b/modules/overflow.html index 63f70216..e16095bd 100644 --- a/modules/overflow.html +++ b/modules/overflow.html @@ -158,10 +158,12 @@ } else { pre.className = `${val.value}`; } + scrollExample(); }); wide.addEventListener("change", () => { pre.classList.toggle("wide"); + scrollExample(); }); ocm.addEventListener("change", () => { From a50301c3278cbe86459dccd022ad314ffa4a7eae Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Sun, 23 Apr 2023 18:26:48 -0700 Subject: [PATCH 132/188] force clipMargin --- modules/overflow.html | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/modules/overflow.html b/modules/overflow.html index e16095bd..81fd0269 100644 --- a/modules/overflow.html +++ b/modules/overflow.html @@ -17,7 +17,7 @@ pre { border: 2px dashed crimson; - height: 100px; + height: 150px; width: 20em; margin-bottom: 3em; overflow-clip-margin: 1em; @@ -159,6 +159,7 @@ pre.className = `${val.value}`; } scrollExample(); + clipMargin(); }); wide.addEventListener("change", () => { @@ -167,7 +168,7 @@ }); ocm.addEventListener("change", () => { - pre.style.overflowClipMargin = `${ocm.value}em`; + clipMargin(); }); scrollL.addEventListener("change", () => { @@ -179,11 +180,15 @@ function scrollExample() { pre.scrollTo({ - top: scrollT.value * 26, + top: scrollT.value, left: scrollL.value * 2, behavior: "smooth", }); } + + function clipMargin() { + pre.style.overflowClipMargin = `${ocm.value}em`; + } From 739740b1d9df9268b979c2cbdd6c523f48aebe8f Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Sun, 23 Apr 2023 22:39:22 -0700 Subject: [PATCH 133/188] duplicate overflow values --- modules/overflow.html | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/modules/overflow.html b/modules/overflow.html index 81fd0269..5bbca06e 100644 --- a/modules/overflow.html +++ b/modules/overflow.html @@ -39,43 +39,43 @@ } .hidden { - overflow: hidden; + overflow: hidden hidden; } .hidden::before { content: "hidden: "; } .clip { - overflow: clip; + overflow: clip clip; } .clip::before { content: "clip: "; } .scroll { - overflow: scroll; + overflow: scroll scroll; } .scroll::before { content: "scroll: "; } .auto { - overflow: auto; + overflow: auto auto; } .auto::before { content: "auto: "; } .overlay { - overflow: clip; - overflow: overlay; + overflow: clip clip; + overflow: overlay overlay; } .overlay::before { content: "overlay (or clip if not supported): "; } .visible { - overflow: visible; + overflow: visible visible; } .visible::before { content: "visible: "; From 5ba395112c4a6da244e3259fe67bbb778be563ec Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Wed, 3 May 2023 16:54:55 -0700 Subject: [PATCH 134/188] New example: scroll snap --- modules/scroll_snap.html | 162 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 162 insertions(+) create mode 100644 modules/scroll_snap.html diff --git a/modules/scroll_snap.html b/modules/scroll_snap.html new file mode 100644 index 00000000..95afb80c --- /dev/null +++ b/modules/scroll_snap.html @@ -0,0 +1,162 @@ + + + + + + Scroll snap + + + +
      +
        +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      +
      +

      +

      +

      + + + + + +

      +
      + + + From 9e7dc8c72d222641bb22d055fc7b6605d9d03cec Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Wed, 3 May 2023 16:58:21 -0700 Subject: [PATCH 135/188] New example: scroll snap --- modules/scroll_snap.html | 223 +++++++++++++++++++++++---------------- 1 file changed, 130 insertions(+), 93 deletions(-) diff --git a/modules/scroll_snap.html b/modules/scroll_snap.html index 95afb80c..b3527dc2 100644 --- a/modules/scroll_snap.html +++ b/modules/scroll_snap.html @@ -4,61 +4,70 @@ Scroll snap - +
      @@ -112,51 +121,79 @@
    -

    -

    -

    - - - - - +

    + +

    +

    + +

    +

    + + + + + + +

    - + function setSST() { + if (stop.checked) { + rules[0].style.scrollSnapStop = "always"; + } else { + rules[0].style.scrollSnapStop = "normal"; + } + } + From 4cf4b2f994c8222e2abe4ea1f469e89947fdb483 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Thu, 4 May 2023 15:40:34 -0700 Subject: [PATCH 136/188] more features --- modules/scroll_snap.html | 116 ++++++++++++++++++++++++--------------- 1 file changed, 72 insertions(+), 44 deletions(-) diff --git a/modules/scroll_snap.html b/modules/scroll_snap.html index b3527dc2..bee18229 100644 --- a/modules/scroll_snap.html +++ b/modules/scroll_snap.html @@ -6,29 +6,39 @@ Scroll snap +
      @@ -121,65 +138,76 @@
    +
    + Change the options +

    + +

    +

    + +

    +

    + +

    +
    +

    - -

    -

    - -

    -

    - - - - - - +

    + + + + + +
    + + +
    + +
    + + diff --git a/flexbox/use-cases/media.html b/flexbox/use-cases/media.html index 28540907..15887e7a 100644 --- a/flexbox/use-cases/media.html +++ b/flexbox/use-cases/media.html @@ -1,97 +1,97 @@ - - - - Use cases: media objects - - - + - - - -
    -
    -
    MDN logo
    -
    This is the content of my media object. Items directly inside the flex container will be aligned to flex-start.
    -
    - -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + From e65d3f5efa2640da683a0d745582eb75b41a2728 Mon Sep 17 00:00:00 2001 From: wbamberg Date: Fri, 26 May 2023 14:19:03 -0700 Subject: [PATCH 139/188] Make image max-width visible --- flexbox/use-cases/media-flipped.html | 13 ++++++++----- flexbox/use-cases/media.html | 13 ++++++++----- 2 files changed, 16 insertions(+), 10 deletions(-) diff --git a/flexbox/use-cases/media-flipped.html b/flexbox/use-cases/media-flipped.html index 46ba1496..7f3d3a31 100644 --- a/flexbox/use-cases/media-flipped.html +++ b/flexbox/use-cases/media-flipped.html @@ -27,7 +27,7 @@ } textarea:nth-of-type(1) { - height: 250px; + height: 310px; } textarea:nth-of-type(2) { @@ -56,10 +56,6 @@ margin: 5px; } - img { - max-width: 100%; - } - .media { width: 500px; border: 2px dotted rgb(96, 139, 168); @@ -74,6 +70,9 @@ } + + +
    +
    +

    A Lament for Confederation

    +

    —Chief Dan George, 1967

    +
    + +

    + How long have I known you, Oh Canada? A hundred years? Yes, a hundred + years. And many, many tides more. And today, when you celebrate your + hundred years, Oh Canada, I am sad for all the Indian people throughout + the land. +

    + +

    + For I have known you when your forests were mine; when they gave me my + meat and my clothing. I have known you in your fruits and rivers where + your fish flashed and danced in the sun, where the waters said ‘come and + eat of my abundance.’ I have known you in the freedom of your winds. And + my spirit, like your winds, once roamed this good lands. +

    + +
    +

    + But in long the hundred years since the white man came, I have seen + that freedom disappear just like the salmon going mysteriously out to + sea. +

    +
    + +

    + The white man’s strange customs I could not understand, pressed down + upon me until I could no longer breathe. +

    + +

    + When I fought to protect my home and my land, I was called a savage. + When I neither understood nor welcomed this new way of life, I was + called lazy. When I tried to rule my people, I was stripped of my + authority. +

    + +

    + My nation was ignored in your history textbooks – we were less important + in the history of Canada than the buffalo that ranged the plains. I was + ridiculed in your plays and motion pictures, and when I drank your + fire-water, I got drunk – very, very drunk. And I forgot. +

    + +

    + Oh Canada, how can I celebrate with you this centenary, this hundred + years? Shall I thank you for the reserves that are left me of my + beautiful forests? Shall I thank you for the canned fish of my rivers? + Shall I thank you for the loss of my pride and authority, even among my + own people? For the lack of my will to fight back? No! I must forget + what is past and gone. +

    + +

    + Oh God in heaven! Give me the courage of the olden chiefs. Let me + wrestle with my surroundings. Let me once again, as in the days of old, + dominate my environment. Let me humbly accept this new culture and + through it rise up and go on. +

    + +

    + Oh god, like the thunderbird of old, I shall rise again out of the sea. + I shall grab the instruments of the white man’s success – his education, + his skills, and with these new tools I shall build my race into the + proudest segment of your society. And, before I follow the great chiefs + who have gone before us, I shall see these things come to pass. +

    + +

    + I shall see our young braves and our chiefs sitting in the house of law + and government, ruling and being ruled by the knowledge and freedoms of + our great land. So shall we shatter the barriers of our isolation. So + shall the next hundred years be the greatest in the proud history of our + tribes and nations. +

    +
    +
    + + Column options + +
    +

    + + +

    +

    + + +

    +

    + + +

    +

    + + +

    +

    + + +

    +
    +
    + + + From 0579e4b656dcf6d684f640eb6bf02a9955e081c8 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Tue, 30 May 2023 08:48:05 -0700 Subject: [PATCH 141/188] New example: Multicol module --- modules/multicol.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/multicol.html b/modules/multicol.html index 0a33b40f..addfcc1a 100644 --- a/modules/multicol.html +++ b/modules/multicol.html @@ -3,7 +3,7 @@ - Module template + CSS column layout example @@ -107,11 +104,7 @@ From 0c45fe11b2022f2e71d830e8e25a4d858d0de479 Mon Sep 17 00:00:00 2001 From: Onkar Ruikar <87750369+OnkarRuikar@users.noreply.github.com> Date: Tue, 18 Jul 2023 07:19:31 +0530 Subject: [PATCH 149/188] Update other examples --- learn/overflow/auto.html | 4 ++-- learn/overflow/hidden.html | 4 ++-- learn/overflow/scroll-y.html | 4 ++-- learn/overflow/scroll.html | 4 ++-- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/learn/overflow/auto.html b/learn/overflow/auto.html index 44177b1e..12feff2e 100644 --- a/learn/overflow/auto.html +++ b/learn/overflow/auto.html @@ -11,7 +11,7 @@ + + + +
    +
    +

    A heading

    +

    I am a paragraph.

    +
    I am a div
    +

    I am another paragraph.

    +
    +
    + + + + + +
    + +
    + + + + From 4c372e63a453d57b9c368cc4a8b6563ae6f01785 Mon Sep 17 00:00:00 2001 From: wbamberg Date: Tue, 5 Sep 2023 01:44:10 -0700 Subject: [PATCH 151/188] Fix content issue 28901 (#148) * Prettier * Remove unused CSS --- .../sizing/height-min-height-download.html | 60 +++++++++---------- 1 file changed, 29 insertions(+), 31 deletions(-) diff --git a/learn/tasks/sizing/height-min-height-download.html b/learn/tasks/sizing/height-min-height-download.html index 99a6b7ba..599bab0e 100644 --- a/learn/tasks/sizing/height-min-height-download.html +++ b/learn/tasks/sizing/height-min-height-download.html @@ -5,45 +5,43 @@ Sizing Task 1: height and min-height -
    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens corn soko endive gumbo gourd.

    +

    + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh + onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo + beet greens corn soko endive gumbo gourd. +

    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens corn soko endive gumbo gourd.

    +

    + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh + onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo + beet greens corn soko endive gumbo gourd. +

    - - From 3d6605646f74a803682f6b41828385716c7f5f68 Mon Sep 17 00:00:00 2001 From: Brian Thomas Smith Date: Wed, 6 Sep 2023 15:43:48 +0200 Subject: [PATCH 152/188] chore(learn): Remove legacy syntax for rgb()/rgba() (#149) --- learn/values-units/color-rgb.html | 28 ++++++++++++++-------------- learn/values-units/color-rgba.html | 28 ++++++++++++++-------------- 2 files changed, 28 insertions(+), 28 deletions(-) diff --git a/learn/values-units/color-rgb.html b/learn/values-units/color-rgb.html index c77cb530..d9669f2f 100644 --- a/learn/values-units/color-rgb.html +++ b/learn/values-units/color-rgb.html @@ -17,15 +17,15 @@ @@ -33,31 +33,31 @@
    -
    rgb(2,121,139)
    -
    rgb(197,93,161)
    -
    rgb(18,138,125)
    +
    rgb(2 121 139)
    +
    rgb(197 93 161)
    +
    rgb(18 138 125)
    - - diff --git a/learn/values-units/color-rgba.html b/learn/values-units/color-rgba.html index 2c96d26f..c10d64e4 100644 --- a/learn/values-units/color-rgba.html +++ b/learn/values-units/color-rgba.html @@ -21,15 +21,15 @@ @@ -37,31 +37,31 @@
    -
    rgba(2, 121, 139, .3)
    -
    rgba(197, 93, 161, .7)
    -
    rgba(18, 138, 125, .9)
    +
    rgb(2 121 139 / .3)
    +
    rgb(197 93 161 / .7)
    +
    rgb(18 138 125 / .9)
    - - From e3768f4aa37bd5208ea4cf2e4f0e18e0b5844e06 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Wed, 20 Sep 2023 23:00:09 -0700 Subject: [PATCH 153/188] New example: generated content (#151) * New example: generated content * New example: generated content * Update modules/generated_content.html --------- Co-authored-by: Jean-Yves Perrier --- modules/generated_content.html | 61 ++++++++++++++++++++++++++++++++++ 1 file changed, 61 insertions(+) create mode 100644 modules/generated_content.html diff --git a/modules/generated_content.html b/modules/generated_content.html new file mode 100644 index 00000000..7dc529dd --- /dev/null +++ b/modules/generated_content.html @@ -0,0 +1,61 @@ + + + + + + Generated content + + + +
    + + From 2d33a1c5aede31cc0e15415bce708950de582675 Mon Sep 17 00:00:00 2001 From: Onkar Ruikar <87750369+OnkarRuikar@users.noreply.github.com> Date: Tue, 10 Oct 2023 18:55:31 +0530 Subject: [PATCH 154/188] Format all code (#153) --- CODE_OF_CONDUCT.md | 5 +- _config.yml | 2 +- alt-style-sheets/default.css | 32 +- alt-style-sheets/fancy.css | 32 +- alt-style-sheets/index.html | 49 +- alt-style-sheets/simple.css | 20 +- .../index-transitions.html | 17 +- .../index-waa.html | 42 +- animation-frames-timing-function/index.html | 17 +- assets/playable.js | 31 +- assets/styles.css | 92 +- backdrop/index.html | 44 +- backdrop/playable.js | 28 +- backdrop/script.js | 87 +- backdrop/style.css | 30 +- backdrop/styles.css | 92 +- box-alignment/flexbox/auto-margins.html | 225 +- box-alignment/flexbox/gap.html | 257 +- box-alignment/overview/flex-align-items.html | 253 +- box-alignment/overview/grid-align-items.html | 263 +- box-alignment/overview/grid-gap.html | 257 +- contain/contain-fix.html | 22 +- contain/contain-style-counter.html | 2 +- contain/contain-style-quotes.html | 2 +- contain/float-interference.html | 20 +- contain/simple-layout.html | 18 +- counter-style-demo/README.md | 3 +- counter-style-demo/css/style.css | 232 +- counter-style-demo/index.html | 252 +- counter-style-demo/js/script.js | 856 ++-- .../breadcrumb-navigation--download.html | 84 +- css-cookbook/breadcrumb-navigation.html | 113 +- css-cookbook/card--download.html | 222 +- css-cookbook/card.html | 342 +- css-cookbook/center--download.html | 72 +- css-cookbook/center.html | 133 +- css-cookbook/columns-flexbox--download.html | 92 +- .../columns-flexbox-wrapping--download.html | 100 +- css-cookbook/columns-flexbox-wrapping.html | 174 +- css-cookbook/columns-flexbox.html | 175 +- css-cookbook/columns-grid--download.html | 91 +- css-cookbook/columns-grid.html | 162 +- css-cookbook/columns-multicol--download.html | 82 +- css-cookbook/columns-multicol.html | 144 +- css-cookbook/cookbook-template--download.html | 44 +- css-cookbook/cookbook-template.html | 33 +- css-cookbook/grid-wrapper--download.html | 147 +- css-cookbook/grid-wrapper.html | 246 +- css-cookbook/list-group-badges--download.html | 121 +- css-cookbook/list-group-badges.html | 152 +- css-cookbook/media-objects--download.html | 225 +- .../media-objects-fallback--download.html | 280 +- css-cookbook/media-objects-fallback.html | 413 +- css-cookbook/media-objects.html | 324 +- css-cookbook/pagination--download.html | 154 +- css-cookbook/pagination.html | 173 +- css-cookbook/playable.js | 28 +- css-cookbook/split-navigation--download.html | 82 +- css-cookbook/split-navigation.html | 95 +- css-cookbook/sticky-footer--download.html | 103 +- .../sticky-footer-flexbox--download.html | 116 +- css-cookbook/sticky-footer-flexbox.html | 252 +- css-cookbook/sticky-footer.html | 178 +- css-cookbook/styles.css | 126 +- css-text/hyphens.html | 21 +- css-text/inline-overflow-hidden.html | 11 +- css-text/inline-overflow.html | 17 +- css-text/min-content.html | 15 +- css-text/overflow-wrap.html | 19 +- css-text/playable.js | 28 +- css-text/styles.css | 92 +- css-text/wbr.html | 19 +- css-text/word-break-checkbox.html | 35 +- css-text/word-break.html | 27 +- cssom/modify-rule.html | 15 +- display/multi-keyword/block-flow-root.html | 252 +- display/multi-keyword/inline-block.html | 206 +- display/multi-keyword/inline-flex.html | 209 +- display/multi-keyword/multi-keyword-flex.html | 273 +- display/multi-keyword/span-flex.html | 195 +- feature-queries/and.html | 74 +- feature-queries/not.html | 73 +- feature-queries/or.html | 73 +- feature-queries/simple.html | 70 +- feature-queries/step1.html | 59 +- feature-queries/step2.html | 69 +- feature-queries/step3.html | 79 +- feature-queries/step4.html | 79 +- flexbox/alignment/align-content-column.html | 261 +- flexbox/alignment/align-content.html | 257 +- flexbox/alignment/align-items.html | 219 +- flexbox/alignment/align-self-column.html | 237 +- flexbox/alignment/align-self.html | 235 +- flexbox/alignment/auto-margins.html | 225 +- flexbox/alignment/intro.html | 237 +- flexbox/alignment/justify-content-column.html | 226 +- .../alignment/justify-content-reverse.html | 224 +- .../justify-content-writing-mode.html | 246 +- flexbox/alignment/justify-content.html | 221 +- flexbox/basics/align-items.html | 239 +- flexbox/basics/flex-direction.html | 228 +- flexbox/basics/flex-flow.html | 214 +- flexbox/basics/flex-properties.html | 240 +- flexbox/basics/flex-shorthands.html | 240 +- flexbox/basics/flex-wrap.html | 216 +- flexbox/basics/justify-content.html | 227 +- flexbox/basics/simple-example-anon.html | 225 +- flexbox/basics/simple-example.html | 241 +- flexbox/basics/the-flex-container.html | 235 +- flexbox/browsers/float.html | 240 +- flexbox/browsers/inline-block.html | 238 +- flexbox/browsers/table-cell.html | 238 +- flexbox/browsers/vertical-align.html | 238 +- flexbox/index.html | 168 +- flexbox/order/flex-direction.html | 254 +- flexbox/order/negative-order.html | 291 +- flexbox/order/order.html | 298 +- flexbox/order/usecase-order.html | 291 +- flexbox/ratios/flex-basis.html | 228 +- flexbox/ratios/flex-grow-ratios.html | 246 +- flexbox/ratios/flex-grow.html | 222 +- flexbox/ratios/flex-shrink-min-content.html | 222 +- flexbox/ratios/flex-shrink-ratios.html | 254 +- flexbox/ratios/flex-shrink.html | 224 +- flexbox/ratios/min-max-content.html | 220 +- flexbox/relationship/display-contents.html | 276 +- flexbox/relationship/flex-layout.html | 292 +- flexbox/relationship/floats.html | 264 +- flexbox/relationship/grid-layout.html | 276 +- flexbox/relationship/writing-modes.html | 252 +- flexbox/use-cases/cards.html | 266 +- flexbox/use-cases/center.html | 237 +- flexbox/use-cases/input-button.html | 249 +- flexbox/use-cases/label-input-button.html | 261 +- flexbox/use-cases/media-flipped.html | 15 +- flexbox/use-cases/media.html | 15 +- flexbox/use-cases/navigation-flex.html | 223 +- flexbox/use-cases/navigation.html | 221 +- flexbox/use-cases/split-navigation.html | 249 +- flexbox/wrapping/column-wrap.html | 259 +- flexbox/wrapping/flex-grid.html | 245 +- flexbox/wrapping/gaps.html | 276 +- flexbox/wrapping/grid-example.html | 254 +- flexbox/wrapping/row-reverse-wrap.html | 240 +- flexbox/wrapping/row-wrap.html | 238 +- flexbox/wrapping/visibility-collapse.html | 261 +- .../wrapping/wrapped-visibility-collapse.html | 293 +- flow/block-inline/change-formatting.html | 215 +- flow/block-inline/flex.html | 216 +- flow/block-inline/inline.html | 201 +- flow/block-inline/line-box.html | 217 +- flow/block-inline/normal-flow-collapsing.html | 211 +- .../block-inline/normal-flow-margin-zero.html | 212 +- flow/block-inline/normal-flow-width.html | 211 +- flow/block-inline/normal-flow.html | 209 +- flow/formatting-contexts/bfc-flow-root.html | 239 +- flow/formatting-contexts/bfc-overflow.html | 239 +- flow/formatting-contexts/float.html | 237 +- flow/formatting-contexts/inline.html | 222 +- flow/in-flow/abspos.html | 255 +- flow/in-flow/float.html | 229 +- flow/in-flow/in-flow.html | 245 +- flow/in-flow/relative.html | 255 +- flow/overflow/auto.html | 220 +- flow/overflow/hidden.html | 220 +- flow/overflow/overflow-y.html | 220 +- flow/overflow/overflow.html | 218 +- flow/overflow/scroll.html | 220 +- flow/overflow/text-overflow.html | 251 +- flow/writing-modes/block-change-mode.html | 253 +- flow/writing-modes/creative-use.html | 208 +- flow/writing-modes/horizontal-tb.html | 209 +- flow/writing-modes/inline-change-mode.html | 213 +- flow/writing-modes/inline-size.html | 223 +- flow/writing-modes/replaced.html | 227 +- flow/writing-modes/vertical-lr.html | 209 +- flow/writing-modes/vertical-rl.html | 209 +- flow/writing-modes/width.html | 223 +- font-features/font-kerning.html | 431 +- font-features/font-variant-alternates.html | 491 +- font-features/font-variant-caps.html | 462 +- font-features/font-variant-east-asian.html | 426 +- font-features/font-variant-ligatures.html | 432 +- .../font-variant-numeric-example.html | 46 +- font-features/font-variant-numeric-frac.html | 453 +- font-features/font-variant-numeric.html | 452 +- font-features/font-variant-position.html | 462 +- font-features/font-variant.html | 424 +- .../IPA_Font_License_Agreement_v1.0.txt | 12 +- font-features/playable.js | 28 +- font-features/styles.css | 92 +- grid/docs/autoplacement.html | 69 +- grid/masonry/align-tracks.html | 40 +- grid/masonry/block-axis.html | 39 +- grid/masonry/inline-axis.html | 38 +- grid/masonry/justify-tracks.html | 38 +- grid/masonry/masonry-auto-flow.html | 42 +- grid/masonry/positioned.html | 40 +- grid/masonry/spanners.html | 44 +- grid/playable.js | 28 +- grid/styles.css | 92 +- grid/subgrid/adding-line-names.html | 13 +- grid/subgrid/both.html | 13 +- grid/subgrid/columns.html | 13 +- grid/subgrid/gap.html | 15 +- grid/subgrid/implicit.html | 13 +- grid/subgrid/line-names.html | 13 +- grid/subgrid/no-implicit.html | 13 +- grid/subgrid/rows.html | 13 +- houdini/css_painting_api/boxbg.js | 53 +- houdini/css_painting_api/example-boxbg.html | 99 +- howto/box-shadow-button.html | 75 +- howto/center.html | 60 +- howto/highlight_first_line.html | 57 +- howto/highlight_first_line2.html | 57 +- howto/highlight_first_para.html | 57 +- howto/highlight_h1_plus_para.html | 61 +- howto/object-fit.html | 105 +- howto/opacity.html | 104 +- howto/playable.js | 28 +- howto/styles.css | 126 +- howto/text-shadow.html | 70 +- howto/transition-button.html | 96 +- images/image-set-type.html | 60 +- images/image-set.html | 62 +- images/playable.js | 28 +- images/styles.css | 92 +- inline-formatting/align.html | 25 +- inline-formatting/break.html | 23 +- inline-formatting/inline.html | 29 +- inline-formatting/mbp.html | 21 +- inline-formatting/text-align.html | 29 +- is-where/index.html | 107 +- layout/normal-flow.html | 225 +- .../background-blend-mode.html | 30 +- .../backgrounds-borders/background-image.html | 17 +- learn/backgrounds-borders/background.html | 42 +- learn/backgrounds-borders/borders.html | 17 +- learn/backgrounds-borders/color.html | 19 +- learn/backgrounds-borders/corners.html | 18 +- learn/backgrounds-borders/gradients.html | 29 +- learn/backgrounds-borders/mix-blend-mode.html | 38 +- .../multiple-background-image.html | 17 +- learn/backgrounds-borders/position.html | 16 +- learn/backgrounds-borders/repeat.html | 16 +- learn/backgrounds-borders/size.html | 16 +- learn/backgrounds-borders/task.html | 23 +- learn/box-model/block.html | 16 +- learn/box-model/border.html | 21 +- learn/box-model/box-models.html | 17 +- learn/box-model/inline-block-nav.html | 38 +- learn/box-model/inline-block.html | 26 +- learn/box-model/inline-box-model.html | 26 +- learn/box-model/inline.html | 37 +- learn/box-model/margin-collapse.html | 21 +- learn/box-model/margin.html | 19 +- learn/box-model/padding.html | 19 +- learn/cascade/all.html | 79 +- learn/cascade/cascade-layers.html | 98 +- learn/cascade/cascade-simple.html | 57 +- learn/cascade/important.html | 81 +- learn/cascade/inheritance-simple.html | 55 +- learn/cascade/inheritance.html | 136 +- learn/cascade/keywords.html | 93 +- learn/cascade/mixing-rules.html | 81 +- learn/cascade/specificity-boxes.html | 181 +- learn/cascade/specificity-simple.html | 59 +- learn/cascade/task.html | 53 +- learn/getting-started--download.html | 31 +- learn/getting-started/biog-download.html | 28 +- learn/getting-started/biog.html | 125 +- learn/getting-started/experiment-sandbox.html | 40 +- learn/getting-started/started1.html | 70 +- learn/getting-started/started2.html | 70 +- learn/getting-started/started3.html | 76 +- learn/images/filter-text.html | 21 +- learn/images/filter.html | 23 +- learn/images/form.html | 31 +- learn/images/layout.html | 18 +- learn/images/object-fit.html | 23 +- learn/images/shapes.html | 30 +- learn/images/size.html | 20 +- learn/inspecting/inspecting.html | 118 +- learn/layers/basic-cascade.html | 45 +- learn/layers/layer-order.html | 84 +- learn/layers/layer-precedence.html | 125 +- learn/layers/media-order.html | 93 +- learn/media-queries/and.html | 30 +- learn/media-queries/grid.html | 11 +- learn/media-queries/hover.html | 34 +- learn/media-queries/max-width.html | 30 +- learn/media-queries/not.html | 34 +- learn/media-queries/or.html | 33 +- learn/media-queries/orientation.html | 34 +- learn/media-queries/step1.html | 8 +- learn/media-queries/step2.html | 8 +- learn/media-queries/step3.html | 8 +- learn/media-queries/width.html | 32 +- learn/overflow/auto.html | 24 +- learn/overflow/block-overflow.html | 24 +- learn/overflow/hidden.html | 24 +- learn/overflow/inline-overflow.html | 18 +- learn/overflow/scroll-x.html | 17 +- learn/overflow/scroll-y.html | 24 +- learn/overflow/scroll.html | 24 +- learn/playable.js | 31 +- learn/rwd/fixed-width.html | 40 +- learn/rwd/flex-based-rwd.html | 40 +- learn/rwd/float-based-rwd.html | 40 +- learn/rwd/grid-based-rwd.html | 40 +- learn/rwd/liquid-width.html | 40 +- learn/rwd/type-rwd.html | 40 +- learn/rwd/type-vw.html | 40 +- learn/selectors/adjacent.html | 75 +- learn/selectors/after-icon.html | 42 +- learn/selectors/attribute-case.html | 67 +- learn/selectors/attribute-links.html | 89 +- learn/selectors/attribute-substring.html | 77 +- learn/selectors/attribute.html | 71 +- learn/selectors/before-styled.html | 54 +- learn/selectors/before.html | 42 +- learn/selectors/child.html | 71 +- learn/selectors/class-many.html | 77 +- learn/selectors/class-type.html | 67 +- learn/selectors/class.html | 60 +- learn/selectors/descendant.html | 45 +- learn/selectors/first-child.html | 64 +- learn/selectors/first-child2.html | 67 +- learn/selectors/first-line.html | 67 +- learn/selectors/general.html | 63 +- learn/selectors/hover.html | 56 +- learn/selectors/id.html | 66 +- learn/selectors/nesting.html | 90 +- learn/selectors/selector-list.html | 80 +- learn/selectors/type.html | 80 +- learn/selectors/universal.html | 63 +- learn/sizing/height.html | 19 +- learn/sizing/intrinsic-image.html | 17 +- learn/sizing/intrinsic-text.html | 18 +- learn/sizing/max-width.html | 23 +- learn/sizing/min-height.html | 20 +- learn/sizing/percent-mp.html | 18 +- learn/sizing/percent-width.html | 18 +- learn/sizing/vw-vh.html | 18 +- learn/solutions.md | 6 +- learn/styles.css | 92 +- .../backgrounds/backgrounds1-download.html | 15 +- learn/tasks/backgrounds/backgrounds1.html | 23 +- .../backgrounds/backgrounds2-download.html | 13 +- learn/tasks/backgrounds/backgrounds2.html | 23 +- .../tasks/box-model/box-models-download.html | 18 +- learn/tasks/box-model/box-models.html | 17 +- .../box-model/inline-block-download.html | 29 +- learn/tasks/box-model/inline-block.html | 34 +- learn/tasks/box-model/mbp-download.html | 19 +- learn/tasks/box-model/mbp.html | 19 +- learn/tasks/cascade/cascade-download.html | 8 +- learn/tasks/cascade/cascade.html | 25 +- .../tasks/cascade/cascadelayer-download.html | 2 +- learn/tasks/cascade/cascadelayer.html | 43 +- learn/tasks/cascade/marking.md | 4 +- learn/tasks/flexbox/flexbox1-download.html | 73 +- learn/tasks/flexbox/flexbox1.html | 70 +- learn/tasks/flexbox/flexbox2-download.html | 83 +- learn/tasks/flexbox/flexbox2.html | 77 +- learn/tasks/flexbox/flexbox3-download.html | 73 +- learn/tasks/flexbox/flexbox3.html | 68 +- learn/tasks/flexbox/flexbox4-download.html | 95 +- learn/tasks/flexbox/flexbox4.html | 73 +- learn/tasks/float/float1-download.html | 20 +- learn/tasks/float/float1.html | 18 +- learn/tasks/float/float2-download.html | 20 +- learn/tasks/float/float2.html | 18 +- learn/tasks/float/float3-download.html | 20 +- learn/tasks/float/float3.html | 20 +- learn/tasks/float/marking.md | 2 +- learn/tasks/grid/grid1-download.html | 22 +- learn/tasks/grid/grid1.html | 53 +- learn/tasks/grid/grid2-download.html | 29 +- learn/tasks/grid/grid2.html | 88 +- learn/tasks/grid/grid3-download.html | 25 +- learn/tasks/grid/grid3.html | 57 +- learn/tasks/grid/grid4-download.html | 24 +- learn/tasks/grid/grid4.html | 102 +- learn/tasks/grid/marking.md | 4 + learn/tasks/images/form-download.html | 23 +- learn/tasks/images/form.html | 47 +- learn/tasks/images/marking.md | 2 +- learn/tasks/images/object-fit-download.html | 19 +- learn/tasks/images/object-fit.html | 37 +- learn/tasks/multicol/multicol1-download.html | 40 +- learn/tasks/multicol/multicol1.html | 42 +- learn/tasks/multicol/multicol2-download.html | 40 +- learn/tasks/multicol/multicol2.html | 42 +- learn/tasks/multicol/multicol3-download.html | 38 +- learn/tasks/multicol/multicol3.html | 62 +- .../overflow/overflow-hidden-download.html | 19 +- learn/tasks/overflow/overflow-hidden.html | 21 +- .../overflow/overflow-scroll-download.html | 28 +- learn/tasks/overflow/overflow-scroll.html | 30 +- learn/tasks/playable.js | 28 +- learn/tasks/position/marking.md | 2 +- learn/tasks/position/position1-download.html | 29 +- learn/tasks/position/position1.html | 31 +- learn/tasks/position/position2-download.html | 59 +- learn/tasks/position/position2.html | 49 +- learn/tasks/rwd/rwd-download.html | 60 +- .../selectors/attribute-links-download.html | 14 +- learn/tasks/selectors/attribute-links.html | 89 +- learn/tasks/selectors/class-id-download.html | 32 +- learn/tasks/selectors/class-id.html | 32 +- .../tasks/selectors/combinators-download.html | 21 +- learn/tasks/selectors/combinators.html | 54 +- learn/tasks/selectors/marking.md | 9 +- learn/tasks/selectors/pseudo-download.html | 29 +- learn/tasks/selectors/pseudo.html | 35 +- learn/tasks/selectors/type-download.html | 34 +- learn/tasks/selectors/type.html | 38 +- .../sizing/height-min-height-download.html | 8 +- learn/tasks/sizing/height-min-height.html | 46 +- learn/tasks/sizing/max-width-download.html | 42 +- learn/tasks/sizing/max-width.html | 32 +- learn/tasks/sizing/percentages-download.html | 16 +- learn/tasks/sizing/percentages.html | 39 +- learn/tasks/styles.css | 92 +- learn/tasks/tables/table-download.html | 13 +- learn/tasks/tables/table.html | 159 +- learn/tasks/values/color-download.html | 25 +- learn/tasks/values/color.html | 49 +- learn/tasks/values/length-download.html | 37 +- learn/tasks/values/length.html | 35 +- learn/tasks/values/marking.md | 2 +- learn/tasks/values/position-download.html | 16 +- learn/tasks/values/position.html | 28 +- .../writing-modes/logical-mbp-download.html | 17 +- learn/tasks/writing-modes/logical-mbp.html | 16 +- .../logical-width-height-download.html | 17 +- .../writing-modes/logical-width-height.html | 16 +- .../writing-modes/writing-mode-download.html | 15 +- learn/tasks/writing-modes/writing-mode.html | 13 +- learn/values-units/calc.html | 16 +- learn/values-units/color-hex.html | 13 +- learn/values-units/color-hsl.html | 13 +- learn/values-units/color-hsla.html | 9 +- learn/values-units/color-keywords.html | 13 +- learn/values-units/color-rgb.html | 9 +- learn/values-units/color-rgba.html | 9 +- learn/values-units/em-rem.html | 16 +- learn/values-units/image.html | 13 +- learn/values-units/length.html | 13 +- learn/values-units/opacity.html | 13 +- learn/values-units/percentage-fonts.html | 15 +- learn/values-units/percentage.html | 13 +- learn/values-units/position.html | 13 +- learn/values-units/strings-idents.html | 60 +- learn/writing-modes/block-inline.html | 16 +- learn/writing-modes/float.html | 26 +- learn/writing-modes/inline-size.html | 17 +- learn/writing-modes/logical-mbp.html | 14 +- learn/writing-modes/simple-vertical.html | 15 +- learn/writing-modes/width.html | 17 +- logical/border-longhands.html | 143 +- logical/float.html | 116 +- logical/intro-feature-queries.html | 111 +- logical/intro-grid-example.html | 101 +- logical/margin-longhands.html | 176 +- logical/padding-longhands.html | 158 +- logical/positioning-inset.html | 130 +- logical/size-inline-block.html | 104 +- logical/size-max.html | 100 +- logical/size-min.html | 108 +- logical/size-resize.html | 112 +- logical/text-align.html | 97 +- masking/mask-border.html | 247 +- masking/mask-clip.html | 236 +- masking/mask-composite.html | 231 +- masking/mask-image.html | 220 +- masking/mask-mode.html | 234 +- masking/mask-origin.html | 235 +- masking/mask-position.html | 239 +- masking/mask-repeat.html | 237 +- masking/mask-size.html | 229 +- min-max-clamp/index.html | 29 +- modules/animation.html | 15 +- modules/backgrounds.html | 10 +- modules/basicUI.html | 11 +- modules/colors.html | 13 +- modules/compositing.html | 2 +- modules/filters.html | 10 +- modules/generated_content.html | 139 +- modules/multicol.html | 2 +- modules/overflow.html | 8 +- modules/scroll_snap.html | 19 +- moz-context-properties/index.html | 51 +- multicol/balancing/auto.html | 238 +- multicol/balancing/balance.html | 241 +- multicol/basics/column-count-width.html | 236 +- multicol/basics/column-count.html | 234 +- multicol/basics/column-width.html | 234 +- multicol/fragmentation/break-before.html | 274 +- multicol/fragmentation/break-inside.html | 255 +- multicol/fragmentation/orphans.html | 267 +- multicol/overflow/image-max-width.html | 248 +- multicol/overflow/image.html | 242 +- multicol/overflow/min-height.html | 224 +- multicol/overflow/overflow-inline.html | 236 +- multicol/spanning/h2-span.html | 247 +- multicol/spanning/mpb-span.html | 258 +- multicol/spanning/nested-h2-span.html | 251 +- multicol/styling/column-gap.html | 236 +- multicol/styling/column-rule-wide.html | 238 +- multicol/styling/column-rule.html | 240 +- object-fit-basics/index.html | 130 +- object-fit-basics/style.css | 59 +- object-fit-gallery/index.html | 38 +- object-fit-gallery/main.js | 46 +- object-fit-gallery/style.css | 20 +- overscroll-behavior/index.html | 30 +- overscroll-behavior/main.js | 28 +- .../overscroll-behavior-x.html | 80 +- overscroll-behavior/style.css | 9 +- path/offset-path.html | 282 +- scroll-snap/align.html | 185 +- scroll-snap/mandatory-proximity.html | 166 +- scroll-snap/mandatory-y-old-spec.html | 144 +- scroll-snap/mandatory-y.html | 132 +- scroll-snap/scroll-margin.html | 136 +- scroll-snap/scroll-padding-sticky.html | 170 +- scroll-snap/scroll-padding.html | 136 +- shapes/basic-shape/circle-generated.html | 213 +- shapes/basic-shape/circle.html | 202 +- shapes/basic-shape/ellipse-keywords.html | 214 +- shapes/basic-shape/ellipse.html | 214 +- shapes/basic-shape/inset-box.html | 220 +- shapes/basic-shape/inset.html | 220 +- shapes/basic-shape/polygon.html | 220 +- shapes/box/border-box.html | 205 +- shapes/box/bottom-margin-box.html | 230 +- shapes/box/content-box.html | 205 +- shapes/box/margin-box.html | 205 +- shapes/box/padding-box.html | 205 +- shapes/image/generated-content.html | 216 +- shapes/image/gradient.html | 230 +- shapes/image/margin.html | 204 +- shapes/image/radial-gradient.html | 230 +- shapes/image/simple-example.html | 202 +- shapes/image/threshold.html | 206 +- shapes/index.html | 31 +- shapes/overview/box.html | 204 +- shapes/overview/circle.html | 202 +- shapes/overview/clip-path.html | 204 +- shapes/overview/generated-content.html | 200 +- shapes/overview/image.html | 202 +- shapes/overview/shape-margin.html | 202 +- shapes/overview/threshold.html | 220 +- target-text/index.html | 296 +- time/current.html | 44 +- time/future.html | 47 +- time/past.html | 45 +- time/styles.css | 92 +- time/subtitles.vtt | 10 +- tools/border-image-generator/index.html | 279 +- tools/border-image-generator/script.js | 2590 +++++----- tools/border-image-generator/styles.css | 973 ++-- tools/border-radius-generator/index.html | 244 +- tools/border-radius-generator/script.js | 1493 +++--- tools/border-radius-generator/styles.css | 689 +-- tools/box-shadow-generator/index.html | 620 ++- tools/box-shadow-generator/script.js | 3305 +++++++------ tools/box-shadow-generator/styles.css | 1007 ++-- tools/color-picker/index.html | 50 +- tools/color-picker/script.js | 4291 +++++++++-------- tools/color-picker/styles.css | 1038 ++-- transitions/js-transitions.html | 81 +- types/filterfunctions.html | 4 +- variable-fonts/font-stretch.html | 186 +- variable-fonts/font-weight.html | 158 +- variable-fonts/grade.html | 400 +- variable-fonts/italic.html | 466 +- variable-fonts/oblique.html | 151 +- variable-fonts/optical-sizing.html | 531 +- variable-fonts/sample-page.html | 547 ++- variable-fonts/slant.html | 476 +- variable-fonts/weight.html | 467 +- variable-fonts/width.html | 471 +- visual-formatting/anonymous-block.html | 25 +- visual-formatting/anonymous-flex.html | 25 +- visual-formatting/line-boxes.html | 27 +- web-fonts/basic-web-font.html | 30 +- 589 files changed, 42550 insertions(+), 40675 deletions(-) diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md index 498baa3f..0d424fd8 100644 --- a/CODE_OF_CONDUCT.md +++ b/CODE_OF_CONDUCT.md @@ -1,10 +1,11 @@ # Community Participation Guidelines -This repository is governed by Mozilla's code of conduct and etiquette guidelines. +This repository is governed by Mozilla's code of conduct and etiquette guidelines. For more details, please read the -[Mozilla Community Participation Guidelines](https://www.mozilla.org/about/governance/policies/participation/). +[Mozilla Community Participation Guidelines](https://www.mozilla.org/about/governance/policies/participation/). ## How to Report + For more information on how to report violations of the Community Participation Guidelines, please read our '[How to Report](https://www.mozilla.org/about/governance/policies/participation/reporting/)' page. - +
    -
    - +} - +
    - -
    - + +
    + - \ No newline at end of file + diff --git a/backdrop/playable.js b/backdrop/playable.js index ddebe2d8..d9353ed2 100644 --- a/backdrop/playable.js +++ b/backdrop/playable.js @@ -1,22 +1,22 @@ -var section = document.querySelector('section'); -var editable = document.querySelector('.editable'); -var textareaHTML = document.querySelector('.playable-html'); -var textareaCSS = document.querySelector('.playable-css'); -var reset = document.getElementById('reset'); +var section = document.querySelector("section"); +var editable = document.querySelector(".editable"); +var textareaHTML = document.querySelector(".playable-html"); +var textareaCSS = document.querySelector(".playable-css"); +var reset = document.getElementById("reset"); var htmlCode = textareaHTML.value; var cssCode = textareaCSS.value; function fillCode() { - editable.innerHTML = textareaCSS.value; - section.innerHTML = textareaHTML.value; + editable.innerHTML = textareaCSS.value; + section.innerHTML = textareaHTML.value; } -reset.addEventListener('click', function () { - textareaHTML.value = htmlCode; - textareaCSS.value = cssCode; - fillCode(); +reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); }); -textareaHTML.addEventListener('input', fillCode); -textareaCSS.addEventListener('input', fillCode); -window.addEventListener('load', fillCode); \ No newline at end of file +textareaHTML.addEventListener("input", fillCode); +textareaCSS.addEventListener("input", fillCode); +window.addEventListener("load", fillCode); diff --git a/backdrop/script.js b/backdrop/script.js index 41eee340..404a2958 100644 --- a/backdrop/script.js +++ b/backdrop/script.js @@ -1,37 +1,50 @@ -// Any copyright is dedicated to the Public Domain. -// http://creativecommons.org/publicdomain/zero/1.0/ - -window.addEventListener("load", doStartup, false); - -function doStartup(event) { - document.fullscreenElement = document.fullscreenElement || document.mozFullscreenElement - || document.msFullscreenElement || document.webkitFullscreenDocument; - document.exitFullscreen = document.exitFullscreen || document.mozExitFullscreen - || document.msExitFullscreen || document.webkitExitFullscreen; - - document.addEventListener("keypress", handleKeypress, false); -} - -function handleKeypress(event) { - if (event.keyCode === 13) { - toggleFullscreen(); - } -} - - -function toggleFullscreen() { - let elem = document.querySelector("video"); - - elem.requestFullscreen = elem.requestFullscreen || elem.mozRequestFullscreen - || elem.msRequestFullscreen || elem.webkitRequestFullscreen; - - if (!document.fullscreenElement) { - elem.requestFullscreen().then({}).catch(err => { - alert(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`); - }); - } else { - if (document.exitFullscreen) { - document.exitFullscreen(); - } - } -} \ No newline at end of file +// Any copyright is dedicated to the Public Domain. +// http://creativecommons.org/publicdomain/zero/1.0/ + +window.addEventListener("load", doStartup, false); + +function doStartup(event) { + document.fullscreenElement = + document.fullscreenElement || + document.mozFullscreenElement || + document.msFullscreenElement || + document.webkitFullscreenDocument; + document.exitFullscreen = + document.exitFullscreen || + document.mozExitFullscreen || + document.msExitFullscreen || + document.webkitExitFullscreen; + + document.addEventListener("keypress", handleKeypress, false); +} + +function handleKeypress(event) { + if (event.keyCode === 13) { + toggleFullscreen(); + } +} + +function toggleFullscreen() { + let elem = document.querySelector("video"); + + elem.requestFullscreen = + elem.requestFullscreen || + elem.mozRequestFullscreen || + elem.msRequestFullscreen || + elem.webkitRequestFullscreen; + + if (!document.fullscreenElement) { + elem + .requestFullscreen() + .then({}) + .catch((err) => { + alert( + `Error attempting to enable full-screen mode: ${err.message} (${err.name})`, + ); + }); + } else { + if (document.exitFullscreen) { + document.exitFullscreen(); + } + } +} diff --git a/backdrop/style.css b/backdrop/style.css index f5435967..4b0b9b8c 100644 --- a/backdrop/style.css +++ b/backdrop/style.css @@ -1,15 +1,15 @@ -/* CSS files add styling rules to your content */ - -body { - font-family: "Benton Sans", "Helvetica Neue", helvetica, arial, sans-serif; - margin: 2em; - } - - h1 { - font-style: italic; - color: #373fff; - } - - video::backdrop { - background-color: #448; - } \ No newline at end of file +/* CSS files add styling rules to your content */ + +body { + font-family: "Benton Sans", "Helvetica Neue", helvetica, arial, sans-serif; + margin: 2em; +} + +h1 { + font-style: italic; + color: #373fff; +} + +video::backdrop { + background-color: #448; +} diff --git a/backdrop/styles.css b/backdrop/styles.css index b733e436..11945fee 100644 --- a/backdrop/styles.css +++ b/backdrop/styles.css @@ -1,61 +1,65 @@ /* Some default styling for cookbook examples */ -/* +/* rgb(53,43,34) rgb(75,70,74) rgb(95,97,110) rgb(137,151,188) rgb(160,178,226) */ -body { - background-color: #fff; - color: #333; - font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif; - padding: 0; - margin: 0; +body { + background-color: #fff; + color: #333; + font: + 1.2em / 1.5 Helvetica Neue, + Helvetica, + Arial, + sans-serif; + padding: 0; + margin: 0; } /* styles for the editor */ .playable { - font-family: monospace; - display: block; - margin-bottom: 10px; - background-color: #F4F7F8; - border: none; - border-left: 6px solid #558ABB; - color: #4D4E53; - width: 90%; - max-width: 700px; - padding: 10px 10px 0px; - font-size: 90%; - } + font-family: monospace; + display: block; + margin-bottom: 10px; + background-color: #f4f7f8; + border: none; + border-left: 6px solid #558abb; + color: #4d4e53; + width: 90%; + max-width: 700px; + padding: 10px 10px 0px; + font-size: 90%; +} - .playable-css { - height: 80px; - } +.playable-css { + height: 80px; +} - .playable-html { - height: 160px; - } +.playable-html { + height: 160px; +} - .playable-buttons { - text-align: right; - width: 90%; - max-width: 700px; - padding: 5px 10px 5px 26px; - font-size: 100%; - } +.playable-buttons { + text-align: right; + width: 90%; + max-width: 700px; + padding: 5px 10px 5px 26px; + font-size: 100%; +} - .preview { - width: 90%; - max-width: 700px; - border: 1px solid #4D4E53; - border-radius: 2px; - padding: 10px 14px 10px 10px; - margin-bottom: 10px; - } +.preview { + width: 90%; + max-width: 700px; + border: 1px solid #4d4e53; + border-radius: 2px; + padding: 10px 14px 10px 10px; + margin-bottom: 10px; +} - .preview input { - display: block; - margin: 5px; - } +.preview input { + display: block; + margin: 5px; +} diff --git a/box-alignment/flexbox/auto-margins.html b/box-alignment/flexbox/auto-margins.html index 859a975e..b1d9394a 100644 --- a/box-alignment/flexbox/auto-margins.html +++ b/box-alignment/flexbox/auto-margins.html @@ -1,138 +1,139 @@ - + - - - - Flexbox Alignment: alignment with auto margins + + + + Flexbox Alignment: alignment with auto margins - - + - - - -
    -
    -
    One
    -
    Two
    -
    Three
    -
    Four
    -
    Five
    -
    + } + + -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/box-alignment/flexbox/gap.html b/box-alignment/flexbox/gap.html index c07d4324..92521b3c 100644 --- a/box-alignment/flexbox/gap.html +++ b/box-alignment/flexbox/gap.html @@ -1,100 +1,102 @@ - + - - - - Flexbox Alignment: gaps - - - - - - -
    -
    -
    One
    -
    Two
    -
    Three
    -
    Four
    -
    Five
    -
    Six
    -
    - -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/box-alignment/overview/flex-align-items.html b/box-alignment/overview/flex-align-items.html index 300d0086..35b17061 100644 --- a/box-alignment/overview/flex-align-items.html +++ b/box-alignment/overview/flex-align-items.html @@ -1,100 +1,98 @@ - + - - - - Flexbox Alignment: simple example - - - - - - -
    -
    -
    One
    -
    Two
    -
    Three -
    has -
    extra -
    text + + + + Flexbox Alignment: simple example + + + + + + +
    +
    +
    One
    +
    Two
    +
    Three
    has
    extra
    text
    -
    - -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/box-alignment/overview/grid-align-items.html b/box-alignment/overview/grid-align-items.html index 33832528..5f8c0481 100644 --- a/box-alignment/overview/grid-align-items.html +++ b/box-alignment/overview/grid-align-items.html @@ -1,105 +1,103 @@ - + - - - - Grid Alignment: simple example - - - - - - -
    -
    -
    One
    -
    Two
    -
    Three -
    has -
    extra -
    text + + + + Grid Alignment: simple example + + + + + + +
    +
    +
    One
    +
    Two
    +
    Three
    has
    extra
    text
    +
    Four
    +
    Five
    +
    Six
    -
    Four
    -
    Five
    -
    Six
    -
    - -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/box-alignment/overview/grid-gap.html b/box-alignment/overview/grid-gap.html index beaba4d7..4bfd1fa7 100644 --- a/box-alignment/overview/grid-gap.html +++ b/box-alignment/overview/grid-gap.html @@ -1,99 +1,101 @@ - + - - - - Grid Alignment: simple example - - - - - - -
    -
    -
    One
    -
    Two
    -
    Three
    -
    Four
    -
    Five
    -
    Six
    -
    - -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/contain/contain-fix.html b/contain/contain-fix.html index 4de07edb..51e8de46 100644 --- a/contain/contain-fix.html +++ b/contain/contain-fix.html @@ -1,19 +1,19 @@ - + Float interference @@ -21,11 +21,11 @@

    My blog

    Heading of a nice article

    Content here.

    - I just showed up + I just showed up

    Another heading of another article

    - placeholder + placeholder

    More content here.

    diff --git a/contain/contain-style-counter.html b/contain/contain-style-counter.html index 840c47b2..74dd6d9d 100644 --- a/contain/contain-style-counter.html +++ b/contain/contain-style-counter.html @@ -1,4 +1,4 @@ - + diff --git a/contain/contain-style-quotes.html b/contain/contain-style-quotes.html index 98fd248c..024208a8 100644 --- a/contain/contain-style-quotes.html +++ b/contain/contain-style-quotes.html @@ -1,4 +1,4 @@ - + diff --git a/contain/float-interference.html b/contain/float-interference.html index d87f7547..61cb9ad3 100644 --- a/contain/float-interference.html +++ b/contain/float-interference.html @@ -1,18 +1,18 @@ - + Float interference @@ -20,11 +20,11 @@

    My blog

    Heading of a nice article

    Content here.

    - I just showed up + I just showed up

    Another heading of another article

    - placeholder + placeholder

    More content here.

    diff --git a/contain/simple-layout.html b/contain/simple-layout.html index 46962399..479d4349 100644 --- a/contain/simple-layout.html +++ b/contain/simple-layout.html @@ -1,18 +1,18 @@ - + Simple layout @@ -23,7 +23,7 @@

    Heading of a nice article

    Another heading of another article

    - placeholder + placeholder

    More content here.

    diff --git a/counter-style-demo/README.md b/counter-style-demo/README.md index 13fa5481..ed403a25 100644 --- a/counter-style-demo/README.md +++ b/counter-style-demo/README.md @@ -1,5 +1,4 @@ -CSS @counter-style Demo -======================= +# CSS @counter-style Demo Demo for the [@counter-style documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style) on Mozilla Developer Network. diff --git a/counter-style-demo/css/style.css b/counter-style-demo/css/style.css index 50072236..e2a45d57 100644 --- a/counter-style-demo/css/style.css +++ b/counter-style-demo/css/style.css @@ -1,338 +1,350 @@ body { - background: #EEEEEE; - margin: 0; - padding: 0; + background: #eeeeee; + margin: 0; + padding: 0; } .list-container { - float: left; - width: 40%; - margin-left: 20px; + float: left; + width: 40%; + margin-left: 20px; } .list-controls { - width: 40%; - margin-left: 10px; - border: 1px solid #4D4E53; - float: left; - padding: 10px; - background: white; + width: 40%; + margin-left: 10px; + border: 1px solid #4d4e53; + float: left; + padding: 10px; + background: white; } .code { - border-left: 6px solid #558ABB; - background: url("https://developer.cdn.mozilla.net/media/redesign/img/blueprint-dark.png"); - padding: 12px; + border-left: 6px solid #558abb; + background: url("https://developer.cdn.mozilla.net/media/redesign/img/blueprint-dark.png"); + padding: 12px; } .header h1 { - margin: 0; - padding: 0; - font-family: Ubuntu, Arial, Tahoma, 'Sans Serif'; + margin: 0; + padding: 0; + font-family: Ubuntu, Arial, Tahoma, "Sans Serif"; } .header { - background: #27547E; - margin: 0 0 10px 0; - padding: 5px; - color: white; + background: #27547e; + margin: 0 0 10px 0; + padding: 5px; + color: white; } .notes-section { - margin: 10px; - color: #4D4E53; - font-family: Ubuntu, Arial, Tahoma, 'Sans Serif'; - float: left; + margin: 10px; + color: #4d4e53; + font-family: Ubuntu, Arial, Tahoma, "Sans Serif"; + float: left; } /* Demo styles */ @counter-style demo-cyclic { - system: cyclic; - symbols: ◆ ◇; - suffix: " "; + system: cyclic; + symbols: ◆ ◇; + suffix: " "; } .demo-cyclic { - list-style: demo-cyclic; + list-style: demo-cyclic; } @counter-style cs-fixed { - system: fixed; - symbols: 😀 👻 👽 👾 🤖 🎃 😹 👋 👀 💋; - suffix: " "; + system: fixed; + symbols: 😀 👻 👽 👾 🤖 🎃 😹 👋 👀 💋; + suffix: " "; } .demo-fixed { - list-style: cs-fixed; + list-style: cs-fixed; } @counter-style cs-symbolic { - system: symbolic; - symbols: '*' ⁑ † ‡; - range: 1 15; - suffix: " "; + system: symbolic; + symbols: "*" ⁑ † ‡; + range: 1 15; + suffix: " "; } .demo-symbolic { - list-style: cs-symbolic; + list-style: cs-symbolic; } @counter-style cs-alphabetic { - system: alphabetic; - symbols: A B C D E; - suffix: " "; + system: alphabetic; + symbols: A B C D E; + suffix: " "; } .demo-alphabetic { - list-style: cs-alphabetic; + list-style: cs-alphabetic; } @counter-style cs-numeric { - system: numeric; - symbols: A B C D E; - suffix: " "; + system: numeric; + symbols: A B C D E; + suffix: " "; } .demo-numeric { - list-style: cs-numeric; + list-style: cs-numeric; } @counter-style cs-additive-roman { - system: additive; - range: 1 100; - additive-symbols: 1000 M, 900 CM, 500 D, 400 CD, 100 C, 90 XC, 50 L, 40 XL, 10 X, 9 IX, 5 V, 4 IV, 1 I; + system: additive; + range: 1 100; + additive-symbols: + 1000 M, + 900 CM, + 500 D, + 400 CD, + 100 C, + 90 XC, + 50 L, + 40 XL, + 10 X, + 9 IX, + 5 V, + 4 IV, + 1 I; } .demo-additive { - list-style: cs-additive-roman; + list-style: cs-additive-roman; } @counter-style cs-extends { - system: extends decimal; - prefix: '('; - suffix: ') '; + system: extends decimal; + prefix: "("; + suffix: ") "; } .demo-extends { - list-style: cs-extends; + list-style: cs-extends; } - /* Predefined styles */ .demo-decimal { - list-style: decimal; + list-style: decimal; } .demo-decimal-leading-zero { - list-style: decimal-leading-zero; + list-style: decimal-leading-zero; } .demo-arabic-indic { - list-style: arabic-indic; + list-style: arabic-indic; } .demo-armenian { - list-style: armenian; + list-style: armenian; } .demo-upper-armenian { - list-style: upper-armenian; + list-style: upper-armenian; } .demo-lower-armenian { - list-style: lower-armenian; + list-style: lower-armenian; } .demo-bengali { - list-style: bengali; + list-style: bengali; } .demo-cambodian { - list-style: cambodian; + list-style: cambodian; } .demo-khmer { - list-style: khmer; + list-style: khmer; } .demo-cjk-decimal { - list-style: cjk-decimal; + list-style: cjk-decimal; } .demo-devanagari { - list-style: devanagari; + list-style: devanagari; } .demo-georgian { - list-style: georgian; + list-style: georgian; } .demo-gujarati { - list-style: gujarati; + list-style: gujarati; } .demo-gurmukhi { - list-style: gurmukhi; + list-style: gurmukhi; } .demo-hebrew { - list-style: hebrew; + list-style: hebrew; } .demo-kannada { - list-style: kannada; + list-style: kannada; } .demo-lao { - list-style: lao; + list-style: lao; } .demo-malayalam { - list-style: malayalam; + list-style: malayalam; } .demo-mongolian { - list-style: mongolian; + list-style: mongolian; } .demo-myanmar { - list-style: myanmar; + list-style: myanmar; } .demo-oriya { - list-style: oriya; + list-style: oriya; } .demo-persian { - list-style: persian; + list-style: persian; } .demo-lower-roman { - list-style: lower-roman; + list-style: lower-roman; } .demo-upper-roman { - list-style: upper-roman; + list-style: upper-roman; } .demo-telugu { - list-style: telugu; + list-style: telugu; } .demo-thai { - list-style: thai; + list-style: thai; } .demo-tibetan { - list-style: tibetan; + list-style: tibetan; } .demo-lower-alpha { - list-style: lower-alpha; + list-style: lower-alpha; } .demo-lower-latin { - list-style: lower-latin; + list-style: lower-latin; } .demo-upper-alpha { - list-style: upper-alpha; + list-style: upper-alpha; } .demo-upper-latin { - list-style: upper-latin; + list-style: upper-latin; } .demo-cjk-earthly-branch { - list-style: cjk-earthly-branch; + list-style: cjk-earthly-branch; } .demo-cjk-heavenly-stem { - list-style: cjk-heavenly-stem; + list-style: cjk-heavenly-stem; } .demo-lower-greek { - list-style: lower-greek; + list-style: lower-greek; } .demo-hiragana { - list-style: hiragana; + list-style: hiragana; } .demo-hiragana-iroha { - list-style: hiragana-iroha; + list-style: hiragana-iroha; } .demo-katakana { - list-style: katakana; + list-style: katakana; } .demo-katakana-iroha { - list-style: katakana-iroha; + list-style: katakana-iroha; } .demo-disc { - list-style: disc; + list-style: disc; } .demo-circle { - list-style: circle; + list-style: circle; } .demo-square { - list-style: square; + list-style: square; } .demo-disclosure-open { - list-style: disclosure-open; + list-style: disclosure-open; } .demo-disclosure-closed { - list-style: disclosure-closed; + list-style: disclosure-closed; } .demo-japanese-informal { - list-style: japanese-informal; + list-style: japanese-informal; } .demo-japanese-formal { - list-style: japanese-formal; + list-style: japanese-formal; } .demo-korean-hangul-formal { - list-style: korean-hangul-formal; + list-style: korean-hangul-formal; } .demo-korean-hanja-informal { - list-style: korean-hanja-informal; + list-style: korean-hanja-informal; } .demo-korean-hanja-formal { - list-style: korean-hanja-formal; + list-style: korean-hanja-formal; } .demo-simp-chinese-informal { - list-style: simp-chinese-informal; + list-style: simp-chinese-informal; } .demo-simp-chinese-formal { - list-style: simp-chinese-formal; + list-style: simp-chinese-formal; } .demo-trad-chinese-informal { - list-style: trad-chinese-informal; + list-style: trad-chinese-informal; } .demo-trad-chinese-formal { - list-style: trad-chinese-formal; + list-style: trad-chinese-formal; } .demo-cjk-ideographic { - list-style: cjk-ideographic; + list-style: cjk-ideographic; } .demo-ethiopic-numeric { - list-style: ethiopic-numeric; + list-style: ethiopic-numeric; } diff --git a/counter-style-demo/index.html b/counter-style-demo/index.html index 7f1b277d..973db771 100644 --- a/counter-style-demo/index.html +++ b/counter-style-demo/index.html @@ -1,128 +1,127 @@ - + - + CSS @counter-style Demo - - - -
    -

    CSS @counter-style Demo

    - -
    + + + +
    +

    CSS @counter-style Demo

    +
    -
      -
    • One
      • -
    • Two
      • -
    • Three
      • -
    • Four
      • -
    • Five
      • -
    • Six
      • -
    • Seven
      • -
    • Eight
      • -
    • Nine
      • -
    • Ten
      • -
    • Eleven
      • -
    • Twelve
      • -
    • Thirteen
      • -
    • Fourteen
      • -
    • Fifteen
      • -
    • Sixteen
      • -
    • Seventeen
      • -
    • Eighteen
      • -
    • Nineteen
      • -
    • Twenty
      • -
    • Twenty One
      • -
    • Twenty Two
      • -
    • Twenty Three
      • -
    • Twenty Four
      • -
    • Twenty Five
      • -
    • Twenty Six
      • -
    • Twenty Seven
      • -
    • Twenty Eight
      • -
    • Twenty Nine
      • -
    • Thirty
      • -
    +
      +
    • One
      • +
    • Two
      • +
    • Three
      • +
    • Four
      • +
    • Five
      • +
    • Six
      • +
    • Seven
      • +
    • Eight
      • +
    • Nine
      • +
    • Ten
      • +
    • Eleven
      • +
    • Twelve
      • +
    • Thirteen
      • +
    • Fourteen
      • +
    • Fifteen
      • +
    • Sixteen
      • +
    • Seventeen
      • +
    • Eighteen
      • +
    • Nineteen
      • +
    • Twenty
      • +
    • Twenty One
      • +
    • Twenty Two
      • +
    • Twenty Three
      • +
    • Twenty Four
      • +
    • Twenty Five
      • +
    • Twenty Six
      • +
    • Twenty Seven
      • +
    • Twenty Eight
      • +
    • Twenty Nine
      • +
    • Thirty
      • +
    -

    Select a counter style from the list

    - +

    Select a counter style from the list

    + - 
    +      
     @counter-style blacknwhite {
   system: cyclic;
   symbols: ◆ ◇;
@@ -131,15 +130,18 @@ 
    Select a counter style from the list
    
 
 ul {
   list-style: blacknwhite;
-}
    
-
+}
    +
    +
    + Read more about @counter-style on + Mozilla Developer Network
    -
    - - Read more about @counter-style on - Mozilla Developer Network - -
    - + diff --git a/counter-style-demo/js/script.js b/counter-style-demo/js/script.js index 1e9e98b5..285a032e 100644 --- a/counter-style-demo/js/script.js +++ b/counter-style-demo/js/script.js @@ -1,538 +1,322 @@ (function () { - var $styleSelect = document.querySelector('#style-select'), - $demoList = document.querySelector('#demo-list'), - $codeContainer = document.querySelector('#code'); - var examples = { - 'cyclic': { - code: [ - '@counter-style blacknwhite {\n', - ' system: cyclic;\n', - ' symbols: ◆ ◇;\n', - ' suffix: " ";\n', - '}\n\n', - 'ul {\n', - ' list-style: blacknwhite;\n', - '}' - ].join('') - }, - - 'fixed': { - code: [ - '@counter-style circled-digits {\n', - ' system: fixed;\n', - ' symbols: 😀 👻 👽 👾 🤖 🎃 😹 👋 👀 💋;\n', - ' suffix: " ";\n', - '}\n\n', - 'ul {\n', - ' list-style: circled-digits;\n', - '}' - ].join('') - }, - - 'symbolic': { - code: [ - '@counter-style cs-symbolic {\n', - ' system: symbolic;\n', - " symbols: '*' ⁑ † ‡;\n", - ' range: 1 15;\n', - ' suffix: " ";\n', - '}\n\n', - 'ul {\n', - ' list-style: cs-symbolic;\n', - '}' - ].join('') - }, - - 'alphabetic': { - code: [ - '@counter-style cs-alphabetic {\n', - ' system: alphabetic;\n', - " symbols: A B C D E;\n", - ' suffix: " ";\n', - '}\n\n', - 'ul {\n', - ' list-style: cs-alphabetic;\n', - '}' - ].join('') - }, - - 'numeric': { - code: [ - '@counter-style cs-numeric {\n', - ' system: numeric;\n', - " symbols: A B C D E;\n", - ' suffix: " ";\n', - '}\n\n', - 'ul {\n', - ' list-style: cs-numeric;\n', - '}' - ].join('') - }, - - 'additive': { - code: [ - '@counter-style cs-additive-roman {\n', - ' system: additive;\n', - " range: 1 100;\n", - ' additive-symbols: 1000 M, 900 CM, 500 D, 400 CD, 100 C, 90 XC, 50 L, 40 XL, 10 X, 9 IX, 5 V, 4 IV, 1 I;\n', - '}\n\n', - 'ul {\n', - ' list-style: cs-additive-roman;\n', - '}' - ].join('') - }, - - 'extends': { - code: [ - '@counter-style cs-extends {\n', - ' system: extends decimal;\n', - " prefix: '(';\n", - " suffix: ') ';\n", - '}\n\n', - 'ul {\n', - ' list-style: cs-extends;\n', - '}' - ].join('') - }, - - 'decimal': { - code: [ - 'ul {\n', - ' list-style: decimal;\n', - '}', - ].join('') - }, - - 'decimal-leading-zero': { - code: [ - 'ul {\n', - ' list-style: decimal-leading-zero;\n', - '}', - ].join('') - }, - - 'arabic-indic': { - code: [ - 'ul {\n', - ' list-style: arabic-indic;\n', - '}', - ].join('') - }, - - 'armenian': { - code: [ - 'ul {\n', - ' list-style: armenian;\n', - '}', - ].join('') - }, - - 'upper-armenian': { - code: [ - 'ul {\n', - ' list-style: upper-armenian;\n', - '}', - ].join('') - }, - - 'lower-armenian': { - code: [ - 'ul {\n', - ' list-style: lower-armenian;\n', - '}', - ].join('') - }, - - 'bengali': { - code: [ - 'ul {\n', - ' list-style: bengali;\n', - '}', - ].join('') - }, - - 'cambodian': { - code: [ - 'ul {\n', - ' list-style: cambodian;\n', - '}', - ].join('') - }, - - 'khmer': { - code: [ - 'ul {\n', - ' list-style: khmer;\n', - '}', - ].join('') - }, - - 'cjk-decimal': { - code: [ - 'ul {\n', - ' list-style: cjk-decimal;\n', - '}', - ].join('') - }, - - 'devanagari': { - code: [ - 'ul {\n', - ' list-style: devanagari;\n', - '}', - ].join('') - }, - - 'georgian': { - code: [ - 'ul {\n', - ' list-style: georgian;\n', - '}', - ].join('') - }, - - 'gujarati': { - code: [ - 'ul {\n', - ' list-style: gujarati;\n', - '}', - ].join('') - }, - - 'gurmukhi': { - code: [ - 'ul {\n', - ' list-style: gurmukhi;\n', - '}', - ].join('') - }, - - 'hebrew': { - code: [ - 'ul {\n', - ' list-style: hebrew;\n', - '}', - ].join('') - }, - - 'kannada': { - code: [ - 'ul {\n', - ' list-style: kannada;\n', - '}', - ].join('') - }, - - 'lao': { - code: [ - 'ul {\n', - ' list-style: lao;\n', - '}', - ].join('') - }, - - 'malayalam': { - code: [ - 'ul {\n', - ' list-style: malayalam;\n', - '}', - ].join('') - }, - - 'mongolian': { - code: [ - 'ul {\n', - ' list-style: mongolian;\n', - '}', - ].join('') - }, - - 'myanmar': { - code: [ - 'ul {\n', - ' list-style: myanmar;\n', - '}', - ].join('') - }, - - 'oriya': { - code: [ - 'ul {\n', - ' list-style: oriya;\n', - '}', - ].join('') - }, - - 'persian': { - code: [ - 'ul {\n', - ' list-style: persian;\n', - '}', - ].join('') - }, - - 'lower-roman': { - code: [ - 'ul {\n', - ' list-style: lower-roman;\n', - '}', - ].join('') - }, - - 'upper-roman': { - code: [ - 'ul {\n', - ' list-style: upper-roman;\n', - '}', - ].join('') - }, - - 'telugu': { - code: [ - 'ul {\n', - ' list-style: telugu;\n', - '}', - ].join('') - }, - - 'thai': { - code: [ - 'ul {\n', - ' list-style: thai;\n', - '}', - ].join('') - }, - - 'tibetan': { - code: [ - 'ul {\n', - ' list-style: tibetan;\n', - '}', - ].join('') - }, - - 'lower-alpha': { - code: [ - 'ul {\n', - ' list-style: lower-alpha;\n', - '}', - ].join('') - }, - - 'lower-latin': { - code: [ - 'ul {\n', - ' list-style: lower-latin;\n', - '}', - ].join('') - }, - - 'upper-alpha': { - code: [ - 'ul {\n', - ' list-style: upper-alpha;\n', - '}', - ].join('') - }, - - 'upper-latin': { - code: [ - 'ul {\n', - ' list-style: upper-latin;\n', - '}', - ].join('') - }, - - 'cjk-earthly-branch': { - code: [ - 'ul {\n', - ' list-style: cjk-earthly-branch;\n', - '}', - ].join('') - }, - - 'cjk-heavenly-stem': { - code: [ - 'ul {\n', - ' list-style: cjk-heavenly-stem;\n', - '}', - ].join('') - }, - - 'lower-greek': { - code: [ - 'ul {\n', - ' list-style: lower-greek;\n', - '}', - ].join('') - }, - - 'hiragana': { - code: [ - 'ul {\n', - ' list-style: hiragana;\n', - '}', - ].join('') - }, - - 'hiragana-iroha': { - code: [ - 'ul {\n', - ' list-style: hiragana-iroha;\n', - '}', - ].join('') - }, - - 'katakana': { - code: [ - 'ul {\n', - ' list-style: katakana;\n', - '}', - ].join('') - }, - - 'katakana-iroha': { - code: [ - 'ul {\n', - ' list-style: katakana-iroha;\n', - '}', - ].join('') - }, - - 'disc': { - code: [ - 'ul {\n', - ' list-style: disc;\n', - '}', - ].join('') - }, - - 'circle': { - code: [ - 'ul {\n', - ' list-style: circle;\n', - '}', - ].join('') - }, - - 'square': { - code: [ - 'ul {\n', - ' list-style: square;\n', - '}', - ].join('') - }, - - 'disclosure-open': { - code: [ - 'ul {\n', - ' list-style: disclosure-open;\n', - '}', - ].join('') - }, - - 'disclosure-closed': { - code: [ - 'ul {\n', - ' list-style: disclosure-closed;\n', - '}', - ].join('') - }, - - 'japanese-informal': { - code: [ - 'ul {\n', - ' list-style: japanese-informal;\n', - '}', - ].join('') - }, - - 'japanese-formal': { - code: [ - 'ul {\n', - ' list-style: japanese-formal;\n', - '}', - ].join('') - }, - - 'korean-hangul-formal': { - code: [ - 'ul {\n', - ' list-style: korean-hangul-formal;\n', - '}', - ].join('') - }, - - 'korean-hanja-informal': { - code: [ - 'ul {\n', - ' list-style: korean-hanja-informal;\n', - '}', - ].join('') - }, - - 'korean-hanja-formal': { - code: [ - 'ul {\n', - ' list-style: korean-hanja-formal;\n', - '}', - ].join('') - }, - - 'simp-chinese-informal': { - code: [ - 'ul {\n', - ' list-style: simp-chinese-informal;\n', - '}', - ].join('') - }, - - 'simp-chinese-formal': { - code: [ - 'ul {\n', - ' list-style: simp-chinese-formal;\n', - '}', - ].join('') - }, - - 'trad-chinese-informal': { - code: [ - 'ul {\n', - ' list-style: trad-chinese-informal;\n', - '}', - ].join('') - }, - - 'trad-chinese-formal': { - code: [ - 'ul {\n', - ' list-style: trad-chinese-formal;\n', - '}', - ].join('') - }, - - 'cjk-ideographic': { - code: [ - 'ul {\n', - ' list-style: cjk-ideographic;\n', - '}', - ].join('') - }, - - 'ethiopic-numeric': { - code: [ - 'ul {\n', - ' list-style: ethiopic-numeric;\n', - '}', - ].join('') - } - }; - - $styleSelect.value = 'cyclic'; - - $styleSelect.addEventListener('change', function (e) { - var selectedKey = $styleSelect.value; - $codeContainer.innerHTML = examples[selectedKey].code; - $demoList.className = 'demo-' + selectedKey; - }); + var $styleSelect = document.querySelector("#style-select"), + $demoList = document.querySelector("#demo-list"), + $codeContainer = document.querySelector("#code"); + var examples = { + cyclic: { + code: [ + "@counter-style blacknwhite {\n", + " system: cyclic;\n", + " symbols: ◆ ◇;\n", + ' suffix: " ";\n', + "}\n\n", + "ul {\n", + " list-style: blacknwhite;\n", + "}", + ].join(""), + }, + + fixed: { + code: [ + "@counter-style circled-digits {\n", + " system: fixed;\n", + " symbols: 😀 👻 👽 👾 🤖 🎃 😹 👋 👀 💋;\n", + ' suffix: " ";\n', + "}\n\n", + "ul {\n", + " list-style: circled-digits;\n", + "}", + ].join(""), + }, + + symbolic: { + code: [ + "@counter-style cs-symbolic {\n", + " system: symbolic;\n", + " symbols: '*' ⁑ † ‡;\n", + " range: 1 15;\n", + ' suffix: " ";\n', + "}\n\n", + "ul {\n", + " list-style: cs-symbolic;\n", + "}", + ].join(""), + }, + + alphabetic: { + code: [ + "@counter-style cs-alphabetic {\n", + " system: alphabetic;\n", + " symbols: A B C D E;\n", + ' suffix: " ";\n', + "}\n\n", + "ul {\n", + " list-style: cs-alphabetic;\n", + "}", + ].join(""), + }, + + numeric: { + code: [ + "@counter-style cs-numeric {\n", + " system: numeric;\n", + " symbols: A B C D E;\n", + ' suffix: " ";\n', + "}\n\n", + "ul {\n", + " list-style: cs-numeric;\n", + "}", + ].join(""), + }, + + additive: { + code: [ + "@counter-style cs-additive-roman {\n", + " system: additive;\n", + " range: 1 100;\n", + " additive-symbols: 1000 M, 900 CM, 500 D, 400 CD, 100 C, 90 XC, 50 L, 40 XL, 10 X, 9 IX, 5 V, 4 IV, 1 I;\n", + "}\n\n", + "ul {\n", + " list-style: cs-additive-roman;\n", + "}", + ].join(""), + }, + + extends: { + code: [ + "@counter-style cs-extends {\n", + " system: extends decimal;\n", + " prefix: '(';\n", + " suffix: ') ';\n", + "}\n\n", + "ul {\n", + " list-style: cs-extends;\n", + "}", + ].join(""), + }, + + decimal: { + code: ["ul {\n", " list-style: decimal;\n", "}"].join(""), + }, + + "decimal-leading-zero": { + code: ["ul {\n", " list-style: decimal-leading-zero;\n", "}"].join(""), + }, + + "arabic-indic": { + code: ["ul {\n", " list-style: arabic-indic;\n", "}"].join(""), + }, + + armenian: { + code: ["ul {\n", " list-style: armenian;\n", "}"].join(""), + }, + + "upper-armenian": { + code: ["ul {\n", " list-style: upper-armenian;\n", "}"].join(""), + }, + + "lower-armenian": { + code: ["ul {\n", " list-style: lower-armenian;\n", "}"].join(""), + }, + + bengali: { + code: ["ul {\n", " list-style: bengali;\n", "}"].join(""), + }, + + cambodian: { + code: ["ul {\n", " list-style: cambodian;\n", "}"].join(""), + }, + + khmer: { + code: ["ul {\n", " list-style: khmer;\n", "}"].join(""), + }, + + "cjk-decimal": { + code: ["ul {\n", " list-style: cjk-decimal;\n", "}"].join(""), + }, + + devanagari: { + code: ["ul {\n", " list-style: devanagari;\n", "}"].join(""), + }, + + georgian: { + code: ["ul {\n", " list-style: georgian;\n", "}"].join(""), + }, + + gujarati: { + code: ["ul {\n", " list-style: gujarati;\n", "}"].join(""), + }, + + gurmukhi: { + code: ["ul {\n", " list-style: gurmukhi;\n", "}"].join(""), + }, + + hebrew: { + code: ["ul {\n", " list-style: hebrew;\n", "}"].join(""), + }, + + kannada: { + code: ["ul {\n", " list-style: kannada;\n", "}"].join(""), + }, + + lao: { + code: ["ul {\n", " list-style: lao;\n", "}"].join(""), + }, + + malayalam: { + code: ["ul {\n", " list-style: malayalam;\n", "}"].join(""), + }, + + mongolian: { + code: ["ul {\n", " list-style: mongolian;\n", "}"].join(""), + }, + + myanmar: { + code: ["ul {\n", " list-style: myanmar;\n", "}"].join(""), + }, + + oriya: { + code: ["ul {\n", " list-style: oriya;\n", "}"].join(""), + }, + + persian: { + code: ["ul {\n", " list-style: persian;\n", "}"].join(""), + }, + + "lower-roman": { + code: ["ul {\n", " list-style: lower-roman;\n", "}"].join(""), + }, + + "upper-roman": { + code: ["ul {\n", " list-style: upper-roman;\n", "}"].join(""), + }, + + telugu: { + code: ["ul {\n", " list-style: telugu;\n", "}"].join(""), + }, + + thai: { + code: ["ul {\n", " list-style: thai;\n", "}"].join(""), + }, + + tibetan: { + code: ["ul {\n", " list-style: tibetan;\n", "}"].join(""), + }, + + "lower-alpha": { + code: ["ul {\n", " list-style: lower-alpha;\n", "}"].join(""), + }, + + "lower-latin": { + code: ["ul {\n", " list-style: lower-latin;\n", "}"].join(""), + }, + + "upper-alpha": { + code: ["ul {\n", " list-style: upper-alpha;\n", "}"].join(""), + }, + + "upper-latin": { + code: ["ul {\n", " list-style: upper-latin;\n", "}"].join(""), + }, + + "cjk-earthly-branch": { + code: ["ul {\n", " list-style: cjk-earthly-branch;\n", "}"].join(""), + }, + + "cjk-heavenly-stem": { + code: ["ul {\n", " list-style: cjk-heavenly-stem;\n", "}"].join(""), + }, + + "lower-greek": { + code: ["ul {\n", " list-style: lower-greek;\n", "}"].join(""), + }, + + hiragana: { + code: ["ul {\n", " list-style: hiragana;\n", "}"].join(""), + }, + + "hiragana-iroha": { + code: ["ul {\n", " list-style: hiragana-iroha;\n", "}"].join(""), + }, + + katakana: { + code: ["ul {\n", " list-style: katakana;\n", "}"].join(""), + }, + + "katakana-iroha": { + code: ["ul {\n", " list-style: katakana-iroha;\n", "}"].join(""), + }, + + disc: { + code: ["ul {\n", " list-style: disc;\n", "}"].join(""), + }, + + circle: { + code: ["ul {\n", " list-style: circle;\n", "}"].join(""), + }, + + square: { + code: ["ul {\n", " list-style: square;\n", "}"].join(""), + }, + + "disclosure-open": { + code: ["ul {\n", " list-style: disclosure-open;\n", "}"].join(""), + }, + + "disclosure-closed": { + code: ["ul {\n", " list-style: disclosure-closed;\n", "}"].join(""), + }, + + "japanese-informal": { + code: ["ul {\n", " list-style: japanese-informal;\n", "}"].join(""), + }, + + "japanese-formal": { + code: ["ul {\n", " list-style: japanese-formal;\n", "}"].join(""), + }, + + "korean-hangul-formal": { + code: ["ul {\n", " list-style: korean-hangul-formal;\n", "}"].join(""), + }, + + "korean-hanja-informal": { + code: ["ul {\n", " list-style: korean-hanja-informal;\n", "}"].join(""), + }, + + "korean-hanja-formal": { + code: ["ul {\n", " list-style: korean-hanja-formal;\n", "}"].join(""), + }, + + "simp-chinese-informal": { + code: ["ul {\n", " list-style: simp-chinese-informal;\n", "}"].join(""), + }, + + "simp-chinese-formal": { + code: ["ul {\n", " list-style: simp-chinese-formal;\n", "}"].join(""), + }, + + "trad-chinese-informal": { + code: ["ul {\n", " list-style: trad-chinese-informal;\n", "}"].join(""), + }, + + "trad-chinese-formal": { + code: ["ul {\n", " list-style: trad-chinese-formal;\n", "}"].join(""), + }, + + "cjk-ideographic": { + code: ["ul {\n", " list-style: cjk-ideographic;\n", "}"].join(""), + }, + + "ethiopic-numeric": { + code: ["ul {\n", " list-style: ethiopic-numeric;\n", "}"].join(""), + }, + }; + + $styleSelect.value = "cyclic"; + + $styleSelect.addEventListener("change", function (e) { + var selectedKey = $styleSelect.value; + $codeContainer.innerHTML = examples[selectedKey].code; + $demoList.className = "demo-" + selectedKey; + }); })(); diff --git a/css-cookbook/breadcrumb-navigation--download.html b/css-cookbook/breadcrumb-navigation--download.html index 35823e9c..e3806713 100644 --- a/css-cookbook/breadcrumb-navigation--download.html +++ b/css-cookbook/breadcrumb-navigation--download.html @@ -1,52 +1,52 @@ - + - + CSS Cookbook: Breadcrumb Navigation + - - - - + - - - - \ No newline at end of file + + diff --git a/css-cookbook/breadcrumb-navigation.html b/css-cookbook/breadcrumb-navigation.html index b30bf879..1df1fdbd 100644 --- a/css-cookbook/breadcrumb-navigation.html +++ b/css-cookbook/breadcrumb-navigation.html @@ -1,80 +1,79 @@ - + - + CSS Cookbook: Breadcrumb Navigation - + - + - +
    - +
    - + display: inline-block; + margin: 0 .25rem; + content: "→"; +} - + +
    - +
    - - - - \ No newline at end of file + + + diff --git a/css-cookbook/card--download.html b/css-cookbook/card--download.html index 235d31b6..24abbdc1 100644 --- a/css-cookbook/card--download.html +++ b/css-cookbook/card--download.html @@ -1,123 +1,123 @@ - + - - + CSS Cookbook: card component - + - - - - - - +
    -
    -
    -

    A short heading

    -
    - - Hot air balloons -
    -

    The idea of reaching the North Pole by means of balloons appears to have been entertained many - years ago.

    -
    - -
    - -
    -
    -

    A short heading

    -
    - - Hot air balloons -
    -

    Short content.

    -
    -
    I have a footer!
    -
    - -
    -
    -

    A longer heading in this card

    -
    - - Hot air balloons -
    -

    In a curious work, published in Paris in 1863 by Delaville Dedreux, there is a - suggestion for reaching the North Pole by an aerostat.

    -
    -
    I have a footer!
    -
    -
    -
    -

    A short heading

    -
    - - Hot air balloons -
    -

    The idea of reaching the North Pole by means of balloons appears to have been entertained many - years ago.

    -
    - -
    +
    +
    +

    A short heading

    +
    + + Hot air balloons +
    +

    + The idea of reaching the North Pole by means of balloons appears to + have been entertained many years ago. +

    +
    +
    + +
    +
    +

    A short heading

    +
    + + Hot air balloons +
    +

    Short content.

    +
    +
    I have a footer!
    +
    + +
    +
    +

    A longer heading in this card

    +
    + + Hot air balloons +
    +

    + In a curious work, published in Paris in 1863 by Delaville Dedreux, + there is a suggestion for reaching the North Pole by an aerostat. +

    +
    +
    I have a footer!
    +
    +
    +
    +

    A short heading

    +
    + + Hot air balloons +
    +

    + The idea of reaching the North Pole by means of balloons appears to + have been entertained many years ago. +

    +
    +
    - - - - \ No newline at end of file + + diff --git a/css-cookbook/card.html b/css-cookbook/card.html index ebbcfc09..fb189632 100644 --- a/css-cookbook/card.html +++ b/css-cookbook/card.html @@ -1,197 +1,199 @@ - + - + CSS Cookbook: card component - + - + - +
    -
    -
    -
    -

    A short heading

    -
    - - Hot air balloons -
    -

    The idea of reaching the North Pole by means of balloons appears to have been entertained many - years ago.

    -
    - -
    - -
    -
    -

    A short heading

    -
    - - Hot air balloons -
    -

    Short content.

    -
    -
    I have a footer!
    -
    - -
    -
    -

    A longer heading in this card

    -
    - - Hot air balloons -
    -

    In a curious work, published in Paris in 1863 by Delaville Dedreux, there is a - suggestion for reaching the North Pole by an aerostat.

    -
    -
    I have a footer!
    -
    -
    -
    -

    A short heading

    -
    - - Hot air balloons -
    -

    The idea of reaching the North Pole by means of balloons appears to have been entertained many - years ago.

    -
    - -
    -
    +
    +
    +
    +

    A short heading

    +
    + + Hot air balloons +
    +

    + The idea of reaching the North Pole by means of balloons appears + to have been entertained many years ago. +

    +
    +
    + +
    +
    +

    A short heading

    +
    + Hot air balloons +
    +

    Short content.

    +
    +
    I have a footer!
    +
    + +
    +
    +

    A longer heading in this card

    +
    + + Hot air balloons +
    +

    + In a curious work, published in Paris in 1863 by Delaville + Dedreux, there is a suggestion for reaching the North Pole by an + aerostat. +

    +
    +
    I have a footer!
    +
    +
    +
    +

    A short heading

    +
    + + Hot air balloons +
    +

    + The idea of reaching the North Pole by means of balloons appears + to have been entertained many years ago. +

    +
    +
    +
    - + object-fit: cover; + width: 100%; + height: 100%; +} - +
    +
    +

    A short heading

    +
    + Hot air balloons +
    +

    The idea of reaching the North Pole by means of balloons appears to have been entertained many years ago.

    +
    + +
    + +
    +
    +

    A short heading

    +
    + Hot air balloons +
    +

    Short content.

    +
    +
    I have a footer!
    +
    + +
    +
    +

    A longer heading in this card

    +
    + Hot air balloons +
    +

    In a curious work, published in Paris in 1863 by Delaville Dedreux, there is a + suggestion for reaching the North Pole by an aerostat.

    +
    +
    I have a footer!
    +
    +
    +
    +

    A short heading

    +
    + Hot air balloons +
    +

    The idea of reaching the North Pole by means of balloons appears to have been entertained many + years ago.

    +
    + +
    +
    - +
    - - - - \ No newline at end of file + + + diff --git a/css-cookbook/center--download.html b/css-cookbook/center--download.html index 05f279b8..cf6480df 100644 --- a/css-cookbook/center--download.html +++ b/css-cookbook/center--download.html @@ -1,50 +1,46 @@ - + - - + CSS Cookbook: center an element - + - - - - - - +
    -
    I am centered!
    +
    I am centered!
    - - - - \ No newline at end of file + + diff --git a/css-cookbook/center.html b/css-cookbook/center.html index 5ca09cfd..4404204f 100644 --- a/css-cookbook/center.html +++ b/css-cookbook/center.html @@ -1,67 +1,66 @@ - - - - - - CSS Cookbook: center an element - - - - - - - -
    -
    -
    I am centered!
    -
    -
    - - - - - -
    - -
    - - - - \ No newline at end of file + + + + + + CSS Cookbook: center an element + + + + + + + +
    +
    +
    I am centered!
    +
    +
    + + + + + +
    + +
    + + + diff --git a/css-cookbook/columns-flexbox--download.html b/css-cookbook/columns-flexbox--download.html index 2114955a..c41cfac0 100644 --- a/css-cookbook/columns-flexbox--download.html +++ b/css-cookbook/columns-flexbox--download.html @@ -1,57 +1,61 @@ - + - - + CSS Cookbook: columns with flexbox + - - - +
    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi - tomatillo - melon azuki bean garlic.

    - -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean - collard - greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    - -

    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach - avocado - daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish - spinach - carrot soko. -

    - +

    + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh + onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. +

    + +

    + Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot + courgette tatsoi pea sprouts fava bean collard greens dandelion okra + wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. +

    + +

    + Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce + kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus + winter purslane kale. Celery potato scallion desert raisin horseradish + spinach carrot soko. +

    - + diff --git a/css-cookbook/columns-flexbox-wrapping--download.html b/css-cookbook/columns-flexbox-wrapping--download.html index 771354ad..9ab5d88a 100644 --- a/css-cookbook/columns-flexbox-wrapping--download.html +++ b/css-cookbook/columns-flexbox-wrapping--download.html @@ -1,61 +1,63 @@ - + - - + CSS Cookbook: columns with flexbox, wrapping + - - - - +
    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi - tomatillo - melon azuki bean garlic.

    - -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean - collard - greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    - -

    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach - avocado - daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish - spinach - carrot soko. -

    +

    + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh + onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. +

    + +

    + Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot + courgette tatsoi pea sprouts fava bean collard greens dandelion okra + wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. +

    + +

    + Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce + kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus + winter purslane kale. Celery potato scallion desert raisin horseradish + spinach carrot soko. +

    - - - - \ No newline at end of file + + diff --git a/css-cookbook/columns-flexbox-wrapping.html b/css-cookbook/columns-flexbox-wrapping.html index 8d782ac5..acec9cec 100644 --- a/css-cookbook/columns-flexbox-wrapping.html +++ b/css-cookbook/columns-flexbox-wrapping.html @@ -1,85 +1,89 @@ - - - - - - - - - CSS Cookbook: columns with flexbox, wrapping - - - - - - - - - - -
    -
    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo - melon azuki bean garlic.

    - -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard - greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    - -

    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado - daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach - carrot soko. -

    -
    -
    - - - - - -
    - -
    - - - - + + + + + + + + CSS Cookbook: columns with flexbox, wrapping + + + + + + + + + +
    +
    +

    + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh + onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. +

    + +

    + Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot + courgette tatsoi pea sprouts fava bean collard greens dandelion okra + wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. +

    + +

    + Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce + kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus + winter purslane kale. Celery potato scallion desert raisin horseradish + spinach carrot soko. +

    +
    +
    + + + + + +
    + +
    + + + diff --git a/css-cookbook/columns-flexbox.html b/css-cookbook/columns-flexbox.html index 0d9e47c6..cbcd6c5a 100644 --- a/css-cookbook/columns-flexbox.html +++ b/css-cookbook/columns-flexbox.html @@ -1,86 +1,89 @@ - - - - - - - - - CSS Cookbook: columns with flexbox - - - - - - - - - - -
    -
    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo - melon azuki bean garlic.

    - -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard - greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    - -

    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado - daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach - carrot soko. -

    - -
    -
    - - - - - -
    - -
    - - - - + + + + + + + + CSS Cookbook: columns with flexbox + + + + + + + + + +
    +
    +

    + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh + onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. +

    + +

    + Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot + courgette tatsoi pea sprouts fava bean collard greens dandelion okra + wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. +

    + +

    + Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce + kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus + winter purslane kale. Celery potato scallion desert raisin horseradish + spinach carrot soko. +

    +
    +
    + + + + + +
    + +
    + + + diff --git a/css-cookbook/columns-grid--download.html b/css-cookbook/columns-grid--download.html index 95d6fabf..91349f2d 100644 --- a/css-cookbook/columns-grid--download.html +++ b/css-cookbook/columns-grid--download.html @@ -1,54 +1,61 @@ - + - - + CSS Cookbook: columns with grid + - - - - +
    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi.

    - -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean - collard greens.

    - -

    Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts - black-eyed pea prairie turnip leek lentil turnip greens parsnip. .

    +

    + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh + onion daikon amaranth tatsoi. +

    + +

    + Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot + courgette tatsoi pea sprouts fava bean collard greens. +

    + +

    + Nori grape silver beet broccoli kombu beet greens fava bean potato + quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil + turnip greens parsnip. . +

    - - - - \ No newline at end of file + + diff --git a/css-cookbook/columns-grid.html b/css-cookbook/columns-grid.html index 7c7032d9..ffbc7af1 100644 --- a/css-cookbook/columns-grid.html +++ b/css-cookbook/columns-grid.html @@ -1,79 +1,83 @@ - - - - - - - - - CSS Cookbook: columns with grid - - - - - - - - - - -
    -
    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi.

    - -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean - collard greens.

    - -

    Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts - black-eyed pea prairie turnip leek lentil turnip greens parsnip. .

    -
    -
    - - - - - -
    - -
    - - - - - + + + + + + + + CSS Cookbook: columns with grid + + + + + + + + + +
    +
    +

    + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh + onion daikon amaranth tatsoi. +

    + +

    + Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot + courgette tatsoi pea sprouts fava bean collard greens. +

    + +

    + Nori grape silver beet broccoli kombu beet greens fava bean potato + quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil + turnip greens parsnip. . +

    +
    +
    + + + + + +
    + +
    + + + + diff --git a/css-cookbook/columns-multicol--download.html b/css-cookbook/columns-multicol--download.html index 10c3db31..6b29dbe7 100644 --- a/css-cookbook/columns-multicol--download.html +++ b/css-cookbook/columns-multicol--download.html @@ -1,54 +1,56 @@ - + - - + CSS Cookbook: columns with multicol - + + - - - - +
    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi - tomatillo - melon azuki bean garlic.

    - -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean - collard - greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    - -

    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach - avocado - daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish - spinach -

    - +

    + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh + onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. +

    + +

    + Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot + courgette tatsoi pea sprouts fava bean collard greens dandelion okra + wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. +

    + +

    + Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce + kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus + winter purslane kale. Celery potato scallion desert raisin horseradish + spinach +

    - - - + diff --git a/css-cookbook/columns-multicol.html b/css-cookbook/columns-multicol.html index 13618bea..e8bea1af 100644 --- a/css-cookbook/columns-multicol.html +++ b/css-cookbook/columns-multicol.html @@ -1,70 +1,74 @@ - - - - - - - - - CSS Cookbook: columns with multicol - - - - - - - - - - -
    -
    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo - melon azuki bean garlic.

    - -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard - greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    - -

    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado - daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach -

    - -
    -
    - - - - - -
    - -
    - - - - + + + + + + + + CSS Cookbook: columns with multicol + + + + + + + + + +
    +
    +

    + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh + onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. +

    + +

    + Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot + courgette tatsoi pea sprouts fava bean collard greens dandelion okra + wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. +

    + +

    + Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce + kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus + winter purslane kale. Celery potato scallion desert raisin horseradish + spinach +

    +
    +
    + + + + + +
    + +
    + + + diff --git a/css-cookbook/cookbook-template--download.html b/css-cookbook/cookbook-template--download.html index 4e6aa5f5..1ecd2822 100644 --- a/css-cookbook/cookbook-template--download.html +++ b/css-cookbook/cookbook-template--download.html @@ -1,35 +1,31 @@ - + - - + CSS Cookbook: download template - + - - - - - - + - - - - \ No newline at end of file + + diff --git a/css-cookbook/cookbook-template.html b/css-cookbook/cookbook-template.html index ab64d767..a989fb55 100644 --- a/css-cookbook/cookbook-template.html +++ b/css-cookbook/cookbook-template.html @@ -1,37 +1,36 @@ - + - + CSS Cookbook: template - + - + - +
    - +
    - - +
    - +
    - - - - \ No newline at end of file + + + diff --git a/css-cookbook/grid-wrapper--download.html b/css-cookbook/grid-wrapper--download.html index d62a7bb3..7c5706a0 100644 --- a/css-cookbook/grid-wrapper--download.html +++ b/css-cookbook/grid-wrapper--download.html @@ -1,74 +1,79 @@ - + - - - - - - CSS Cookbook: Grid Wrapper - - - - - - - - - - -
    -
    -

    This item aligns to a central “wrapper” – columns that have a maximum width.

    -
    -
    -

    This item aligns to the edge of the grid container.

    + + + + + CSS Cookbook: Grid Wrapper + + + + + +
    +
    +

    + This item aligns to a central “wrapper” – columns that have a maximum + width. +

    +
    +
    +

    This item aligns to the edge of the grid container.

    +
    +
    +

    + This item aligns to the left edge of the grid container and the right + edge of the wrapper. +

    +
    +
    +

    This item aligns to the right edge of the “wrapper” columns.

    +
    -
    -

    This item aligns to the left edge of the grid container and the right edge of the wrapper.

    -
    -
    -

    This item aligns to the right edge of the “wrapper” columns.

    -
    -
    - - - - \ No newline at end of file + + diff --git a/css-cookbook/grid-wrapper.html b/css-cookbook/grid-wrapper.html index 2a696a83..166418bb 100644 --- a/css-cookbook/grid-wrapper.html +++ b/css-cookbook/grid-wrapper.html @@ -1,136 +1,146 @@ - + - - - - - CSS Cookbook: Grid Wrapper - - - - - - -
    -
    -
    -

    This item aligns to a central “wrapper” – columns that have a maximum width.

    -
    -
    -

    This item aligns to the edge of the grid container.

    -
    -
    -

    This item aligns to the left edge of the grid container and the right edge of the wrapper.

    -
    -
    -

    This item aligns to the right edge of the “wrapper” columns.

    + + + + +
    +
    +
    +

    + This item aligns to a central “wrapper” – columns that have a + maximum width. +

    +
    +
    +

    This item aligns to the edge of the grid container.

    +
    +
    +

    + This item aligns to the left edge of the grid container and the + right edge of the wrapper. +

    +
    +
    +

    This item aligns to the right edge of the “wrapper” columns.

    +
    -
    -
    - - +.wrapper { + grid-column: 2 / -2; +} - -
    -

    This item aligns to the edge of the grid container.

    -
    + - -
    - +
    +

    This item aligns to the right edge of the “wrapper” columns.

    - - +
    + + +
    + +
    + + diff --git a/css-cookbook/list-group-badges--download.html b/css-cookbook/list-group-badges--download.html index 429ad503..38833583 100644 --- a/css-cookbook/list-group-badges--download.html +++ b/css-cookbook/list-group-badges--download.html @@ -1,74 +1,75 @@ - + - + CSS Cookbook: List Group with Badges - + - - - - - - +
      -
    • Item One - 2 -
      • -
    • Item Two - 10 -
      • -
    • Item Three - 9 -
      • -
    • Item Four - 0 -
      • +
    • + Item One + 2 +
      • +
    • + Item Two + 10 +
      • +
    • + Item Three + 9 +
      • +
    • + Item Four + 0 +
    - - - - \ No newline at end of file + + diff --git a/css-cookbook/list-group-badges.html b/css-cookbook/list-group-badges.html index 9a78bd62..88bc6dae 100644 --- a/css-cookbook/list-group-badges.html +++ b/css-cookbook/list-group-badges.html @@ -1,97 +1,99 @@ - + - + CSS Cookbook: List Group with Badges - + - + - +
    -
      -
    • Item One - 2 -
      • -
    • Item Two - 10 -
      • -
    • Item Three - 9 -
      • -
    • Item Four - 0 -
      • -
    +
      +
    • + Item One + 2 +
      • +
    • + Item Two + 10 +
      • +
    • + Item Three + 9 +
      • +
    • + Item Four + 0 +
      • +
    - + display: flex; + justify-content: space-between; + align-items: center; +} - +
  23. Item One + 2 +
    24. +
  24. Item Two + 10 +
    25. +
  25. Item Three + 9 +
    26. +
  26. Item Four + 0 +
    27. +
    - +
    - - - - \ No newline at end of file + + + diff --git a/css-cookbook/media-objects--download.html b/css-cookbook/media-objects--download.html index 8ad729a0..1dd5b69d 100644 --- a/css-cookbook/media-objects--download.html +++ b/css-cookbook/media-objects--download.html @@ -1,150 +1,149 @@ - + - - + CSS Cookbook: media objects + - - - - +
    - -
    - Balloons -
    - -
    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet - maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et - aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis - condimentum.

    -
    -
    - An optional footer goes here. -
    +
    + Balloons +
    + +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula + vitae ligula sit amet maximus. Nunc auctor neque ipsum, ac porttitor + elit lobortis ac. Vivamus ultrices sodales tellus et aliquam. + Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id + dolor venenatis condimentum. +

    +
    +
    An optional footer goes here.
    - -
    - Account -
    -
    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet - maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et - aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis - condimentum.

    -
    -
    +
    + Account +
    +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula + vitae ligula sit amet maximus. Nunc auctor neque ipsum, ac porttitor + elit lobortis ac. Vivamus ultrices sodales tellus et aliquam. + Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id + dolor venenatis condimentum. +

    +
    +
    - -
    - Balloons -
    - -
    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet - maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et - aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis - condimentum.

    -
    -
    - An optional footer goes here. -
    +
    + Balloons +
    + +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula + vitae ligula sit amet maximus. Nunc auctor neque ipsum, ac porttitor + elit lobortis ac. Vivamus ultrices sodales tellus et aliquam. + Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id + dolor venenatis condimentum. +

    +
    +
    An optional footer goes here.
    - + + Balloons + + +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula + vitae ligula sit amet maximus. Nunc auctor neque ipsum, ac porttitor + elit lobortis ac. Vivamus ultrices sodales tellus et aliquam. + Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id + dolor venenatis condimentum. +

    +
    + +
    + +
    - Balloons + Balloons
    - -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet - maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et - aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis - condimentum.

    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis + vehicula vitae ligula sit amet maximus. +

    - -
    - - - Balloons - - -
    - -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet - maximus.

    -
    - -
    - -
    - +
    - - - + diff --git a/css-cookbook/media-objects-fallback--download.html b/css-cookbook/media-objects-fallback--download.html index 62af147b..b1d1d8e3 100644 --- a/css-cookbook/media-objects-fallback--download.html +++ b/css-cookbook/media-objects-fallback--download.html @@ -1,179 +1,177 @@ - + - - + CSS Cookbook: media objects - + .media-flip .img { + float: right; + margin: 0 0 0 20px; + } - + .content { + grid-area: content; + } -
    + .footer { + grid-area: footer; + } -
    - Balloons -
    + @supports (display: grid) { + .media:after { + content: none; + } -
    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet - maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et - aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis - condimentum.

    -
    -
    - An optional footer goes here. -
    -
    + .img, + .media-flip .img { + max-width: 100%; + margin: 0; + } + } + } + + +
    +
    + Balloons +
    + +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula + vitae ligula sit amet maximus. Nunc auctor neque ipsum, ac porttitor + elit lobortis ac. Vivamus ultrices sodales tellus et aliquam. + Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id + dolor venenatis condimentum. +

    +
    +
    An optional footer goes here.
    +
    -
    - Account -
    -
    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet - maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et - aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis - condimentum.

    -
    -
    +
    +
    + Account +
    +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula + vitae ligula sit amet maximus. Nunc auctor neque ipsum, ac porttitor + elit lobortis ac. Vivamus ultrices sodales tellus et aliquam. + Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id + dolor venenatis condimentum. +

    +
    +
    - -
    - Balloons -
    - -
    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet - maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et - aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis - condimentum.

    -
    -
    - An optional footer goes here. -
    +
    + Balloons +
    + +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula + vitae ligula sit amet maximus. Nunc auctor neque ipsum, ac porttitor + elit lobortis ac. Vivamus ultrices sodales tellus et aliquam. + Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id + dolor venenatis condimentum. +

    +
    +
    An optional footer goes here.
    - + + Balloons + + +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula + vitae ligula sit amet maximus. Nunc auctor neque ipsum, ac porttitor + elit lobortis ac. Vivamus ultrices sodales tellus et aliquam. + Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id + dolor venenatis condimentum. +

    +
    + +
    + +
    - Balloons + Balloons
    - -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet - maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et - aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis - condimentum.

    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis + vehicula vitae ligula sit amet maximus. +

    - -
    - - - Balloons - - -
    - -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet - maximus.

    -
    - -
    - -
    - +
    - - - + diff --git a/css-cookbook/media-objects-fallback.html b/css-cookbook/media-objects-fallback.html index 347896ba..c8d4021e 100644 --- a/css-cookbook/media-objects-fallback.html +++ b/css-cookbook/media-objects-fallback.html @@ -1,254 +1,250 @@ - + - - + CSS Cookbook: media objects - + - - - - -
    -
    - -
    - Balloons -
    - -
    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet - maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et - aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis - condimentum.

    -
    -
    - An optional footer goes here. -
    -
    + @media (min-width: 500px) { + /* clearfix*/ + .media:after { + content: ""; + display: table; + clear: both; + } -
    + .media { + display: grid; + grid-template-columns: fit-content(200px) 1fr; + grid-template-rows: 1fr auto; + grid-template-areas: + "image content" + "image footer"; + grid-gap: 20px; + margin-bottom: 4em; + } -
    - Account -
    -
    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet - maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et - aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis - condimentum.

    -
    -
    -
    + .media-flip { + grid-template-columns: 1fr fit-content(200px); + grid-template-areas: + "content image" + "footer image"; + } -
    - -
    - Balloons -
    - -
    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet - maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et - aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis - condimentum.

    -
    -
    - An optional footer goes here. -
    -
    + .img { + float: left; + margin-right: 20px; + max-width: 200px; + grid-area: image; + } -
    + .media-flip .img { + float: right; + margin: 0 0 0 20px; + } - - Balloons - + .content { + grid-area: content; + } -
    + .footer { + grid-area: footer; + } -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet - maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et - aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis - condimentum.

    -
    + @supports (display: grid) { + .media:after { + content: none; + } -
    + .img, + .media-flip .img { + max-width: 100%; + margin: 0; + } + } + } + + -
    + +
    +
    +
    + Balloons +
    - - Balloons - +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis + vehicula vitae ligula sit amet maximus. Nunc auctor neque ipsum, ac + porttitor elit lobortis ac. Vivamus ultrices sodales tellus et + aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent + quis risus id dolor venenatis condimentum. +

    +
    +
    An optional footer goes here.
    +
    -
    +
    +
    + Account +
    +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis + vehicula vitae ligula sit amet maximus. Nunc auctor neque ipsum, ac + porttitor elit lobortis ac. Vivamus ultrices sodales tellus et + aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent + quis risus id dolor venenatis condimentum. +

    +
    +
    +
    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet - maximus.

    -
    +
    +
    + Balloons +
    -
    +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis + vehicula vitae ligula sit amet maximus. Nunc auctor neque ipsum, ac + porttitor elit lobortis ac. Vivamus ultrices sodales tellus et + aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent + quis risus id dolor venenatis condimentum. +

    +
    +
    An optional footer goes here.
    +
    + +
    + + Balloons + + +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis + vehicula vitae ligula sit amet maximus. Nunc auctor neque ipsum, ac + porttitor elit lobortis ac. Vivamus ultrices sodales tellus et + aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent + quis risus id dolor venenatis condimentum. +

    +
    -
    +
    +
    + + Balloons + + +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis + vehicula vitae ligula sit amet maximus. +

    +
    + +
    +
    - + } +} +
    - +
    - - - - \ No newline at end of file + + + diff --git a/css-cookbook/media-objects.html b/css-cookbook/media-objects.html index 7d4f4d7f..2b1568d7 100644 --- a/css-cookbook/media-objects.html +++ b/css-cookbook/media-objects.html @@ -1,201 +1,198 @@ - + - + CSS Cookbook: media objects - + + @media (min-width: 500px) { + .media { + display: grid; + grid-template-columns: fit-content(200px) 1fr; + grid-template-rows: 1fr auto; + grid-template-areas: + "image content" + "image footer"; + grid-gap: 20px; + margin-bottom: 4em; + } - + .media-flip { + grid-template-columns: 1fr fit-content(250px); + grid-template-areas: + "content image" + "footer image"; + } - -
    -
    + .img { + grid-area: image; + } -
    - Balloons -
    - -
    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet - maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et - aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis - condimentum.

    -
    -
    - An optional footer goes here. -
    -
    + .content { + grid-area: content; + } -
    + .footer { + grid-area: footer; + } + } + + -
    - Account -
    -
    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet - maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et - aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis - condimentum.

    -
    -
    + +
    +
    +
    + Balloons
    -
    - -
    - Balloons -
    - -
    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet - maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et - aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis - condimentum.

    -
    -
    - An optional footer goes here. -
    +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis + vehicula vitae ligula sit amet maximus. Nunc auctor neque ipsum, ac + porttitor elit lobortis ac. Vivamus ultrices sodales tellus et + aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent + quis risus id dolor venenatis condimentum. +

    +
    An optional footer goes here.
    +
    -
    - - - Balloons - - -
    - -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet - maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et - aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis - condimentum.

    -
    - -
    - -
    - - - Balloons - - -
    +
    +
    + Account +
    +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis + vehicula vitae ligula sit amet maximus. Nunc auctor neque ipsum, ac + porttitor elit lobortis ac. Vivamus ultrices sodales tellus et + aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent + quis risus id dolor venenatis condimentum. +

    +
    +
    +
    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet - maximus.

    -
    +
    +
    + Balloons +
    -
    +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis + vehicula vitae ligula sit amet maximus. Nunc auctor neque ipsum, ac + porttitor elit lobortis ac. Vivamus ultrices sodales tellus et + aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent + quis risus id dolor venenatis condimentum. +

    +
    +
    An optional footer goes here.
    +
    + +
    + + Balloons + + +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis + vehicula vitae ligula sit amet maximus. Nunc auctor neque ipsum, ac + porttitor elit lobortis ac. Vivamus ultrices sodales tellus et + aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent + quis risus id dolor venenatis condimentum. +

    +
    -
    +
    +
    + + Balloons + + +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis + vehicula vitae ligula sit amet maximus. +

    +
    + +
    +
    - - + + +
    - +
    - - - + + diff --git a/css-cookbook/pagination--download.html b/css-cookbook/pagination--download.html index 527d4efa..45d21320 100644 --- a/css-cookbook/pagination--download.html +++ b/css-cookbook/pagination--download.html @@ -1,86 +1,104 @@ - + - + CSS Cookbook: Pagination + - - - - - - + - - - - \ No newline at end of file + + diff --git a/css-cookbook/pagination.html b/css-cookbook/pagination.html index 78c19cc1..f2f820e8 100644 --- a/css-cookbook/pagination.html +++ b/css-cookbook/pagination.html @@ -1,113 +1,130 @@ - + - + CSS Cookbook: Pagination - + - + - +
    - +
    - + margin: 0 1px; +} - + +
    - +
    - - - - \ No newline at end of file + + + diff --git a/css-cookbook/playable.js b/css-cookbook/playable.js index ddebe2d8..d9353ed2 100644 --- a/css-cookbook/playable.js +++ b/css-cookbook/playable.js @@ -1,22 +1,22 @@ -var section = document.querySelector('section'); -var editable = document.querySelector('.editable'); -var textareaHTML = document.querySelector('.playable-html'); -var textareaCSS = document.querySelector('.playable-css'); -var reset = document.getElementById('reset'); +var section = document.querySelector("section"); +var editable = document.querySelector(".editable"); +var textareaHTML = document.querySelector(".playable-html"); +var textareaCSS = document.querySelector(".playable-css"); +var reset = document.getElementById("reset"); var htmlCode = textareaHTML.value; var cssCode = textareaCSS.value; function fillCode() { - editable.innerHTML = textareaCSS.value; - section.innerHTML = textareaHTML.value; + editable.innerHTML = textareaCSS.value; + section.innerHTML = textareaHTML.value; } -reset.addEventListener('click', function () { - textareaHTML.value = htmlCode; - textareaCSS.value = cssCode; - fillCode(); +reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); }); -textareaHTML.addEventListener('input', fillCode); -textareaCSS.addEventListener('input', fillCode); -window.addEventListener('load', fillCode); \ No newline at end of file +textareaHTML.addEventListener("input", fillCode); +textareaCSS.addEventListener("input", fillCode); +window.addEventListener("load", fillCode); diff --git a/css-cookbook/split-navigation--download.html b/css-cookbook/split-navigation--download.html index 6970de41..130f760d 100644 --- a/css-cookbook/split-navigation--download.html +++ b/css-cookbook/split-navigation--download.html @@ -1,55 +1,51 @@ - + - - + CSS Cookbook: Split Navigation - + - - - - - - + - - - - \ No newline at end of file + + diff --git a/css-cookbook/split-navigation.html b/css-cookbook/split-navigation.html index e5310f8b..9313ae8a 100644 --- a/css-cookbook/split-navigation.html +++ b/css-cookbook/split-navigation.html @@ -1,71 +1,70 @@ - + - + CSS Cookbook: Split Navigation - + - + - +
    - +
    - + margin-left: auto; +} - + +
    - +
    - - - - \ No newline at end of file + + + diff --git a/css-cookbook/sticky-footer--download.html b/css-cookbook/sticky-footer--download.html index 4fefa0eb..0ec88b6a 100644 --- a/css-cookbook/sticky-footer--download.html +++ b/css-cookbook/sticky-footer--download.html @@ -1,71 +1,72 @@ - + - - + CSS Cookbook: sticky footer - + + - - - - - +
    -
    -
    This is the header
    -
    -

    Main page content here, add more if you want to see the footer push down.

    -
    -
    Sticky footer
    -
    +
    +
    This is the header
    +
    +

    + Main page content here, add more if you want to see the footer push + down. +

    +
    +
    Sticky footer
    +
    - + diff --git a/css-cookbook/sticky-footer-flexbox--download.html b/css-cookbook/sticky-footer-flexbox--download.html index 563db944..60b1c7bc 100644 --- a/css-cookbook/sticky-footer-flexbox--download.html +++ b/css-cookbook/sticky-footer-flexbox--download.html @@ -1,72 +1,70 @@ - + - - + CSS Cookbook: sticky footer with flexbox - - + - - - - - - +
    -
    This is the header
    -
    -

    Main page content here, add more if you want to see the footer push down.

    -
    -
    Sticky footer
    +
    This is the header
    +
    +

    + Main page content here, add more if you want to see the footer push + down. +

    +
    +
    Sticky footer
    - - - + diff --git a/css-cookbook/sticky-footer-flexbox.html b/css-cookbook/sticky-footer-flexbox.html index 695d837d..7d764a60 100644 --- a/css-cookbook/sticky-footer-flexbox.html +++ b/css-cookbook/sticky-footer-flexbox.html @@ -1,125 +1,127 @@ - - - - - - - - - CSS Cookbook: sticky footer with flexbox - - - - - - - - - - -
    -
    -
    This is the header
    -
    -

    Main page content here, add more if you want to see the footer push down.

    -
    -
    Sticky footer
    -
    -
    - - - - - -
    - -
    - - - - + + + + + + + + CSS Cookbook: sticky footer with flexbox + + + + + + + + + +
    +
    +
    This is the header
    +
    +

    + Main page content here, add more if you want to see the footer push + down. +

    +
    +
    Sticky footer
    +
    +
    + + + + + +
    + +
    + + + diff --git a/css-cookbook/sticky-footer.html b/css-cookbook/sticky-footer.html index d6ce605d..2f238620 100644 --- a/css-cookbook/sticky-footer.html +++ b/css-cookbook/sticky-footer.html @@ -1,89 +1,89 @@ - - - - - - - - - CSS Cookbook: sticky footer - - - - - - - - - - -
    -
    -
    This is the header
    -
    -

    Main page content here, add more if you want to see the footer push down.

    -
    -
    Sticky footer
    -
    -
    - - - - - -
    - -
    - - - - + + + + + + + + CSS Cookbook: sticky footer + + + + + + + + + +
    +
    +
    This is the header
    +
    +

    + Main page content here, add more if you want to see the footer push + down. +

    +
    +
    Sticky footer
    +
    +
    + + + + + +
    + +
    + + + diff --git a/css-cookbook/styles.css b/css-cookbook/styles.css index 030678b3..11945fee 100644 --- a/css-cookbook/styles.css +++ b/css-cookbook/styles.css @@ -1,61 +1,65 @@ -/* Some default styling for cookbook examples */ -/* -rgb(53,43,34) -rgb(75,70,74) -rgb(95,97,110) -rgb(137,151,188) -rgb(160,178,226) -*/ -body { - background-color: #fff; - color: #333; - font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif; - padding: 0; - margin: 0; -} - -/* styles for the editor */ - -.playable { - font-family: monospace; - display: block; - margin-bottom: 10px; - background-color: #F4F7F8; - border: none; - border-left: 6px solid #558ABB; - color: #4D4E53; - width: 90%; - max-width: 700px; - padding: 10px 10px 0px; - font-size: 90%; - } - - .playable-css { - height: 80px; - } - - .playable-html { - height: 160px; - } - - .playable-buttons { - text-align: right; - width: 90%; - max-width: 700px; - padding: 5px 10px 5px 26px; - font-size: 100%; - } - - .preview { - width: 90%; - max-width: 700px; - border: 1px solid #4D4E53; - border-radius: 2px; - padding: 10px 14px 10px 10px; - margin-bottom: 10px; - } - - .preview input { - display: block; - margin: 5px; - } +/* Some default styling for cookbook examples */ +/* +rgb(53,43,34) +rgb(75,70,74) +rgb(95,97,110) +rgb(137,151,188) +rgb(160,178,226) +*/ +body { + background-color: #fff; + color: #333; + font: + 1.2em / 1.5 Helvetica Neue, + Helvetica, + Arial, + sans-serif; + padding: 0; + margin: 0; +} + +/* styles for the editor */ + +.playable { + font-family: monospace; + display: block; + margin-bottom: 10px; + background-color: #f4f7f8; + border: none; + border-left: 6px solid #558abb; + color: #4d4e53; + width: 90%; + max-width: 700px; + padding: 10px 10px 0px; + font-size: 90%; +} + +.playable-css { + height: 80px; +} + +.playable-html { + height: 160px; +} + +.playable-buttons { + text-align: right; + width: 90%; + max-width: 700px; + padding: 5px 10px 5px 26px; + font-size: 100%; +} + +.preview { + width: 90%; + max-width: 700px; + border: 1px solid #4d4e53; + border-radius: 2px; + padding: 10px 14px 10px 10px; + margin-bottom: 10px; +} + +.preview input { + display: block; + margin: 5px; +} diff --git a/css-text/hyphens.html b/css-text/hyphens.html index 5afd1c9a..b858fd00 100644 --- a/css-text/hyphens.html +++ b/css-text/hyphens.html @@ -1,4 +1,4 @@ - + @@ -19,7 +19,7 @@ @@ -32,19 +32,18 @@
    - + inline-size: 150px; + overflow-wrap: break-word; + hyphens: manual; +} - +
    diff --git a/css-text/inline-overflow-hidden.html b/css-text/inline-overflow-hidden.html index 89c0de78..749520c4 100644 --- a/css-text/inline-overflow-hidden.html +++ b/css-text/inline-overflow-hidden.html @@ -1,4 +1,4 @@ - + @@ -18,7 +18,7 @@ @@ -31,12 +31,11 @@
    - +} + inline-size: 150px; +} - +
    diff --git a/css-text/min-content.html b/css-text/min-content.html index d9738f95..e709479c 100644 --- a/css-text/min-content.html +++ b/css-text/min-content.html @@ -1,4 +1,4 @@ - + @@ -18,7 +18,7 @@ @@ -30,17 +30,16 @@
    - +} - +
    diff --git a/css-text/overflow-wrap.html b/css-text/overflow-wrap.html index 13acd61c..6e024833 100644 --- a/css-text/overflow-wrap.html +++ b/css-text/overflow-wrap.html @@ -1,4 +1,4 @@ - + @@ -19,7 +19,7 @@ @@ -31,18 +31,17 @@
    - + inline-size: 150px; + overflow-wrap: break-word; +} - +
    diff --git a/css-text/playable.js b/css-text/playable.js index ddebe2d8..d9353ed2 100644 --- a/css-text/playable.js +++ b/css-text/playable.js @@ -1,22 +1,22 @@ -var section = document.querySelector('section'); -var editable = document.querySelector('.editable'); -var textareaHTML = document.querySelector('.playable-html'); -var textareaCSS = document.querySelector('.playable-css'); -var reset = document.getElementById('reset'); +var section = document.querySelector("section"); +var editable = document.querySelector(".editable"); +var textareaHTML = document.querySelector(".playable-html"); +var textareaCSS = document.querySelector(".playable-css"); +var reset = document.getElementById("reset"); var htmlCode = textareaHTML.value; var cssCode = textareaCSS.value; function fillCode() { - editable.innerHTML = textareaCSS.value; - section.innerHTML = textareaHTML.value; + editable.innerHTML = textareaCSS.value; + section.innerHTML = textareaHTML.value; } -reset.addEventListener('click', function () { - textareaHTML.value = htmlCode; - textareaCSS.value = cssCode; - fillCode(); +reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); }); -textareaHTML.addEventListener('input', fillCode); -textareaCSS.addEventListener('input', fillCode); -window.addEventListener('load', fillCode); \ No newline at end of file +textareaHTML.addEventListener("input", fillCode); +textareaCSS.addEventListener("input", fillCode); +window.addEventListener("load", fillCode); diff --git a/css-text/styles.css b/css-text/styles.css index b733e436..11945fee 100644 --- a/css-text/styles.css +++ b/css-text/styles.css @@ -1,61 +1,65 @@ /* Some default styling for cookbook examples */ -/* +/* rgb(53,43,34) rgb(75,70,74) rgb(95,97,110) rgb(137,151,188) rgb(160,178,226) */ -body { - background-color: #fff; - color: #333; - font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif; - padding: 0; - margin: 0; +body { + background-color: #fff; + color: #333; + font: + 1.2em / 1.5 Helvetica Neue, + Helvetica, + Arial, + sans-serif; + padding: 0; + margin: 0; } /* styles for the editor */ .playable { - font-family: monospace; - display: block; - margin-bottom: 10px; - background-color: #F4F7F8; - border: none; - border-left: 6px solid #558ABB; - color: #4D4E53; - width: 90%; - max-width: 700px; - padding: 10px 10px 0px; - font-size: 90%; - } + font-family: monospace; + display: block; + margin-bottom: 10px; + background-color: #f4f7f8; + border: none; + border-left: 6px solid #558abb; + color: #4d4e53; + width: 90%; + max-width: 700px; + padding: 10px 10px 0px; + font-size: 90%; +} - .playable-css { - height: 80px; - } +.playable-css { + height: 80px; +} - .playable-html { - height: 160px; - } +.playable-html { + height: 160px; +} - .playable-buttons { - text-align: right; - width: 90%; - max-width: 700px; - padding: 5px 10px 5px 26px; - font-size: 100%; - } +.playable-buttons { + text-align: right; + width: 90%; + max-width: 700px; + padding: 5px 10px 5px 26px; + font-size: 100%; +} - .preview { - width: 90%; - max-width: 700px; - border: 1px solid #4D4E53; - border-radius: 2px; - padding: 10px 14px 10px 10px; - margin-bottom: 10px; - } +.preview { + width: 90%; + max-width: 700px; + border: 1px solid #4d4e53; + border-radius: 2px; + padding: 10px 14px 10px 10px; + margin-bottom: 10px; +} - .preview input { - display: block; - margin: 5px; - } +.preview input { + display: block; + margin: 5px; +} diff --git a/css-text/wbr.html b/css-text/wbr.html index 2db388a5..4d4e07e1 100644 --- a/css-text/wbr.html +++ b/css-text/wbr.html @@ -1,4 +1,4 @@ - + @@ -18,7 +18,7 @@ @@ -26,21 +26,20 @@
    - Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch + Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch
    - + inline-size: 150px; +} - +
    diff --git a/css-text/word-break-checkbox.html b/css-text/word-break-checkbox.html index 549ec58e..a8d1d8f6 100644 --- a/css-text/word-break-checkbox.html +++ b/css-text/word-break-checkbox.html @@ -1,4 +1,4 @@ - + @@ -10,20 +10,20 @@ } .preview input[type="checkbox"] { - display: inline; + display: inline; } .field { - inline-size: 150px; - border: 1px solid #ccc; - margin-block-end: 1em; - padding: 10px; + inline-size: 150px; + border: 1px solid #ccc; + margin-block-end: 1em; + padding: 10px; } @@ -31,29 +31,32 @@
    - +
    - +
    - + word-break: break-all; +} - +
    diff --git a/css-text/word-break.html b/css-text/word-break.html index b7879f7e..83bb7d92 100644 --- a/css-text/word-break.html +++ b/css-text/word-break.html @@ -1,4 +1,4 @@ - + @@ -20,45 +20,40 @@
    -
    - A Very LongWordThatHasNoBreakingPossibilities -
    +
    A Very LongWordThatHasNoBreakingPossibilities
    -
    - A Very LongWordThatHasNoBreakingPossibilities -
    +
    A Very LongWordThatHasNoBreakingPossibilities
    - + overflow-wrap: break-word; +} - +
    diff --git a/cssom/modify-rule.html b/cssom/modify-rule.html index c053dd80..1e02df47 100644 --- a/cssom/modify-rule.html +++ b/cssom/modify-rule.html @@ -2,16 +2,19 @@ Modifying a stylesheet rule with CSSOM -

    The stylesheet declaration for the body's background color is modified via JavaScript.

    +

    + The stylesheet declaration for the body's background color is modified via + JavaScript. +

    diff --git a/display/multi-keyword/block-flow-root.html b/display/multi-keyword/block-flow-root.html index f0240470..ff9a813e 100644 --- a/display/multi-keyword/block-flow-root.html +++ b/display/multi-keyword/block-flow-root.html @@ -1,99 +1,99 @@ - + - - - - Multi-Keyword Values of Display: display: flow-root - - - - - - -
    -
    -
    Floated
    -

    Text following the float.

    -
    - -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/display/multi-keyword/inline-block.html b/display/multi-keyword/inline-block.html index 15cdc28a..1f22b167 100644 --- a/display/multi-keyword/inline-block.html +++ b/display/multi-keyword/inline-block.html @@ -1,121 +1,125 @@ - + - - - - Multi-Keyword Values of Display: display: inline-block + + + + Multi-Keyword Values of Display: display: inline-block - - - + p { + width: 300px; + } + + + - -
    -

    This paragraph has a span with padding it is an inline-block so the padding is contained and pushes the other line boxes away.

    - -
    - - -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/display/multi-keyword/inline-flex.html b/display/multi-keyword/inline-flex.html index 9d6a0ff5..702395ae 100644 --- a/display/multi-keyword/inline-flex.html +++ b/display/multi-keyword/inline-flex.html @@ -1,126 +1,125 @@ - + - - - - Multi-Keyword Values of Display: an inline flex container + + + + Multi-Keyword Values of Display: an inline flex container - + + - - - - - - -
    -
    -
    One
    -
    Two
    -
    - Text following the flex container. - -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/display/multi-keyword/multi-keyword-flex.html b/display/multi-keyword/multi-keyword-flex.html index 2fcec2d8..a7c4f126 100644 --- a/display/multi-keyword/multi-keyword-flex.html +++ b/display/multi-keyword/multi-keyword-flex.html @@ -1,109 +1,106 @@ - + - - - - Multi-Keyword Values of Display: two value syntax - - - - - - -
    -

    Multiple values for display

    - -
    -
    Item One
    -
    Item Two
    -
    Item Three
    -
    - -

    The first example is a block element with flex children.

    - -
    -
    Item One
    -
    Item Two
    -
    Item Three
    -
    . - -The second example is an inline element with flex children. - -
    - - + -
    - -
    - - +The second example is an inline element with flex children. +
    + +
    + + diff --git a/display/multi-keyword/span-flex.html b/display/multi-keyword/span-flex.html index f75c8e7e..b4b18bf2 100644 --- a/display/multi-keyword/span-flex.html +++ b/display/multi-keyword/span-flex.html @@ -1,118 +1,115 @@ - + - - - - Multi-Keyword Values of Display: a span as a flex container + + + + Multi-Keyword Values of Display: a span as a flex container - - - + section { + width: 90%; + max-width: 700px; + border: 1px solid #4d4e53; + border-radius: 2px; + padding: 10px 14px 10px 10px; + margin-bottom: 10px; + } - -
    - - Some text emphasized text - + section input { + display: block; + margin: 5px; + } + + + -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/feature-queries/and.html b/feature-queries/and.html index 6ae7a860..c77848dd 100644 --- a/feature-queries/and.html +++ b/feature-queries/and.html @@ -1,58 +1,56 @@ - + - + Feature Queries: and - - + + - + - +
    -
    - If your browser supports display: grid and shape-outside: circle(), the text and border will be red. -
    +
    + If your browser supports display: grid and shape-outside: circle(), the + text and border will be red. +
    - + .box { + border: 4px solid red; + color: red; + } +} - +
    - +
    - - - - \ No newline at end of file + + + diff --git a/feature-queries/not.html b/feature-queries/not.html index 4ccfb5df..dc5eda8b 100644 --- a/feature-queries/not.html +++ b/feature-queries/not.html @@ -1,58 +1,55 @@ - + - + Feature Queries: not - - + + - + - +
    -
    - If your browser does not support row-gap, the text and border will be red. -
    +
    + If your browser does not support row-gap, the text and border will be + red. +
    - + .box { + border: 4px solid red; + color: red; + } +} - +
    - +
    - - - - \ No newline at end of file + + + diff --git a/feature-queries/or.html b/feature-queries/or.html index adbfbcb5..a221b2e0 100644 --- a/feature-queries/or.html +++ b/feature-queries/or.html @@ -1,58 +1,55 @@ - + - + Feature Queries: or - - + + - + - +
    -
    - If your browser supports display: grid or display: -ms-grid, the text and border will be red. -
    +
    + If your browser supports display: grid or display: -ms-grid, the text + and border will be red. +
    - + .box { + border: 4px solid red; + color: red; + } +} - +
    - +
    - - - - \ No newline at end of file + + + diff --git a/feature-queries/simple.html b/feature-queries/simple.html index ea062a91..c56f40ab 100644 --- a/feature-queries/simple.html +++ b/feature-queries/simple.html @@ -1,58 +1,54 @@ - + - + Feature Queries - - + + - + - +
    -
    +
    If your browser supports row-gap, the text and border will be red. -
    +
    - + .box { + border: 4px solid red; + color: red; + } +} - +
    - +
    - - - - \ No newline at end of file + + + diff --git a/feature-queries/step1.html b/feature-queries/step1.html index 4d15a82d..bb56c48c 100644 --- a/feature-queries/step1.html +++ b/feature-queries/step1.html @@ -1,13 +1,13 @@ - + - + Feature Queries: step 1 - + - + - +
    - Box 1 -
    Has more content -
    than the other boxes. -
    -
    - Box 2 -
    -
    - Box 3 + Box 1 +
    Has more content
    than the other boxes.
    +
    Box 2
    +
    Box 3
    - +} - +
    - +
    - - - - \ No newline at end of file + + + diff --git a/feature-queries/step2.html b/feature-queries/step2.html index b576ebfa..0646afe3 100644 --- a/feature-queries/step2.html +++ b/feature-queries/step2.html @@ -1,13 +1,13 @@ - + - + Feature Queries: step 2 - + - + - +
    - Box 1 -
    Has more content -
    than the other boxes. -
    -
    - Box 2 -
    -
    - Box 3 + Box 1 +
    Has more content
    than the other boxes.
    +
    Box 2
    +
    Box 3
    - +} - +
    - +
    - - - - \ No newline at end of file + + + diff --git a/feature-queries/step3.html b/feature-queries/step3.html index 5077d65d..716a8845 100644 --- a/feature-queries/step3.html +++ b/feature-queries/step3.html @@ -1,13 +1,13 @@ - + - + Feature Queries: step 3 - + - + - +
    - Box 1 -
    Has more content -
    than the other boxes. -
    -
    - Box 2 -
    -
    - Box 3 + Box 1 +
    Has more content
    than the other boxes.
    +
    Box 2
    +
    Box 3
    - +} - +
    - +
    - - - - \ No newline at end of file + + + diff --git a/feature-queries/step4.html b/feature-queries/step4.html index 1c0c45e2..ac979ff0 100644 --- a/feature-queries/step4.html +++ b/feature-queries/step4.html @@ -1,13 +1,13 @@ - + - + Feature Queries: step 4 - + - + - +
    - Box 1 -
    Has more content -
    than the other boxes. -
    -
    - Box 2 -
    -
    - Box 3 + Box 1 +
    Has more content
    than the other boxes.
    +
    Box 2
    +
    Box 3
    - +} - +
    - +
    - - - - \ No newline at end of file + + + diff --git a/flexbox/alignment/align-content-column.html b/flexbox/alignment/align-content-column.html index c102f021..76b7b039 100644 --- a/flexbox/alignment/align-content-column.html +++ b/flexbox/alignment/align-content-column.html @@ -1,102 +1,104 @@ - + - - - - Flexbox Alignment: aligning content on the cross axis, direction column - - - - - - -
    -
    -
    One
    -
    Two
    -
    Three
    -
    Four
    -
    Five
    -
    Six
    -
    Seven
    -
    Eight
    -
    - -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flexbox/alignment/align-content.html b/flexbox/alignment/align-content.html index 745c586b..01d44a27 100644 --- a/flexbox/alignment/align-content.html +++ b/flexbox/alignment/align-content.html @@ -1,109 +1,109 @@ - + - - - - Flexbox Alignment: aligning content on the cross axis - - - - - - -
    -
    -
    One
    -
    Two
    -
    Three
    -
    Four
    -
    Five
    -
    Six
    -
    Seven
    -
    Eight
    -
    - -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flexbox/alignment/align-items.html b/flexbox/alignment/align-items.html index b6046a78..64bfb2ba 100644 --- a/flexbox/alignment/align-items.html +++ b/flexbox/alignment/align-items.html @@ -1,101 +1,99 @@ - + - - - - Flexbox Alignment: aligning items on the cross axis + + + + Flexbox Alignment: aligning items on the cross axis - - - + .box > * { + padding: 20px; + border: 2px solid rgb(96, 139, 168); + border-radius: 5px; + background-color: rgba(96, 139, 168, 0.2); + } + + + - -
    -
    -
    One
    -
    Two
    -
    Three -
    has -
    extra -
    text + +
    +
    +
    One
    +
    Two
    +
    Three
    has
    extra
    text
    -
    - -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flexbox/alignment/align-self-column.html b/flexbox/alignment/align-self-column.html index e779e4fd..ed51545d 100644 --- a/flexbox/alignment/align-self-column.html +++ b/flexbox/alignment/align-self-column.html @@ -1,100 +1,104 @@ - + - - - - Flexbox Alignment: aligning individual items on the cross axis + + + + + Flexbox Alignment: aligning individual items on the cross axis + - - + - - - -
    -
    -
    One
    -
    Two
    -
    Three
    -
    Four
    -
    + } + + -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flexbox/alignment/align-self.html b/flexbox/alignment/align-self.html index 43135d9e..8242c1af 100644 --- a/flexbox/alignment/align-self.html +++ b/flexbox/alignment/align-self.html @@ -1,146 +1,149 @@ - + - - - - Flexbox Alignment: aligning individual items on the cross axis + + + + + Flexbox Alignment: aligning individual items on the cross axis + - - + - - - -
    -
    -
    One
    -
    Two
    -
    Three
    -
    Four
    -
    + } + + -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flexbox/alignment/auto-margins.html b/flexbox/alignment/auto-margins.html index 859a975e..b1d9394a 100644 --- a/flexbox/alignment/auto-margins.html +++ b/flexbox/alignment/auto-margins.html @@ -1,138 +1,139 @@ - + - - - - Flexbox Alignment: alignment with auto margins + + + + Flexbox Alignment: alignment with auto margins - - + - - - -
    -
    -
    One
    -
    Two
    -
    Three
    -
    Four
    -
    Five
    -
    + } + + -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flexbox/alignment/intro.html b/flexbox/alignment/intro.html index b2639c38..daf59e71 100644 --- a/flexbox/alignment/intro.html +++ b/flexbox/alignment/intro.html @@ -1,90 +1,92 @@ - + - - - - Flexbox Alignment: centering a box - - - - - - -
    -
    -
    -
    - -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flexbox/alignment/justify-content-column.html b/flexbox/alignment/justify-content-column.html index a1a8a91e..77a58baa 100644 --- a/flexbox/alignment/justify-content-column.html +++ b/flexbox/alignment/justify-content-column.html @@ -1,136 +1,140 @@ - + - - - - Flexbox Alignment: alignment on the main axis with justify-content, direction column + + + + + Flexbox Alignment: alignment on the main axis with justify-content, + direction column + - - - - - -
    -
    -
    One
    -
    Two
    -
    Three
    -
    Four
    -
    + .box > * { + padding: 20px; + border: 2px solid rgb(96, 139, 168); + border-radius: 5px; + background-color: rgba(96, 139, 168, 0.2); + } + + + -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flexbox/alignment/justify-content-reverse.html b/flexbox/alignment/justify-content-reverse.html index e1298b52..0dfbca02 100644 --- a/flexbox/alignment/justify-content-reverse.html +++ b/flexbox/alignment/justify-content-reverse.html @@ -1,134 +1,138 @@ - + - - - - Flexbox Alignment: alignment on the main axis with justify-content and row-reverse + + + + + Flexbox Alignment: alignment on the main axis with justify-content and + row-reverse + - - - - - -
    -
    -
    One
    -
    Two
    -
    Three
    -
    Four
    -
    + .box > * { + padding: 20px; + border: 2px solid rgb(96, 139, 168); + border-radius: 5px; + background-color: rgba(96, 139, 168, 0.2); + } + + + -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flexbox/alignment/justify-content-writing-mode.html b/flexbox/alignment/justify-content-writing-mode.html index 38f8e3ac..0641bf04 100644 --- a/flexbox/alignment/justify-content-writing-mode.html +++ b/flexbox/alignment/justify-content-writing-mode.html @@ -1,135 +1,137 @@ - + - - - - Flexbox Alignment: alignment on the main axis with justify-content, RTL - - - - - - -
    -
    -
    One
    -
    Two
    -
    Three
    -
    Four
    -
    - -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flexbox/alignment/justify-content.html b/flexbox/alignment/justify-content.html index 8b7e5a1b..d91fe21c 100644 --- a/flexbox/alignment/justify-content.html +++ b/flexbox/alignment/justify-content.html @@ -1,132 +1,135 @@ - + - - - - Flexbox Alignment: alignment on the main axis with justify-content + + + + + Flexbox Alignment: alignment on the main axis with justify-content + - - - - - -
    -
    -
    One
    -
    Two
    -
    Three
    -
    Four
    -
    + .box > * { + padding: 20px; + border: 2px solid rgb(96, 139, 168); + border-radius: 5px; + background-color: rgba(96, 139, 168, 0.2); + } + + + -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flexbox/basics/align-items.html b/flexbox/basics/align-items.html index 1ad58a77..ea069b37 100644 --- a/flexbox/basics/align-items.html +++ b/flexbox/basics/align-items.html @@ -1,138 +1,135 @@ - + - - - - Flexbox Basics: aligning items on the cross axis + + + + Flexbox Basics: aligning items on the cross axis - - - + .box > * { + border: 2px solid rgb(96, 139, 168); + border-radius: 5px; + background-color: rgba(96, 139, 168, 0.2); + } + + + - -
    -
    -
    One
    -
    Two
    -
    Three -
    has -
    extra -
    text + +
    +
    +
    One
    +
    Two
    +
    Three
    has
    extra
    text
    -
    - -
    - - -
    - + + + +
    + +
    + + + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flexbox/basics/flex-direction.html b/flexbox/basics/flex-direction.html index 08c2bf84..32f201ae 100644 --- a/flexbox/basics/flex-direction.html +++ b/flexbox/basics/flex-direction.html @@ -1,129 +1,131 @@ - + - - - - Flexbox Basics: The flex-direction property + + + + Flexbox Basics: The flex-direction property - - - + .box > * { + border: 2px solid rgb(96, 139, 168); + border-radius: 5px; + background-color: rgba(96, 139, 168, 0.2); + } - -
    -
    -
    One
    -
    Two
    -
    Three
    -
    -
    + .box { + width: 500px; + border: 2px dotted rgb(96, 139, 168); + } + + + - - -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flexbox/basics/flex-flow.html b/flexbox/basics/flex-flow.html index 7c8786f6..68d9eb4a 100644 --- a/flexbox/basics/flex-flow.html +++ b/flexbox/basics/flex-flow.html @@ -1,129 +1,131 @@ - + - - - - Flexbox Basics: flex-flow + + + + Flexbox Basics: flex-flow - - - + .box > * { + border: 2px solid rgb(96, 139, 168); + border-radius: 5px; + background-color: rgba(96, 139, 168, 0.2); + width: 200px; + } - -
    -
    -
    One
    -
    Two
    -
    Three
    -
    -
    - - -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flexbox/basics/flex-properties.html b/flexbox/basics/flex-properties.html index 807bf973..d6a4776f 100644 --- a/flexbox/basics/flex-properties.html +++ b/flexbox/basics/flex-properties.html @@ -1,138 +1,138 @@ - + - - - - Flexbox Basics: flex properties - - + section { + width: 90%; + max-width: 700px; + border: 1px solid #4d4e53; + border-radius: 2px; + padding: 10px 14px 10px 10px; + margin-bottom: 10px; + } - - + .box > * { + border: 2px solid rgb(96, 139, 168); + border-radius: 5px; + background-color: rgba(96, 139, 168, 0.2); + } - -
    -
    -
    One
    -
    Two
    -
    Three
    -
    -
    - - -
    - -
    - - + + + +
    + +
    + + diff --git a/flexbox/basics/flex-shorthands.html b/flexbox/basics/flex-shorthands.html index 6be91e88..62e1899c 100644 --- a/flexbox/basics/flex-shorthands.html +++ b/flexbox/basics/flex-shorthands.html @@ -1,138 +1,138 @@ - + - - - - Flexbox Basics: flex shorthands - - + section { + width: 90%; + max-width: 700px; + border: 1px solid #4d4e53; + border-radius: 2px; + padding: 10px 14px 10px 10px; + margin-bottom: 10px; + } - - + .box > * { + border: 2px solid rgb(96, 139, 168); + border-radius: 5px; + background-color: rgba(96, 139, 168, 0.2); + } - -
    -
    -
    One
    -
    Two
    -
    Three
    -
    -
    - - -
    - -
    - - + + + +
    + +
    + + diff --git a/flexbox/basics/flex-wrap.html b/flexbox/basics/flex-wrap.html index a301ea0a..46f9c041 100644 --- a/flexbox/basics/flex-wrap.html +++ b/flexbox/basics/flex-wrap.html @@ -1,130 +1,132 @@ - + - - - - Flexbox Basics: The flex-wrap property + + + + Flexbox Basics: The flex-wrap property - + .box > * { + border: 2px solid rgb(96, 139, 168); + border-radius: 5px; + background-color: rgba(96, 139, 168, 0.2); + width: 200px; + } - - + .box { + width: 500px; + border: 2px dotted rgb(96, 139, 168); + } + - -
    -
    -
    One
    -
    Two
    -
    Three
    -
    -
    - - -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flexbox/basics/justify-content.html b/flexbox/basics/justify-content.html index d8980553..1d09ba04 100644 --- a/flexbox/basics/justify-content.html +++ b/flexbox/basics/justify-content.html @@ -1,129 +1,130 @@ - + - - - - Flexbox Basics: justify content on the main axis + + + + Flexbox Basics: justify content on the main axis - - - + .box > * { + border: 2px solid rgb(96, 139, 168); + border-radius: 5px; + background-color: rgba(96, 139, 168, 0.2); + } + + + - -
    -
    -
    One
    -
    Two
    -
    Three
    + +
    +
    +
    One
    +
    Two
    +
    Three
    +
    +
    + + +
    +
    + + + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flexbox/basics/simple-example-anon.html b/flexbox/basics/simple-example-anon.html index 71555967..c20959cd 100644 --- a/flexbox/basics/simple-example-anon.html +++ b/flexbox/basics/simple-example-anon.html @@ -1,130 +1,131 @@ - + - - - - A simple example of Flexbox with an anonymous item + + + + A simple example of Flexbox with an anonymous item - - - - - -
    -
    -

    One

    -
    Two
    - Three is an unwrapped string -
    + .box > * { + border: 2px solid rgb(96, 139, 168); + border-radius: 5px; + background-color: rgba(96, 139, 168, 0.2); + padding: 10px; + margin: 0; + } + + + -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flexbox/basics/simple-example.html b/flexbox/basics/simple-example.html index d0c8e61b..9b4eb8b8 100644 --- a/flexbox/basics/simple-example.html +++ b/flexbox/basics/simple-example.html @@ -1,139 +1,136 @@ - + - - - - A simple example of Flexbox + + + + A simple example of Flexbox - - - + .box > * { + border: 2px solid rgb(96, 139, 168); + border-radius: 5px; + background-color: rgba(96, 139, 168, 0.2); + padding: 10px; + } + + + - -
    -
    -
    One
    -
    Two
    -
    Three -
    has -
    extra -
    text + +
    +
    +
    One
    +
    Two
    +
    Three
    has
    extra
    text
    -
    - -
    - - -
    - +
    + + +
    + +
    + + + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flexbox/basics/the-flex-container.html b/flexbox/basics/the-flex-container.html index 0a59205e..851c4441 100644 --- a/flexbox/basics/the-flex-container.html +++ b/flexbox/basics/the-flex-container.html @@ -1,136 +1,133 @@ - + - - - - Flexbox Basics: The Flex Container + + + + Flexbox Basics: The Flex Container - - - + .box > * { + border: 2px solid rgb(96, 139, 168); + border-radius: 5px; + background-color: rgba(96, 139, 168, 0.2); + } + + + - -
    -
    -
    One
    -
    Two
    -
    Three -
    has -
    extra -
    text + +
    +
    +
    One
    +
    Two
    +
    Three
    has
    extra
    text
    -
    - -
    - - -
    - + + + +
    + +
    + + + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flexbox/browsers/float.html b/flexbox/browsers/float.html index 547775f8..bb0b608f 100644 --- a/flexbox/browsers/float.html +++ b/flexbox/browsers/float.html @@ -1,100 +1,105 @@ - + - - - - Fallbacks: floated items - - - + - + } + + - -
    -
    + +
    +
    Item 1
    -
    Item 2 has more text in it and therefore will be taller than item one. In the flex version both should stretch to the same height.
    +
    + Item 2 has more text in it and therefore will be taller than item one. + In the flex version both should stretch to the same height. +
    - -
    - - + -
    - -
    - - +
    +
    + +
    + + diff --git a/flexbox/browsers/inline-block.html b/flexbox/browsers/inline-block.html index 01f3d6f6..7ba8aa85 100644 --- a/flexbox/browsers/inline-block.html +++ b/flexbox/browsers/inline-block.html @@ -1,96 +1,99 @@ - + - - - - Fallbacks: inline-block items - - - + - + } + + - -
    -
    + +
    +
    Item 1
    -
    Item 2 has more text in it and therefore will be taller than item one. In the flex version both should stretch to the same height.
    +
    + Item 2 has more text in it and therefore will be taller than item one. + In the flex version both should stretch to the same height. +
    - -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flexbox/browsers/table-cell.html b/flexbox/browsers/table-cell.html index 345bc419..48053b09 100644 --- a/flexbox/browsers/table-cell.html +++ b/flexbox/browsers/table-cell.html @@ -1,96 +1,99 @@ - + - - - - Fallbacks: table-cell items - - - + - + } + + - -
    -
    + +
    +
    Item 1
    -
    Item 2 has more text in it and therefore will be taller than item one. In the flex version both should stretch to the same height.
    +
    + Item 2 has more text in it and therefore will be taller than item one. + In the flex version both should stretch to the same height. +
    - -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flexbox/browsers/vertical-align.html b/flexbox/browsers/vertical-align.html index 706e0ad3..3fd94397 100644 --- a/flexbox/browsers/vertical-align.html +++ b/flexbox/browsers/vertical-align.html @@ -1,97 +1,100 @@ - + - - - - Fallbacks: inline-block items - - - + - + } + + - -
    -
    + +
    +
    Item 1
    -
    Item 2 has more text in it and therefore will be taller than item one. In the flex version both should stretch to the same height.
    +
    + Item 2 has more text in it and therefore will be taller than item one. + In the flex version both should stretch to the same height. +
    - -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flexbox/index.html b/flexbox/index.html index a50a5409..329c63a9 100644 --- a/flexbox/index.html +++ b/flexbox/index.html @@ -1,10 +1,10 @@ - + Flexbox Examples - +

    Flexbox Examples

    @@ -14,7 +14,9 @@

    Basic concepts of flexbox

    1. The flex container
      2. -
    2. The flex-direction property
      3. +
    3. + The flex-direction property +
    4. Multi-line flex containers
    5. The flex-flow shorthand
    6. The flex properties
      7. @@ -24,74 +26,166 @@

      Basic concepts of flexbox

    Relationship to other layout methods

    - -
      -
    1. Writing Modes
      2. -
    2. Floated layout
      3. -
    3. Simple flex layout
      4. -
    4. Simple grid layout
      5. -
    5. Demo of display: contents
      6. -
    + +
      +
    1. Writing Modes
      2. +
    2. Floated layout
      3. +
    3. Simple flex layout
      4. +
    4. Simple grid layout
      5. +
    5. + Demo of display: contents +
      6. +

    Alignment

    1. Centering a box
      2. -
    2. Alignment on the cross axis with align-items
      3. -
    3. Aligning individual items with align-self
      4. -
    4. Changing the main axis to column and aligning items
      5. -
    5. Aligning content on the cross axis
      6. -
    6. Changing the main axis to column
      7. -
    7. Main axis alignment with justify-content
      8. -
    8. Main axis alignment with flex-direction column
      9. -
    9. Main axis alignment in RTL writing mode
      10. -
    10. Main axis alignment with reversed row
      11. -
    11. Alignment with auto margins
      12. +
    12. + Alignment on the cross axis with align-items +
      13. +
    13. + Aligning individual items with align-self +
      14. +
    14. + Changing the main axis to column and aligning items +
      15. +
    15. + Aligning content on the cross axis +
      16. +
    16. + Changing the main axis to column +
      17. +
    17. + Main axis alignment with justify-content +
      18. +
    18. + Main axis alignment with flex-direction column +
      19. +
    19. + Main axis alignment in RTL writing mode +
      20. +
    20. + Main axis alignment with reversed row +
      21. +
    21. + Alignment with auto margins +

    Order

      -
    1. The flex-direction property
      2. +
    2. + The flex-direction property +
    3. The order property
      4. -
    4. Using negative values for order
      5. -
    5. A usecase for the order property
      6. +
    6. + Using negative values for order +
      7. +
    7. + A usecase for the order property +

    Ratios on the main axis

      -
    1. Concepts of min and max-content
      2. +
    2. + Concepts of min and max-content +
    3. The flex-basis property
    4. The flex-grow property
      5. -
    5. Ratios and the flex-grow property
      6. +
    6. + Ratios and the flex-grow property +
    7. The flex-shrink property
      8. -
    8. min-content sizing and the flex-shrink property
      9. -
    9. Ratios and the flex-shrink property
      10. +
    10. + min-content sizing and the flex-shrink property +
      11. +
    11. + Ratios and the flex-shrink property +

    Mastering wrapping of flex items

      -
    1. Wrapping when flex-direction is row
      2. -
    2. Wrapping when flex-direction is column
      3. -
    3. Wrapping when flex-direction is row-reverse
      4. +
    4. + Wrapping when flex-direction is row +
      5. +
    5. + Wrapping when flex-direction is column +
      6. +
    6. + Wrapping when flex-direction is row-reverse +
    7. Grid and two-dimensions
    8. A flexbox grid
    9. Gaps between flex items
      10. -
    10. Setting an item to visibility: collapse
      11. -
    11. Wrapped items with visibility: collapse
      12. +
    12. + Setting an item to visibility: collapse +
      13. +
    13. + Wrapped items with visibility: collapse +

    Common Use Cases of Flexbox

    1. Navigation
      2. -
    2. Navigation distributing space to items
      3. +
    3. + Navigation distributing space to items +
    4. Split navigation
    5. Centering an item
    6. Card layout
    7. Media object
    8. Flipped media object
      9. -
    9. Input element and button
      10. -
    10. Adding a label to the input and button
      11. +
    11. + Input element and button +
      12. +
    12. + Adding a label to the input and button +
    - \ No newline at end of file + diff --git a/flexbox/order/flex-direction.html b/flexbox/order/flex-direction.html index cd56943b..0d1227b8 100644 --- a/flexbox/order/flex-direction.html +++ b/flexbox/order/flex-direction.html @@ -1,137 +1,137 @@ - + - - - - Order: The flex-direction property - - - - - - -
    -
    - - - -
    -
    - - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flexbox/order/negative-order.html b/flexbox/order/negative-order.html index 678aab9e..990d1f55 100644 --- a/flexbox/order/negative-order.html +++ b/flexbox/order/negative-order.html @@ -1,152 +1,155 @@ - + - - - - Order: Using negative values for order - - - + - - - -
    -
    - - -
    3
    - - + } + + + + +
    +
    + + +
    3
    + + +
    +
    + + + +
    +
    -
    - - - -
    - -
    - - + + diff --git a/flexbox/order/order.html b/flexbox/order/order.html index 01c5f9f8..f47d070c 100644 --- a/flexbox/order/order.html +++ b/flexbox/order/order.html @@ -1,151 +1,161 @@ - + - - - - Order: The order property - - - - - - -
    -
    - - - - - + } + + .box { + width: 500px; + border: 2px dotted rgb(96, 139, 168); + } + + + + + +
    +
    + + + + + +
    +
    + + + +
    +
    -
    - - - -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flexbox/order/usecase-order.html b/flexbox/order/usecase-order.html index 558fd848..09b81a37 100644 --- a/flexbox/order/usecase-order.html +++ b/flexbox/order/usecase-order.html @@ -1,159 +1,158 @@ - + - - - - Order: a usecase for the order property - - - - - - - -
    -
    -
    + } + + .card { + border: 2px solid rgb(96, 139, 168); + border-radius: 5px; + background-color: rgba(96, 139, 168, 0.2); + padding: 10px; + } + + + + + +
    +
    +

    News item title

    1 Nov 2017

    This is the content of my news item. Very newsworthy.

    -
    -
    -

    Another title

    -
    6 Nov 2017
    -

    This is the content of my news item. Very newsworthy.

    -
    -
    -
    - - - -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flexbox/ratios/flex-basis.html b/flexbox/ratios/flex-basis.html index 41449edb..b640ead3 100644 --- a/flexbox/ratios/flex-basis.html +++ b/flexbox/ratios/flex-basis.html @@ -1,100 +1,78 @@ - + - - - - Flexbox Ratios on the main axis: flex-basis - - + .playable-buttons { + text-align: right; + width: 90%; + max-width: 700px; + padding: 5px 10px 5px 26px; + font-size: 100%; + } - - - - - -
    -
    -
    One
    -
    Two
    -
    Three
    -
    -
    - - -
    - -
    - - +
    + + +
    + +
    + + diff --git a/flexbox/ratios/flex-grow-ratios.html b/flexbox/ratios/flex-grow-ratios.html index 85185ea8..2a9806b2 100644 --- a/flexbox/ratios/flex-grow-ratios.html +++ b/flexbox/ratios/flex-grow-ratios.html @@ -1,152 +1,154 @@ - + - - - - Flexbox Ratios on the main axis: flex-grow ratios - - + .playable-buttons { + text-align: right; + width: 90%; + max-width: 700px; + padding: 5px 10px 5px 26px; + font-size: 100%; + } - - - - -
    -
    -
    One
    -
    Two
    -
    Three
    -
    -
    - - -
    - -
    - - +
    + + +
    + +
    + + diff --git a/flexbox/ratios/flex-grow.html b/flexbox/ratios/flex-grow.html index 17d6ab89..ed49c954 100644 --- a/flexbox/ratios/flex-grow.html +++ b/flexbox/ratios/flex-grow.html @@ -1,96 +1,78 @@ - + - - - - Flexbox Ratios on the main axis: flex-grow - - + section { + width: 90%; + max-width: 700px; + border: 1px solid #4d4e53; + border-radius: 2px; + padding: 10px 14px 10px 10px; + margin-bottom: 10px; + } - - - - - -
    -
    -
    One
    -
    Two
    -
    Three has more content
    -
    -
    - - -
    - -
    - - +
    + + +
    + +
    + + diff --git a/flexbox/ratios/flex-shrink-min-content.html b/flexbox/ratios/flex-shrink-min-content.html index 6a9a5756..3bcf056d 100644 --- a/flexbox/ratios/flex-shrink-min-content.html +++ b/flexbox/ratios/flex-shrink-min-content.html @@ -1,96 +1,77 @@ - + - - - - Flexbox Ratios on the main axis: flex-shrink - - + section { + width: 90%; + max-width: 700px; + border: 1px solid #4d4e53; + border-radius: 2px; + padding: 10px 14px 10px 10px; + margin-bottom: 10px; + } - - - - - -
    -
    -
    Item One
    -
    Item Two
    -
    Item Three has more content and so has a larger size
    -
    -
    - - -
    - -
    - - +
    + + +
    + +
    + + diff --git a/flexbox/ratios/flex-shrink-ratios.html b/flexbox/ratios/flex-shrink-ratios.html index 22ee4f24..f66ec25c 100644 --- a/flexbox/ratios/flex-shrink-ratios.html +++ b/flexbox/ratios/flex-shrink-ratios.html @@ -1,108 +1,78 @@ - + - - - - Flexbox Ratios on the main axis: flex-shrink ratios - - + textarea { + font-family: monospace; + display: block; + margin-bottom: 10px; + background-color: #f4f7f8; + border: none; + border-left: 6px solid #558abb; + color: #4d4e53; + width: 90%; + max-width: 700px; + padding: 10px 10px 0px; + font-size: 90%; + } - - + .box { + display: flex; + width: 500px; + border: 2px dotted rgb(96, 139, 168); + } + - -
    -
    -
    One
    -
    Two
    -
    Three
    -
    -
    - - -
    - -
    - - +
    + + +
    + +
    + + diff --git a/flexbox/ratios/flex-shrink.html b/flexbox/ratios/flex-shrink.html index 1a4f8eb1..17d4d03b 100644 --- a/flexbox/ratios/flex-shrink.html +++ b/flexbox/ratios/flex-shrink.html @@ -1,97 +1,78 @@ - + - - - - Flexbox Ratios on the main axis: flex-shrink - - + section { + width: 90%; + max-width: 700px; + border: 1px solid #4d4e53; + border-radius: 2px; + padding: 10px 14px 10px 10px; + margin-bottom: 10px; + } - - - - - -
    -
    -
    One
    -
    Two
    -
    Three has more content
    -
    -
    - - -
    - -
    - - + + + +
    + +
    + + diff --git a/flexbox/ratios/min-max-content.html b/flexbox/ratios/min-max-content.html index 31f7de0d..758f1dcf 100644 --- a/flexbox/ratios/min-max-content.html +++ b/flexbox/ratios/min-max-content.html @@ -1,67 +1,66 @@ - + - - - - Flexbox Ratios on the main axis: min-content and max-content - - + section input { + display: block; + margin: 5px; + } + - + + + +
    +

    + I am sized with min-content and so I will take all of the soft-wrapping + opportunities. +

    +

    + I am sized with max-content and so I will take none of the soft-wrapping + opportunities. +

    +
    + + +
    + +
    + + - + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flexbox/relationship/display-contents.html b/flexbox/relationship/display-contents.html index da2f705a..cfb2d94f 100644 --- a/flexbox/relationship/display-contents.html +++ b/flexbox/relationship/display-contents.html @@ -1,152 +1,150 @@ - + - - - - Flexbox and other specs: display: contents + + + + Flexbox and other specs: display: contents - - + - - - -
    -
    -
    One
    -
    Two
    -
    + } + + + + +
    +
    +
    One
    +
    Two
    +
    Sub-item 1
    Sub-item 2
    -
    -
    -
    - - - -
    - +
    +
    + + + +
    + +
    + + diff --git a/flexbox/relationship/flex-layout.html b/flexbox/relationship/flex-layout.html index 9bcb2063..884c7cf1 100644 --- a/flexbox/relationship/flex-layout.html +++ b/flexbox/relationship/flex-layout.html @@ -1,154 +1,152 @@ - + - - - - Flexbox and other specs: a simple flex layout + + + + Flexbox and other specs: a simple flex layout - - + - - - -
    -
    -
    One
    -
    Two
    -
    Three
    -
    Four
    -
    Five
    -
    Six
    -
    Seven
    + } + + + + +
    +
    +
    One
    +
    Two
    +
    Three
    +
    Four
    +
    Five
    +
    Six
    +
    Seven
    +
    +
    + + + +
    +
    -
    - - - -
    - -
    - - + + diff --git a/flexbox/relationship/floats.html b/flexbox/relationship/floats.html index 40620bbb..b00a5ac1 100644 --- a/flexbox/relationship/floats.html +++ b/flexbox/relationship/floats.html @@ -1,143 +1,143 @@ - + - - - - Flexbox and other specs: overwriting a float - - - + + + + +
    +
    +
    One
    +
    Two
    +
    Three
    +
    +
    + + + +
    + +
    + + + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flexbox/relationship/grid-layout.html b/flexbox/relationship/grid-layout.html index 8f240042..dba7808a 100644 --- a/flexbox/relationship/grid-layout.html +++ b/flexbox/relationship/grid-layout.html @@ -1,146 +1,144 @@ - + - - - - Flexbox and other specs: a simple grid layout + + + + Flexbox and other specs: a simple grid layout - - - - - -
    -
    -
    One
    -
    Two
    -
    Three
    -
    Four
    -
    Five
    -
    Six
    -
    Seven
    + } + + body { + font: + 1.2em Helvetica, + Arial, + sans-serif; + margin: 20px; + padding: 0; + } + + textarea { + font-family: monospace; + display: block; + margin-bottom: 10px; + background-color: #f4f7f8; + border: none; + border-left: 6px solid #558abb; + color: #4d4e53; + width: 90%; + max-width: 700px; + padding: 10px 10px 0px; + font-size: 90%; + } + + textarea:nth-of-type(1) { + height: 100px; + } + + textarea:nth-of-type(2) { + height: 160px; + } + + .playable-buttons { + text-align: right; + width: 90%; + max-width: 700px; + padding: 5px 10px 5px 26px; + font-size: 100%; + } + + section { + width: 90%; + max-width: 700px; + border: 1px solid #4d4e53; + border-radius: 2px; + padding: 10px 14px 10px 10px; + margin-bottom: 10px; + } + + section input { + display: block; + margin: 5px; + } + + .box > * { + border: 2px solid rgb(96, 139, 168); + border-radius: 5px; + background-color: rgba(96, 139, 168, 0.2); + padding: 20px; + } + + .box { + padding: 20px; + border: 2px dotted rgb(96, 139, 168); + } + + + + + +
    +
    +
    One
    +
    Two
    +
    Three
    +
    Four
    +
    Five
    +
    Six
    +
    Seven
    +
    +
    + + + +
    +
    -
    - - - -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flexbox/relationship/writing-modes.html b/flexbox/relationship/writing-modes.html index fb99cacc..fbc7fe7a 100644 --- a/flexbox/relationship/writing-modes.html +++ b/flexbox/relationship/writing-modes.html @@ -1,131 +1,131 @@ - + - - - - Flexbox and other specs: writing modes - - - - - - -
    -
    -
    One
    -
    Two
    -
    Three
    + + + + Flexbox and other specs: writing modes + + + + + + +
    +
    +
    One
    +
    Two
    +
    Three
    +
    +
    + + + +
    +
    -
    - - - -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flexbox/use-cases/cards.html b/flexbox/use-cases/cards.html index 31595cad..4e4de262 100644 --- a/flexbox/use-cases/cards.html +++ b/flexbox/use-cases/cards.html @@ -1,113 +1,119 @@ - + - - - - Use cases: laying out a card - - - + - + } + + - -
    -
    + +
    +
    -
    -

    This card doesn't have much content.

    -
    -
    Card footer
    +
    +

    This card doesn't have much content.

    +
    +
    Card footer
    -
    -

    This card has a lot more content which means that it defines the height of the container the cards are in. I've laid the cards out using grid layout, so the cards themselves will stretch to the same height.

    -
    -
    Card footer
    +
    +

    + This card has a lot more content which means that it defines the + height of the container the cards are in. I've laid the cards out + using grid layout, so the cards themselves will stretch to the + same height. +

    +
    +
    Card footer
    -
    - -
    - - + -
    - -
    - - +
    +
    + +
    + + diff --git a/flexbox/use-cases/center.html b/flexbox/use-cases/center.html index b9a46a9a..2e1a99ba 100644 --- a/flexbox/use-cases/center.html +++ b/flexbox/use-cases/center.html @@ -1,90 +1,92 @@ - + - - - - Use cases: centering a box - - - - - - -
    -
    -
    -
    - -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flexbox/use-cases/input-button.html b/flexbox/use-cases/input-button.html index b48513c6..21019198 100644 --- a/flexbox/use-cases/input-button.html +++ b/flexbox/use-cases/input-button.html @@ -1,147 +1,150 @@ - + - - - - Use cases: input element and button - - - - - - -
    -
    -
    -
    -
    - - + -
    - -
    - - + +
    + +
    + + diff --git a/flexbox/use-cases/label-input-button.html b/flexbox/use-cases/label-input-button.html index cee95821..73cb8166 100644 --- a/flexbox/use-cases/label-input-button.html +++ b/flexbox/use-cases/label-input-button.html @@ -1,110 +1,116 @@ - + - - - - Use cases: label, input element and button - - - - - - -
    -
    -
    -
    -
    - - + -
    - -
    - - + +
    + +
    + + diff --git a/flexbox/use-cases/media-flipped.html b/flexbox/use-cases/media-flipped.html index 7f3d3a31..06bb0efa 100644 --- a/flexbox/use-cases/media-flipped.html +++ b/flexbox/use-cases/media-flipped.html @@ -1,4 +1,4 @@ - + @@ -7,7 +7,10 @@ - + - + + - -
    -
    - - - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flexbox/use-cases/navigation.html b/flexbox/use-cases/navigation.html index 81ebd324..2f18ae10 100644 --- a/flexbox/use-cases/navigation.html +++ b/flexbox/use-cases/navigation.html @@ -1,110 +1,110 @@ - + - - - - Use cases: Navigation - - - + - + + - -
    -
    - - - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flexbox/use-cases/split-navigation.html b/flexbox/use-cases/split-navigation.html index 55a9c90c..d18985b3 100644 --- a/flexbox/use-cases/split-navigation.html +++ b/flexbox/use-cases/split-navigation.html @@ -1,107 +1,107 @@ - + - - - - Use cases: Split Navigation - - - - - - -
    -
    + + +
    + +
    + + + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flexbox/wrapping/grid-example.html b/flexbox/wrapping/grid-example.html index 6e40b69d..d2887560 100644 --- a/flexbox/wrapping/grid-example.html +++ b/flexbox/wrapping/grid-example.html @@ -1,105 +1,86 @@ - + - - - - Flexbox wrapping: Grid and two dimensions - - - - - - - -
    -
    -
    One
    -
    Two
    -
    Three
    -
    Four
    -
    Five
    -
    Six
    -
    Seven
    -
    Eight
    -
    Nine
    -
    Ten
    -
    -
    - - -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flexbox/wrapping/row-reverse-wrap.html b/flexbox/wrapping/row-reverse-wrap.html index 4e25aee2..106deb64 100644 --- a/flexbox/wrapping/row-reverse-wrap.html +++ b/flexbox/wrapping/row-reverse-wrap.html @@ -1,111 +1,90 @@ - + - - - - Flexbox wrapping: Wrapping when flex-direction is row-reverse + + + + Flexbox wrapping: Wrapping when flex-direction is row-reverse - + .box > * { + border: 2px solid rgb(96, 139, 168); + border-radius: 5px; + background-color: rgba(96, 139, 168, 0.2); + } - - + .box { + width: 500px; + border: 2px dotted rgb(96, 139, 168); + } + - -
    -
    -
    One
    -
    Two
    -
    Three
    -
    Four
    -
    Five
    -
    Six
    -
    Seven
    -
    Eight
    -
    Nine
    -
    Ten
    -
    -
    - - -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flexbox/wrapping/row-wrap.html b/flexbox/wrapping/row-wrap.html index 647657af..3d7912ea 100644 --- a/flexbox/wrapping/row-wrap.html +++ b/flexbox/wrapping/row-wrap.html @@ -1,109 +1,89 @@ - + - - - - Flexbox wrapping: Wrapping when flex-direction is row + + + + Flexbox wrapping: Wrapping when flex-direction is row - + .box > * { + border: 2px solid rgb(96, 139, 168); + border-radius: 5px; + background-color: rgba(96, 139, 168, 0.2); + } - - + .box { + width: 500px; + border: 2px dotted rgb(96, 139, 168); + } + - -
    -
    -
    One
    -
    Two
    -
    Three
    -
    Four
    -
    Five
    -
    Six
    -
    Seven
    -
    Eight
    -
    Nine
    -
    Ten
    -
    -
    - - -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flexbox/wrapping/visibility-collapse.html b/flexbox/wrapping/visibility-collapse.html index 8ce3ee68..3922494f 100644 --- a/flexbox/wrapping/visibility-collapse.html +++ b/flexbox/wrapping/visibility-collapse.html @@ -1,149 +1,146 @@ - + - - - - Flexbox Wrapping: Setting an item to visibility: collapse + + + + Flexbox Wrapping: Setting an item to visibility: collapse - - - + .box > * { + border: 2px solid rgb(96, 139, 168); + border-radius: 5px; + background-color: rgba(96, 139, 168, 0.2); + padding: 10px; + } + + + - -
    -
    -
    One
    -
    Two
    -
    Three -
    has -
    extra -
    text + +
    +
    +
    One
    +
    Two
    +
    Three
    has
    extra
    text
    -
    - -
    - - -
    - + + + +
    + +
    + + + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flexbox/wrapping/wrapped-visibility-collapse.html b/flexbox/wrapping/wrapped-visibility-collapse.html index f9352402..02ce04af 100644 --- a/flexbox/wrapping/wrapped-visibility-collapse.html +++ b/flexbox/wrapping/wrapped-visibility-collapse.html @@ -1,165 +1,162 @@ - + - - - - Flexbox Wrapping: Wrapped items with visibility: collapse + + + + Flexbox Wrapping: Wrapped items with visibility: collapse - - - + .box > * { + border: 2px solid rgb(96, 139, 168); + border-radius: 5px; + background-color: rgba(96, 139, 168, 0.2); + padding: 10px; + } + + + - -
    -
    -
    One
    -
    Add more text to this box to make it grow
    -
    Three -
    has -
    extra -
    text + +
    +
    +
    One
    +
    Add more text to this box to make it grow
    +
    Three
    has
    extra
    text
    +
    Four
    +
    Five
    +
    Six
    +
    Seven
    +
    Eight
    +
    Nine
    +
    Ten
    -
    Four
    -
    Five
    -
    Six
    -
    Seven
    -
    Eight
    -
    Nine
    -
    Ten
    -
    - -
    - - -
    - + + + +
    + +
    + + + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flow/block-inline/change-formatting.html b/flow/block-inline/change-formatting.html index 36719b40..f79cb94a 100644 --- a/flow/block-inline/change-formatting.html +++ b/flow/block-inline/change-formatting.html @@ -1,114 +1,115 @@ - + - - - - CSS Normal Flow: Inline - - + + + + CSS Normal Flow: Inline + + - - - - -
    - -

    Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”

    - - -
    - - - -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flow/block-inline/flex.html b/flow/block-inline/flex.html index 4bc24ae3..e17d1953 100644 --- a/flow/block-inline/flex.html +++ b/flow/block-inline/flex.html @@ -1,133 +1,133 @@ - + - - - - CSS Normal Flow: inner and outer display types + + + + CSS Normal Flow: inner and outer display types - - + - + } + + - -
    -
    -
    FLex Item
    -
    Flex Item
    -
    + +
    +
    +
    FLex Item
    +
    Flex Item
    +
    Children
    are in
    normal flow
    +
    -
    - -
    - - + -
    - +
    Flex Item
    +
    Flex Item
    +
    +
    Children
    +
    are in
    +
    normal flow
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flow/block-inline/inline.html b/flow/block-inline/inline.html index 9c52523d..ee12ea22 100644 --- a/flow/block-inline/inline.html +++ b/flow/block-inline/inline.html @@ -1,105 +1,106 @@ - + - - - - CSS Normal Flow: Inline - - + + + +
    +

    + Before that night—a memorable night, as it was to + prove—hundreds of millions of people had watched the rising + smoke-wreaths of their fires without drawing any special inspiration + from the fact.” +

    +
    + + +
    + +
    + + + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flow/block-inline/line-box.html b/flow/block-inline/line-box.html index 46b5b408..ae5f83ae 100644 --- a/flow/block-inline/line-box.html +++ b/flow/block-inline/line-box.html @@ -1,115 +1,116 @@ - + - - - - CSS Normal Flow: Inline - - + + + + CSS Normal Flow: Inline + + - - - - -
    - -

    Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”

    - - -
    - - - -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flow/block-inline/normal-flow-collapsing.html b/flow/block-inline/normal-flow-collapsing.html index 56b19e64..6fd2ae0c 100644 --- a/flow/block-inline/normal-flow-collapsing.html +++ b/flow/block-inline/normal-flow-collapsing.html @@ -1,117 +1,128 @@ - + - - - - CSS Normal Flow: Margin Collapsing + + + + CSS Normal Flow: Margin Collapsing - - + - - - -
    -
    -

    One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.

    -

    Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”

    -
    + } + + -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flow/block-inline/normal-flow-margin-zero.html b/flow/block-inline/normal-flow-margin-zero.html index fc03eecf..17b025cc 100644 --- a/flow/block-inline/normal-flow-margin-zero.html +++ b/flow/block-inline/normal-flow-margin-zero.html @@ -1,118 +1,128 @@ - + - - - - CSS Normal Flow + + + + CSS Normal Flow - - + - - - -
    -
    -

    One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.

    -

    Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”

    -
    + } + + -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flow/block-inline/normal-flow-width.html b/flow/block-inline/normal-flow-width.html index a6f8461a..45526161 100644 --- a/flow/block-inline/normal-flow-width.html +++ b/flow/block-inline/normal-flow-width.html @@ -1,117 +1,128 @@ - + - - - - CSS Normal Flow + + + + CSS Normal Flow - - + - - - -
    -
    -

    One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.

    -

    Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”

    -
    + } + + -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flow/block-inline/normal-flow.html b/flow/block-inline/normal-flow.html index 88d8227c..db6452d0 100644 --- a/flow/block-inline/normal-flow.html +++ b/flow/block-inline/normal-flow.html @@ -1,115 +1,126 @@ - + - - - - CSS Normal Flow + + + + CSS Normal Flow - - + - - - -
    -
    -

    One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.

    -

    Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”

    -
    + } + + -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flow/formatting-contexts/bfc-flow-root.html b/flow/formatting-contexts/bfc-flow-root.html index 2ecb382d..9f071012 100644 --- a/flow/formatting-contexts/bfc-flow-root.html +++ b/flow/formatting-contexts/bfc-flow-root.html @@ -1,137 +1,138 @@ - + - - - - CSS Formatting Contexts: create a BFC with display: flow-root - - - + - - - -
    -
    -
    I am a floated box!
    -

    I am content inside the container.

    -
    - -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flow/formatting-contexts/bfc-overflow.html b/flow/formatting-contexts/bfc-overflow.html index dd310c66..6e986f9e 100644 --- a/flow/formatting-contexts/bfc-overflow.html +++ b/flow/formatting-contexts/bfc-overflow.html @@ -1,137 +1,138 @@ - + - - - - CSS Formatting Contexts: create a BFC with overflow - - - + - - - -
    -
    -
    I am a floated box!
    -

    I am content inside the container.

    -
    - -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flow/formatting-contexts/float.html b/flow/formatting-contexts/float.html index 7e373cae..911ef824 100644 --- a/flow/formatting-contexts/float.html +++ b/flow/formatting-contexts/float.html @@ -1,135 +1,136 @@ - + - - - - CSS Formatting Contexts - - - + - - - -
    -
    -
    I am a floated box!
    -

    I am content inside the container.

    -
    - -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flow/formatting-contexts/inline.html b/flow/formatting-contexts/inline.html index e39c0c77..def6fbe7 100644 --- a/flow/formatting-contexts/inline.html +++ b/flow/formatting-contexts/inline.html @@ -1,121 +1,121 @@ - + - - - - CSS Normal Flow: Inline - - + + + + CSS Normal Flow: Inline + + - - - - - - -
    - -

    Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”

    - - -
    - - - -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flow/in-flow/abspos.html b/flow/in-flow/abspos.html index b430bc91..f86a1bf9 100644 --- a/flow/in-flow/abspos.html +++ b/flow/in-flow/abspos.html @@ -1,139 +1,152 @@ - + - - - - CSS Flow: Items with position absolute - - - + - - - -
    -
    -

    One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney.

    -

    Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.

    -

    Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”

    -
    - -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flow/in-flow/float.html b/flow/in-flow/float.html index 6ce82b5d..7473d83d 100644 --- a/flow/in-flow/float.html +++ b/flow/in-flow/float.html @@ -1,133 +1,144 @@ - + - - - - CSS Flow: float + + + + CSS Flow: float - - + - - - -
    -
    -
    I am a floated box!
    -

    One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.

    -

    Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”

    -
    + } + + -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flow/in-flow/in-flow.html b/flow/in-flow/in-flow.html index b2b97dd7..83df1c98 100644 --- a/flow/in-flow/in-flow.html +++ b/flow/in-flow/in-flow.html @@ -1,133 +1,144 @@ - + - - - - CSS Flow: in-flow elements + + + + CSS Flow: in-flow elements - - - + section input { + display: block; + margin: 5px; + } + ul { + display: flex; + justify-content: space-around; + list-style: none; + margin: 0; + } + + + - -
    -
    -

    A heading

    -

    One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney.

    + +
    +
    +

    A heading

    +

    + One November night in the year 1782, so the story runs, two brothers + sat over their winter fire in the little French town of Annonay, + watching the grey smoke-wreaths from the hearth curl up the wide + chimney. +

    -
      -
    • One
      • -
    • Two
      • -
    • Three
      • -
    -

    Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.

    -
    -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flow/in-flow/relative.html b/flow/in-flow/relative.html index e12a5da2..4728f288 100644 --- a/flow/in-flow/relative.html +++ b/flow/in-flow/relative.html @@ -1,139 +1,152 @@ - + - - - - CSS Flow: Items with position relative - - - + - - - -
    -
    -

    One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney.

    -

    Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.

    -

    Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”

    -
    - -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flow/overflow/auto.html b/flow/overflow/auto.html index 63b0397d..1e0cb426 100644 --- a/flow/overflow/auto.html +++ b/flow/overflow/auto.html @@ -1,127 +1,139 @@ - + - - - - CSS Overflow auto + + + + CSS Overflow auto - - + - - - -
    -
    -

    One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney.

    - -
    -

    Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.

    -

    Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”

    + } + + -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flow/overflow/hidden.html b/flow/overflow/hidden.html index a1c26914..bd1536e5 100644 --- a/flow/overflow/hidden.html +++ b/flow/overflow/hidden.html @@ -1,127 +1,139 @@ - + - - - - CSS Overflow hidden + + + + CSS Overflow hidden - - + - - - -
    -
    -

    One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney.

    - -
    -

    Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.

    -

    Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”

    + } + + -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flow/overflow/overflow-y.html b/flow/overflow/overflow-y.html index abec161b..bb0bec52 100644 --- a/flow/overflow/overflow-y.html +++ b/flow/overflow/overflow-y.html @@ -1,127 +1,139 @@ - + - - - - CSS Overflow clip + + + + CSS Overflow clip - - + - - - -
    -
    -

    One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney.

    - -
    -

    Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.

    -

    Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”

    + } + + -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flow/overflow/overflow.html b/flow/overflow/overflow.html index b18b217e..183e8547 100644 --- a/flow/overflow/overflow.html +++ b/flow/overflow/overflow.html @@ -1,125 +1,137 @@ - + - - - - CSS Overflow + + + + CSS Overflow - - + - - - -
    -
    -

    One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney.

    - -
    -

    Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.

    -

    Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”

    + } + + -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flow/overflow/scroll.html b/flow/overflow/scroll.html index 53848471..c0f8c35b 100644 --- a/flow/overflow/scroll.html +++ b/flow/overflow/scroll.html @@ -1,127 +1,139 @@ - + - - - - CSS Overflow scroll + + + + CSS Overflow scroll - - + - - - -
    -
    -

    One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney.

    - -
    -

    Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.

    -

    Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”

    + } + + -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flow/overflow/text-overflow.html b/flow/overflow/text-overflow.html index 217d0157..958bafd8 100644 --- a/flow/overflow/text-overflow.html +++ b/flow/overflow/text-overflow.html @@ -1,136 +1,147 @@ - + - - - - CSS Overflow clip - - - + - - - -
    -
    -

    One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney.

    - -
    -

    Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.

    -

    Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”

    -
    - -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flow/writing-modes/block-change-mode.html b/flow/writing-modes/block-change-mode.html index b0abfa91..112d9c07 100644 --- a/flow/writing-modes/block-change-mode.html +++ b/flow/writing-modes/block-change-mode.html @@ -1,149 +1,158 @@ - + - - - - Changing the writing mode of an block box - - - + - - - -
    -
    -

    One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney.

    - -
    -
    This box should establish a new BFC. -
    - -

    Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.

    - -
    + } + + -
    - - + -
    - +
    +
    This box should establish a new BFC.
    - - +

    Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.

    + +
    +
    + +
    + + diff --git a/flow/writing-modes/creative-use.html b/flow/writing-modes/creative-use.html index 11e0206c..28711b45 100644 --- a/flow/writing-modes/creative-use.html +++ b/flow/writing-modes/creative-use.html @@ -1,119 +1,125 @@ - + - - - - Flow and Writing Modes + + + + Flow and Writing Modes - - + - - - -
    -
    -

    A heading

    -

    One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.

    - -
    + } + + -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flow/writing-modes/horizontal-tb.html b/flow/writing-modes/horizontal-tb.html index 34149023..25122442 100644 --- a/flow/writing-modes/horizontal-tb.html +++ b/flow/writing-modes/horizontal-tb.html @@ -1,115 +1,126 @@ - + - - - - horizontal-tb + + + + horizontal-tb - - + - - - -
    -
    -

    One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.

    -

    Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”

    -
    + } + + -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flow/writing-modes/inline-change-mode.html b/flow/writing-modes/inline-change-mode.html index 7ab2e90a..04e61ed4 100644 --- a/flow/writing-modes/inline-change-mode.html +++ b/flow/writing-modes/inline-change-mode.html @@ -1,125 +1,132 @@ - + - - - - Changing the writing mode of an inline box + + + + Changing the writing mode of an inline box - - + - - - -
    -
    -

    One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.

    - -
    + } + + -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flow/writing-modes/inline-size.html b/flow/writing-modes/inline-size.html index 49d55863..56d75a7e 100644 --- a/flow/writing-modes/inline-size.html +++ b/flow/writing-modes/inline-size.html @@ -1,140 +1,135 @@ - + - - - - Setting the inline-size on boxes + + + + Setting the inline-size on boxes - - + - + } + + - -
    -
    - Box 1 -
    -
    - Box 2 -
    - -
    - - + -
    - +
    + Box 1
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flow/writing-modes/replaced.html b/flow/writing-modes/replaced.html index 887a55b8..f3df1026 100644 --- a/flow/writing-modes/replaced.html +++ b/flow/writing-modes/replaced.html @@ -1,124 +1,131 @@ - + - - - - Changing the writing mode of an block box - - - + - - - -
    -
    -

    One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney.

    - - placeholder - -

    Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.

    - -
    + } + + -
    - - + -
    - -
    - - +

    One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney.

    + + placeholder + +

    Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.

    + +
    +
    + +
    + + diff --git a/flow/writing-modes/vertical-lr.html b/flow/writing-modes/vertical-lr.html index 2ffe75f5..7f70a8bf 100644 --- a/flow/writing-modes/vertical-lr.html +++ b/flow/writing-modes/vertical-lr.html @@ -1,115 +1,126 @@ - + - - - - vertical-lr + + + + vertical-lr - - + - - - -
    -
    -

    One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.

    -

    Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”

    -
    + } + + -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flow/writing-modes/vertical-rl.html b/flow/writing-modes/vertical-rl.html index 520b8fb9..0a0bbc70 100644 --- a/flow/writing-modes/vertical-rl.html +++ b/flow/writing-modes/vertical-rl.html @@ -1,115 +1,126 @@ - + - - - - vertical-rl + + + + vertical-rl - - + - - - -
    -
    -

    One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.

    -

    Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”

    -
    + } + + -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flow/writing-modes/width.html b/flow/writing-modes/width.html index f268648e..1f58cf5e 100644 --- a/flow/writing-modes/width.html +++ b/flow/writing-modes/width.html @@ -1,140 +1,135 @@ - + - - - - Setting the width on boxes + + + + Setting the width on boxes - - + - + } + + - -
    -
    - Box 1 -
    -
    - Box 2 -
    - -
    - - + -
    - +
    + Box 1
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/font-features/font-kerning.html b/font-features/font-kerning.html index bcfd1520..478f0b89 100644 --- a/font-features/font-kerning.html +++ b/font-features/font-kerning.html @@ -1,234 +1,249 @@ - + - - - - Font feature example - kerning - - - - - - - -
    -
    -
    -
    + .container * { + font-size: 4rem; + margin: 1.5rem 0; + } + + + + + + +
    +
    +
    +

    Puffy Pangolins

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

    Puffy Pangolins

    -
    -
    - - - +
    +
    + + + + +
    -
    -
    - -
    - - +
    + +
    + + diff --git a/font-features/font-variant-alternates.html b/font-features/font-variant-alternates.html index 2911a6cb..0845d52b 100644 --- a/font-features/font-variant-alternates.html +++ b/font-features/font-variant-alternates.html @@ -1,268 +1,293 @@ - + - - - - Font feature example - alternates + + + + Font feature example - alternates - - - - + .container * { + font-size: 4rem; + margin: 1.5rem 0; + } + + + + - -
    -
    -
    -
    + +
    +
    +
    +

    My Perfidious pangram

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

    My Perfidious pangram

    -
    -
    - - - +
    +
    + + + + +
    -
    -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML1.value = htmlCode1; + textareaCSS1.value = cssCode1; + textareaHTML2.value = htmlCode2; + textareaCSS2.value = cssCode2; + demo1_active.checked = true; + demo1_active.parentNode.classList.remove("inactive"); + demo2_active.checked = true; + demo2_active.parentNode.classList.remove("inactive"); + fillCode(); + }); + textareaHTML1.addEventListener("input", fillCode); + textareaCSS1.addEventListener("input", fillCode); + textareaHTML2.addEventListener("input", fillCode); + textareaCSS2.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/font-features/font-variant-caps.html b/font-features/font-variant-caps.html index 0156cc92..42c664d9 100644 --- a/font-features/font-variant-caps.html +++ b/font-features/font-variant-caps.html @@ -1,246 +1,272 @@ - + - - - - Font feature example - caps - - + + + - - - - - - -
    -
    -
    -
    -

    Small Caps and All Small Caps

    -
    -
    - - - + +
    +
    +
    +
    +

    + Small Caps and + All Small Caps +

    +
    +
    + + + + +
    +
    +
    +
    +

    + Small Caps and + All Small Caps +

    +
    +
    + + + + +
    -
    -
    -
    -

    Small Caps and All Small Caps

    -
    -
    - - - +
    +
    -
    -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML1.value = htmlCode1; + textareaCSS1.value = cssCode1; + textareaHTML2.value = htmlCode2; + textareaCSS2.value = cssCode2; + demo1_active.checked = true; + demo1_active.parentNode.classList.remove("inactive"); + demo2_active.checked = true; + demo2_active.parentNode.classList.remove("inactive"); + fillCode(); + }); + + textareaHTML1.addEventListener("input", fillCode); + textareaCSS1.addEventListener("input", fillCode); + textareaHTML2.addEventListener("input", fillCode); + textareaCSS2.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/font-features/font-variant-east-asian.html b/font-features/font-variant-east-asian.html index 9061afb1..5e909bb6 100644 --- a/font-features/font-variant-east-asian.html +++ b/font-features/font-variant-east-asian.html @@ -1,229 +1,241 @@ - + - - - - Font feature example - East Asian - - - - - - - -
    -
    -
    -
    + .section input { + display: block; + margin: 5px; + } + + .container * { + font-size: 4rem; + margin: 1.5rem 0; + } + + + + + + +
    +
    +
    +

    唖 芦 溢 茨 鰯 嘘 欝 厩 噂

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

    唖 芦 溢 茨 鰯 嘘 欝 厩 噂

    -
    -
    - - - +
    +
    + + + + +
    -
    -
    - -
    - - +
    + +
    + + diff --git a/font-features/font-variant-ligatures.html b/font-features/font-variant-ligatures.html index b6649c95..7f8e5a20 100644 --- a/font-features/font-variant-ligatures.html +++ b/font-features/font-variant-ligatures.html @@ -1,232 +1,252 @@ - + - - - - Font feature example - ligatures - - - - - - - -
    -
    -
    -
    + .container * { + font-size: 4rem; + margin: 1.5rem 0; + } + + + + + + +
    +
    +
    +

    Puffy Perfect -^ <->

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

    Puffy Perfect -^ <->

    -
    -
    - - - +
    +
    + + + + +
    -
    -
    - -
    - - +
    + +
    + + diff --git a/font-features/font-variant-numeric-example.html b/font-features/font-variant-numeric-example.html index ec109907..65bcc9f2 100644 --- a/font-features/font-variant-numeric-example.html +++ b/font-features/font-variant-numeric-example.html @@ -1,4 +1,4 @@ - + @@ -6,18 +6,17 @@ @@ -30,7 +29,7 @@
    - +} - + -

    This example uses the Source Sans Pro OpenType font, developed by Adobe +

    + This example uses the Source Sans Pro OpenType font, developed by Adobe and used here under the terms of the SIL Open Font License, Version 1.1: - http://scripts.sil.org/cms/scripts/page.php?item_id=OFL_web

    + http://scripts.sil.org/cms/scripts/page.php?item_id=OFL_web +

    diff --git a/font-features/font-variant-numeric-frac.html b/font-features/font-variant-numeric-frac.html index 9af8fd81..dcc5998b 100644 --- a/font-features/font-variant-numeric-frac.html +++ b/font-features/font-variant-numeric-frac.html @@ -1,171 +1,193 @@ - + - - - - Font feature example - numeric fractions, ordinals, and slashed zero - - + + + - - - - - - -
    -
    -
    -
    -

    3/16, or 1st of 0

    -
    -
    - - - -
    -
    -
    -
    -

    3/16 or 1st of 0

    -
    -
    - + + + +
    +
    +
    +
    +

    + 3/16 or + 1st of 0 +

    +
    +
    + - + - + + + +
    -
    -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML1.value = htmlCode1; + textareaCSS1.value = cssCode1; + textareaHTML2.value = htmlCode2; + textareaCSS2.value = cssCode2; + demo1_active.checked = true; + demo1_active.parentNode.classList.remove("inactive"); + demo2_active.checked = true; + demo2_active.parentNode.classList.remove("inactive"); + fillCode(); + }); + textareaHTML1.addEventListener("input", fillCode); + textareaCSS1.addEventListener("input", fillCode); + textareaHTML2.addEventListener("input", fillCode); + textareaCSS2.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/font-features/font-variant-numeric.html b/font-features/font-variant-numeric.html index 3c78cf57..6951caca 100644 --- a/font-features/font-variant-numeric.html +++ b/font-features/font-variant-numeric.html @@ -1,242 +1,266 @@ - + - - - - Font feature example - numeric - - + + + - - - - - - -
    -
    -
    -
    -

    6,142 or 6,142

    -
    -
    - - - + +
    +
    +
    +
    +

    + 6,142 or + 6,142 +

    +
    +
    + + + + +
    +
    +
    +
    +

    + 6,142 or + 6,142 +

    +
    +
    + + + + +
    -
    -
    -
    -

    6,142 or 6,142

    -
    -
    - - - +
    +
    -
    -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML1.value = htmlCode1; + textareaCSS1.value = cssCode1; + textareaHTML2.value = htmlCode2; + textareaCSS2.value = cssCode2; + demo1_active.checked = true; + demo1_active.parentNode.classList.remove("inactive"); + demo2_active.checked = true; + demo2_active.parentNode.classList.remove("inactive"); + fillCode(); + }); + + textareaHTML1.addEventListener("input", fillCode); + textareaCSS1.addEventListener("input", fillCode); + textareaHTML2.addEventListener("input", fillCode); + textareaCSS2.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/font-features/font-variant-position.html b/font-features/font-variant-position.html index 0cb3c2bf..0cac0e16 100644 --- a/font-features/font-variant-position.html +++ b/font-features/font-variant-position.html @@ -1,246 +1,272 @@ - + - - - - Font feature example - position - - + + + - - - - - - -
    -
    -
    -
    -

    Ups1 and downs2

    -
    -
    - - - + +
    +
    +
    +
    +

    + Ups1 and downs2 +

    +
    +
    + + + + +
    +
    +
    +
    +

    + Ups1 and downs2 +

    +
    +
    + + + + +
    -
    -
    -
    -

    Ups1 and downs2

    -
    -
    - - - +
    +
    -
    -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML1.value = htmlCode1; + textareaCSS1.value = cssCode1; + textareaHTML2.value = htmlCode2; + textareaCSS2.value = cssCode2; + demo1_active.checked = true; + demo1_active.parentNode.classList.remove("inactive"); + demo2_active.checked = true; + demo2_active.parentNode.classList.remove("inactive"); + fillCode(); + }); + + textareaHTML1.addEventListener("input", fillCode); + textareaCSS1.addEventListener("input", fillCode); + textareaHTML2.addEventListener("input", fillCode); + textareaCSS2.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/font-features/font-variant.html b/font-features/font-variant.html index a104e1fa..da690ed2 100644 --- a/font-features/font-variant.html +++ b/font-features/font-variant.html @@ -1,230 +1,252 @@ - + - - - - Font feature example - variant shorthand - - - - - - - -
    -
    -
    -
    + .container * { + font-size: 4rem; + margin: 1.5rem 0; + } + + + + + + +
    +
    +
    +

    Spiffy Plastic -> 3/4 time

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

    Spiffy Plastic -> 3/4 time

    -
    -
    - - + - + + + +
    -
    -
    - -
    - - +
    + +
    + + diff --git a/font-features/fonts/kokoro/IPA_Font_License_Agreement_v1.0.txt b/font-features/fonts/kokoro/IPA_Font_License_Agreement_v1.0.txt index 272d5f63..7e8e2706 100755 --- a/font-features/fonts/kokoro/IPA_Font_License_Agreement_v1.0.txt +++ b/font-features/fonts/kokoro/IPA_Font_License_Agreement_v1.0.txt @@ -66,12 +66,12 @@ IPAフォントライセンスv1.0 IPA Font License Agreement v1.0 -The Licensor provides the Licensed Program (as defined in Article 1 below) under the terms of this license agreement (“Agreement”). Any use, reproduction or distribution of the Licensed Program, or any exercise of rights under this Agreement by a Recipient (as defined in Article 1 below) constitutes the Recipient's acceptance of this Agreement. +The Licensor provides the Licensed Program (as defined in Article 1 below) under the terms of this license agreement (“Agreement”). Any use, reproduction or distribution of the Licensed Program, or any exercise of rights under this Agreement by a Recipient (as defined in Article 1 below) constitutes the Recipient's acceptance of this Agreement. Article 1 (Definitions) 1.“Digital Font Program” shall mean a computer program containing, or used to render or display fonts. 2.“Licensed Program” shall mean a Digital Font Program licensed by the Licensor under this Agreement. -3.“Derived Program” shall mean a Digital Font Program created as a result of a modification, addition, deletion, replacement or any other adaptation to or of a part or all of the Licensed Program, and includes a case where a Digital Font Program newly created by retrieving font information from a part or all of the Licensed Program or Embedded Fonts from a Digital Document File with or without modification of the retrieved font information. +3.“Derived Program” shall mean a Digital Font Program created as a result of a modification, addition, deletion, replacement or any other adaptation to or of a part or all of the Licensed Program, and includes a case where a Digital Font Program newly created by retrieving font information from a part or all of the Licensed Program or Embedded Fonts from a Digital Document File with or without modification of the retrieved font information. 4.“Digital Content” shall mean products provided to end users in the form of digital data, including video content, motion and/or still pictures, TV programs or other broadcasting content and products consisting of character text, pictures, photographic images, graphic symbols and/or the like. 5.“Digital Document File” shall mean a PDF file or other Digital Content created by various software programs in which a part or all of the Licensed Program becomes embedded or contained in the file for the display of the font (“Embedded Fonts”). Embedded Fonts are used only in the display of characters in the particular Digital Document File within which they are embedded, and shall be distinguished from those in any Digital Font Program, which may be used for display of characters outside that particular Digital Document File. 6.“Computer” shall include a server in this Agreement. @@ -87,7 +87,7 @@ The Licensor grants to the Recipient a license to use the Licensed Program in an 4.If any Recipient extracts Embedded Fonts from a Digital Document File to create a Derived Program, such Derived Program shall be subject to the terms of this agreement. 5.If any Recipient performs Reproduction or Other Exploitation of a Digital Document File in which Embedded Fonts of the Licensed Program are used only for rendering the Digital Content within such Digital Document File then such Recipient shall have no further obligations under this Agreement in relation to such actions. 6.The Recipient may reproduce the Licensed Program as is without modification and transfer such copies, publicly transmit or otherwise redistribute the Licensed Program to a third party for commercial or non-commercial purposes (“Redistribute”), in accordance with the provisions set forth in Article 3 Paragraph 2. -7.The Recipient may create, use, reproduce and/or Redistribute a Derived Program under the terms stated above for the Licensed Program: provided, that the Recipient shall follow the provisions set forth in Article 3 Paragraph 1 when Redistributing the Derived Program. +7.The Recipient may create, use, reproduce and/or Redistribute a Derived Program under the terms stated above for the Licensed Program: provided, that the Recipient shall follow the provisions set forth in Article 3 Paragraph 1 when Redistributing the Derived Program. Article 3 (Restriction) The license granted in the preceding Article shall be subject to the following restrictions: @@ -95,10 +95,10 @@ The license granted in the preceding Article shall be subject to the following r 1.If a Derived Program is Redistributed pursuant to Paragraph 4 and 7 of the preceding Article, the following conditions must be met : 　(1)The following must be also Redistributed together with the Derived Program, or be made available online or by means of mailing mechanisms in exchange for a cost which does not exceed the total costs of postage, storage medium and handling fees: 　　(a)a copy of the Derived Program; and -　　(b)any additional file created by the font developing program in the course of creating the Derived Program that can be used for further modification of the Derived Program, if any. -　(2)It is required to also Redistribute means to enable recipients of the Derived Program to replace the Derived Program with the Licensed Program first released under this License (the “Original Program”). Such means may be to provide a difference file from the Original Program, or instructions setting out a method to replace the Derived Program with the Original Program. +　　(b)any additional file created by the font developing program in the course of creating the Derived Program that can be used for further modification of the Derived Program, if any. +　(2)It is required to also Redistribute means to enable recipients of the Derived Program to replace the Derived Program with the Licensed Program first released under this License (the “Original Program”). Such means may be to provide a difference file from the Original Program, or instructions setting out a method to replace the Derived Program with the Original Program. 　(3)The Recipient must license the Derived Program under the terms and conditions of this Agreement. -　(4)No one may use or include the name of the Licensed Program as a program name, font name or file name of the Derived Program. +　(4)No one may use or include the name of the Licensed Program as a program name, font name or file name of the Derived Program. 　(5)Any material to be made available online or by means of mailing a medium to satisfy the requirements of this paragraph may be provided, verbatim, by any party wishing to do so. 2.If the Recipient Redistributes the Licensed Program pursuant to Paragraph 6 of the preceding Article, the Recipient shall meet all of the following conditions: 　(1)The Recipient may not change the name of the Licensed Program. diff --git a/font-features/playable.js b/font-features/playable.js index ddebe2d8..d9353ed2 100644 --- a/font-features/playable.js +++ b/font-features/playable.js @@ -1,22 +1,22 @@ -var section = document.querySelector('section'); -var editable = document.querySelector('.editable'); -var textareaHTML = document.querySelector('.playable-html'); -var textareaCSS = document.querySelector('.playable-css'); -var reset = document.getElementById('reset'); +var section = document.querySelector("section"); +var editable = document.querySelector(".editable"); +var textareaHTML = document.querySelector(".playable-html"); +var textareaCSS = document.querySelector(".playable-css"); +var reset = document.getElementById("reset"); var htmlCode = textareaHTML.value; var cssCode = textareaCSS.value; function fillCode() { - editable.innerHTML = textareaCSS.value; - section.innerHTML = textareaHTML.value; + editable.innerHTML = textareaCSS.value; + section.innerHTML = textareaHTML.value; } -reset.addEventListener('click', function () { - textareaHTML.value = htmlCode; - textareaCSS.value = cssCode; - fillCode(); +reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); }); -textareaHTML.addEventListener('input', fillCode); -textareaCSS.addEventListener('input', fillCode); -window.addEventListener('load', fillCode); \ No newline at end of file +textareaHTML.addEventListener("input", fillCode); +textareaCSS.addEventListener("input", fillCode); +window.addEventListener("load", fillCode); diff --git a/font-features/styles.css b/font-features/styles.css index b733e436..11945fee 100644 --- a/font-features/styles.css +++ b/font-features/styles.css @@ -1,61 +1,65 @@ /* Some default styling for cookbook examples */ -/* +/* rgb(53,43,34) rgb(75,70,74) rgb(95,97,110) rgb(137,151,188) rgb(160,178,226) */ -body { - background-color: #fff; - color: #333; - font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif; - padding: 0; - margin: 0; +body { + background-color: #fff; + color: #333; + font: + 1.2em / 1.5 Helvetica Neue, + Helvetica, + Arial, + sans-serif; + padding: 0; + margin: 0; } /* styles for the editor */ .playable { - font-family: monospace; - display: block; - margin-bottom: 10px; - background-color: #F4F7F8; - border: none; - border-left: 6px solid #558ABB; - color: #4D4E53; - width: 90%; - max-width: 700px; - padding: 10px 10px 0px; - font-size: 90%; - } + font-family: monospace; + display: block; + margin-bottom: 10px; + background-color: #f4f7f8; + border: none; + border-left: 6px solid #558abb; + color: #4d4e53; + width: 90%; + max-width: 700px; + padding: 10px 10px 0px; + font-size: 90%; +} - .playable-css { - height: 80px; - } +.playable-css { + height: 80px; +} - .playable-html { - height: 160px; - } +.playable-html { + height: 160px; +} - .playable-buttons { - text-align: right; - width: 90%; - max-width: 700px; - padding: 5px 10px 5px 26px; - font-size: 100%; - } +.playable-buttons { + text-align: right; + width: 90%; + max-width: 700px; + padding: 5px 10px 5px 26px; + font-size: 100%; +} - .preview { - width: 90%; - max-width: 700px; - border: 1px solid #4D4E53; - border-radius: 2px; - padding: 10px 14px 10px 10px; - margin-bottom: 10px; - } +.preview { + width: 90%; + max-width: 700px; + border: 1px solid #4d4e53; + border-radius: 2px; + padding: 10px 14px 10px 10px; + margin-bottom: 10px; +} - .preview input { - display: block; - margin: 5px; - } +.preview input { + display: block; + margin: 5px; +} diff --git a/grid/docs/autoplacement.html b/grid/docs/autoplacement.html index f080e21b..8ae6ee09 100644 --- a/grid/docs/autoplacement.html +++ b/grid/docs/autoplacement.html @@ -1,4 +1,4 @@ - + @@ -15,16 +15,16 @@ padding: 0; max-width: 800px; } - .wrapper li { - border: 1px solid #ccc; - } - - .wrapper li img { - display: block; - object-fit: cover; - width: 100%; - height: 100%; - } + .wrapper li { + border: 1px solid #ccc; + } + + .wrapper li img { + display: block; + object-fit: cover; + width: 100%; + height: 100%; + }
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    - +} - +
    diff --git a/grid/masonry/block-axis.html b/grid/masonry/block-axis.html index fbd48311..2a3c404d 100644 --- a/grid/masonry/block-axis.html +++ b/grid/masonry/block-axis.html @@ -1,4 +1,4 @@ - + @@ -31,36 +31,35 @@ grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); grid-template-rows: masonry; } -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    - +} - +
    diff --git a/grid/masonry/inline-axis.html b/grid/masonry/inline-axis.html index 30280d88..5025b40d 100644 --- a/grid/masonry/inline-axis.html +++ b/grid/masonry/inline-axis.html @@ -1,4 +1,4 @@ - + @@ -31,36 +31,34 @@ grid-template-columns: masonry; grid-template-rows: repeat(3, 100px); } -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    - +} - +
    diff --git a/grid/masonry/justify-tracks.html b/grid/masonry/justify-tracks.html index 50a2c830..6715254e 100644 --- a/grid/masonry/justify-tracks.html +++ b/grid/masonry/justify-tracks.html @@ -1,4 +1,4 @@ - + @@ -32,37 +32,35 @@ grid-template-rows: repeat(3, 100px); justify-tracks: end, center, space-around; } -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    - +} - +
    diff --git a/grid/masonry/masonry-auto-flow.html b/grid/masonry/masonry-auto-flow.html index 8c955e1d..ccfe7635 100644 --- a/grid/masonry/masonry-auto-flow.html +++ b/grid/masonry/masonry-auto-flow.html @@ -1,4 +1,4 @@ - + @@ -31,29 +31,28 @@ gap: 10px; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); grid-template-rows: masonry; - masonry-auto-flow: next ; + masonry-auto-flow: next; } -
    -
    -
    -
    -
    -
    -
    positioned.
    -
    -
    -
    -
    -
    -
    +
    +
    +
    +
    +
    +
    positioned.
    +
    +
    +
    +
    +
    +
    - + grid-column: 2 / 4; +} - +
    diff --git a/grid/masonry/positioned.html b/grid/masonry/positioned.html index 7c932e06..3149209c 100644 --- a/grid/masonry/positioned.html +++ b/grid/masonry/positioned.html @@ -1,4 +1,4 @@ - + @@ -32,27 +32,26 @@ grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); grid-template-rows: masonry; } -
    -
    -
    -
    -
    -
    -
    positioned.
    -
    -
    -
    -
    -
    -
    +
    +
    +
    +
    +
    +
    positioned.
    +
    +
    +
    +
    +
    +
    - + grid-column: 2 / 4; +} - +
    diff --git a/grid/masonry/spanners.html b/grid/masonry/spanners.html index b91e465d..627d9083 100644 --- a/grid/masonry/spanners.html +++ b/grid/masonry/spanners.html @@ -1,4 +1,4 @@ - + @@ -31,36 +31,40 @@ grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); grid-template-rows: masonry; } -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    - +} - +
    diff --git a/grid/playable.js b/grid/playable.js index ddebe2d8..d9353ed2 100644 --- a/grid/playable.js +++ b/grid/playable.js @@ -1,22 +1,22 @@ -var section = document.querySelector('section'); -var editable = document.querySelector('.editable'); -var textareaHTML = document.querySelector('.playable-html'); -var textareaCSS = document.querySelector('.playable-css'); -var reset = document.getElementById('reset'); +var section = document.querySelector("section"); +var editable = document.querySelector(".editable"); +var textareaHTML = document.querySelector(".playable-html"); +var textareaCSS = document.querySelector(".playable-css"); +var reset = document.getElementById("reset"); var htmlCode = textareaHTML.value; var cssCode = textareaCSS.value; function fillCode() { - editable.innerHTML = textareaCSS.value; - section.innerHTML = textareaHTML.value; + editable.innerHTML = textareaCSS.value; + section.innerHTML = textareaHTML.value; } -reset.addEventListener('click', function () { - textareaHTML.value = htmlCode; - textareaCSS.value = cssCode; - fillCode(); +reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); }); -textareaHTML.addEventListener('input', fillCode); -textareaCSS.addEventListener('input', fillCode); -window.addEventListener('load', fillCode); \ No newline at end of file +textareaHTML.addEventListener("input", fillCode); +textareaCSS.addEventListener("input", fillCode); +window.addEventListener("load", fillCode); diff --git a/grid/styles.css b/grid/styles.css index b733e436..11945fee 100644 --- a/grid/styles.css +++ b/grid/styles.css @@ -1,61 +1,65 @@ /* Some default styling for cookbook examples */ -/* +/* rgb(53,43,34) rgb(75,70,74) rgb(95,97,110) rgb(137,151,188) rgb(160,178,226) */ -body { - background-color: #fff; - color: #333; - font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif; - padding: 0; - margin: 0; +body { + background-color: #fff; + color: #333; + font: + 1.2em / 1.5 Helvetica Neue, + Helvetica, + Arial, + sans-serif; + padding: 0; + margin: 0; } /* styles for the editor */ .playable { - font-family: monospace; - display: block; - margin-bottom: 10px; - background-color: #F4F7F8; - border: none; - border-left: 6px solid #558ABB; - color: #4D4E53; - width: 90%; - max-width: 700px; - padding: 10px 10px 0px; - font-size: 90%; - } + font-family: monospace; + display: block; + margin-bottom: 10px; + background-color: #f4f7f8; + border: none; + border-left: 6px solid #558abb; + color: #4d4e53; + width: 90%; + max-width: 700px; + padding: 10px 10px 0px; + font-size: 90%; +} - .playable-css { - height: 80px; - } +.playable-css { + height: 80px; +} - .playable-html { - height: 160px; - } +.playable-html { + height: 160px; +} - .playable-buttons { - text-align: right; - width: 90%; - max-width: 700px; - padding: 5px 10px 5px 26px; - font-size: 100%; - } +.playable-buttons { + text-align: right; + width: 90%; + max-width: 700px; + padding: 5px 10px 5px 26px; + font-size: 100%; +} - .preview { - width: 90%; - max-width: 700px; - border: 1px solid #4D4E53; - border-radius: 2px; - padding: 10px 14px 10px 10px; - margin-bottom: 10px; - } +.preview { + width: 90%; + max-width: 700px; + border: 1px solid #4d4e53; + border-radius: 2px; + padding: 10px 14px 10px 10px; + margin-bottom: 10px; +} - .preview input { - display: block; - margin: 5px; - } +.preview input { + display: block; + margin: 5px; +} diff --git a/grid/subgrid/adding-line-names.html b/grid/subgrid/adding-line-names.html index ef94a4c0..cb6b4e86 100644 --- a/grid/subgrid/adding-line-names.html +++ b/grid/subgrid/adding-line-names.html @@ -1,4 +1,4 @@ - + @@ -66,7 +66,7 @@
    - +} - +
    diff --git a/grid/subgrid/both.html b/grid/subgrid/both.html index 6b6e07c0..bb8bd1f1 100644 --- a/grid/subgrid/both.html +++ b/grid/subgrid/both.html @@ -1,4 +1,4 @@ - + @@ -58,7 +58,7 @@
    - +} - +
    diff --git a/grid/subgrid/columns.html b/grid/subgrid/columns.html index 64ef5b52..ef75d5f8 100644 --- a/grid/subgrid/columns.html +++ b/grid/subgrid/columns.html @@ -1,4 +1,4 @@ - + @@ -58,7 +58,7 @@
    - +} - +
    diff --git a/grid/subgrid/gap.html b/grid/subgrid/gap.html index 899ca954..ce229fc5 100644 --- a/grid/subgrid/gap.html +++ b/grid/subgrid/gap.html @@ -1,4 +1,4 @@ - + @@ -49,7 +49,7 @@ } .subitem2 { - background-color: rgba(0,0,0,.5); + background-color: rgba(0, 0, 0, 0.5); grid-column: 2; grid-row: 1; } @@ -66,7 +66,7 @@
    - +} - +
    diff --git a/grid/subgrid/implicit.html b/grid/subgrid/implicit.html index fdad43a4..8b8034f7 100644 --- a/grid/subgrid/implicit.html +++ b/grid/subgrid/implicit.html @@ -1,4 +1,4 @@ - + @@ -65,7 +65,7 @@
    - +} - +
    diff --git a/grid/subgrid/line-names.html b/grid/subgrid/line-names.html index a0abb790..b61b5c33 100644 --- a/grid/subgrid/line-names.html +++ b/grid/subgrid/line-names.html @@ -1,4 +1,4 @@ - + @@ -59,7 +59,7 @@
    - +} - +
    diff --git a/grid/subgrid/no-implicit.html b/grid/subgrid/no-implicit.html index 3aa3a04b..d4010d13 100644 --- a/grid/subgrid/no-implicit.html +++ b/grid/subgrid/no-implicit.html @@ -1,4 +1,4 @@ - + @@ -65,7 +65,7 @@
    - +} - +
    diff --git a/grid/subgrid/rows.html b/grid/subgrid/rows.html index f2a118b4..f75f67d8 100644 --- a/grid/subgrid/rows.html +++ b/grid/subgrid/rows.html @@ -1,4 +1,4 @@ - + @@ -58,7 +58,7 @@
    - +} - +
    diff --git a/houdini/css_painting_api/boxbg.js b/houdini/css_painting_api/boxbg.js index f8aec7a3..e1951305 100644 --- a/houdini/css_painting_api/boxbg.js +++ b/houdini/css_painting_api/boxbg.js @@ -1,21 +1,32 @@ -registerPaint('boxbg', class { - - static get contextOptions() { return {alpha: true}; } - - /* - use this function to retrieve any custom properties (or regular properties, such as 'height') - defined for the element, return them in the specified array - */ - static get inputProperties() { return ['--boxColor', '--widthSubtractor']; } - - paint(ctx, size, props) { - /* - ctx -> drawing context - size -> paintSize: width and height - props -> properties: get() method - */ - - ctx.fillStyle = props.get('--boxColor'); - ctx.fillRect(0, size.height/3, size.width*0.4 - props.get('--widthSubtractor'), size.height*0.6); - } - }); \ No newline at end of file +registerPaint( + "boxbg", + class { + static get contextOptions() { + return { alpha: true }; + } + + /* + use this function to retrieve any custom properties (or regular properties, such as 'height') + defined for the element, return them in the specified array + */ + static get inputProperties() { + return ["--boxColor", "--widthSubtractor"]; + } + + paint(ctx, size, props) { + /* + ctx -> drawing context + size -> paintSize: width and height + props -> properties: get() method + */ + + ctx.fillStyle = props.get("--boxColor"); + ctx.fillRect( + 0, + size.height / 3, + size.width * 0.4 - props.get("--widthSubtractor"), + size.height * 0.6, + ); + } + }, +); diff --git a/houdini/css_painting_api/example-boxbg.html b/houdini/css_painting_api/example-boxbg.html index 46f05f71..1adefa9f 100644 --- a/houdini/css_painting_api/example-boxbg.html +++ b/houdini/css_painting_api/example-boxbg.html @@ -1,50 +1,49 @@ - - - - - - CSS Painting API example - - - - -
      -
    • item 1
      • -
    • item 2
      • -
    • item 3
      • -
    • item 4
      • -
    • item 5
      • -
    • item 6
      • -
    • item 7
      • -
    • item 8
      • -
    • item 9
      • -
    • item 10
      • -
    • item 11
      • -
    • item 12
      • -
    • item 13
      • -
    • item 14
      • -
    • item 15
      • -
    • item 16
      • -
    • item 17
      • -
    • item
      • -
    - - - + + + + + + CSS Painting API example + + + +
      +
    • item 1
      • +
    • item 2
      • +
    • item 3
      • +
    • item 4
      • +
    • item 5
      • +
    • item 6
      • +
    • item 7
      • +
    • item 8
      • +
    • item 9
      • +
    • item 10
      • +
    • item 11
      • +
    • item 12
      • +
    • item 13
      • +
    • item 14
      • +
    • item 15
      • +
    • item 16
      • +
    • item 17
      • +
    • item
      • +
    + + + diff --git a/howto/box-shadow-button.html b/howto/box-shadow-button.html index f56f18a4..eba3a83d 100644 --- a/howto/box-shadow-button.html +++ b/howto/box-shadow-button.html @@ -1,61 +1,58 @@ - + - + CSS Solutions: How to add a shadow to an element - + - + - +
    -
    - -
    +
    + +
    - + box-shadow: 5px 5px 10px 2px rgba(0,0,0,.8); +} - +
    - +
    - - - + + diff --git a/howto/center.html b/howto/center.html index 1a4d943c..02fc45b3 100644 --- a/howto/center.html +++ b/howto/center.html @@ -1,57 +1,55 @@ - + - + CSS Solutions: How to center an element - + - + - +
    -
    -
    center me!
    -
    +
    +
    center me!
    +
    - +} - +
    - +
    - - - + + diff --git a/howto/highlight_first_line.html b/howto/highlight_first_line.html index da2e94a6..fc21c776 100644 --- a/howto/highlight_first_line.html +++ b/howto/highlight_first_line.html @@ -1,51 +1,54 @@ - + - + CSS Solutions: How to highlight the first line of a paragraph - - + + - + - +
    -
    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

    +
    +

    + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh + onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. +

    -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    -
    +

    + Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot + courgette tatsoi pea sprouts fava bean collard greens dandelion okra + wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. +

    +
    - +} - +
    - +
    - - - + + diff --git a/howto/highlight_first_line2.html b/howto/highlight_first_line2.html index 3a75d803..e6297e70 100644 --- a/howto/highlight_first_line2.html +++ b/howto/highlight_first_line2.html @@ -1,51 +1,54 @@ - + - + CSS Solutions: How to highlight the first line of a paragraph - - + + - + - +
    -
    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

    +
    +

    + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh + onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. +

    -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    -
    +

    + Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot + courgette tatsoi pea sprouts fava bean collard greens dandelion okra + wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. +

    +
    - +} - +
    - +
    - - - + + diff --git a/howto/highlight_first_para.html b/howto/highlight_first_para.html index 59fab90e..f3a9e71f 100644 --- a/howto/highlight_first_para.html +++ b/howto/highlight_first_para.html @@ -1,51 +1,54 @@ - + - + CSS Solutions: How to highlight the first paragraph - - + + - + - +
    -
    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

    +
    +

    + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh + onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. +

    -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    -
    +

    + Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot + courgette tatsoi pea sprouts fava bean collard greens dandelion okra + wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. +

    +
    - +} - +
    - +
    - - - + + diff --git a/howto/highlight_h1_plus_para.html b/howto/highlight_h1_plus_para.html index 52d070ad..97db557d 100644 --- a/howto/highlight_h1_plus_para.html +++ b/howto/highlight_h1_plus_para.html @@ -1,55 +1,58 @@ - + - + CSS Solutions: How to highlight a paragraph right after an h1 - - + + - + - +
    -
    -

    A heading

    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

    +
    +

    A heading

    +

    + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh + onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. +

    -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    -
    +

    + Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot + courgette tatsoi pea sprouts fava bean collard greens dandelion okra + wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. +

    +
    - +} - +
    - +
    - - - + + diff --git a/howto/object-fit.html b/howto/object-fit.html index 7e9a4b99..7a3edc87 100644 --- a/howto/object-fit.html +++ b/howto/object-fit.html @@ -1,85 +1,84 @@ - + - + - CSS Solutions: How to fill a box with an image without distorting it - + + CSS Solutions: How to fill a box with an image without distorting it + + - + - +
    -
    -
    a balloon
    -
    a balloon
    -
    a balloon
    -
    +
    +
    a balloon
    +
    a balloon
    +
    a balloon
    +
    - + object-fit: fill; +} - +
    a balloon
    +
    a balloon
    +
    a balloon
    +
    - +
    - - - + + diff --git a/howto/opacity.html b/howto/opacity.html index 8482b099..c56e5a3b 100644 --- a/howto/opacity.html +++ b/howto/opacity.html @@ -1,77 +1,79 @@ - + - + - CSS Solutions: How to make a background color semi-transparent - + + CSS Solutions: How to make a background color semi-transparent + + - + - +
    -
    -
    This box uses opacity
    -
    This box has a background color with an alpha channel
    +
    +
    This box uses opacity
    +
    + This box has a background color with an alpha channel
    +
    - + background-color: rgba(0,0,0,.5); + color: #fff; +} - +
    This box uses opacity
    +
    This box has a background color with an alpha channel
    +
    - +
    - - - + + diff --git a/howto/playable.js b/howto/playable.js index 41e83473..d9353ed2 100644 --- a/howto/playable.js +++ b/howto/playable.js @@ -1,22 +1,22 @@ -var section = document.querySelector('section'); -var editable = document.querySelector('.editable'); -var textareaHTML = document.querySelector('.playable-html'); -var textareaCSS = document.querySelector('.playable-css'); -var reset = document.getElementById('reset'); +var section = document.querySelector("section"); +var editable = document.querySelector(".editable"); +var textareaHTML = document.querySelector(".playable-html"); +var textareaCSS = document.querySelector(".playable-css"); +var reset = document.getElementById("reset"); var htmlCode = textareaHTML.value; var cssCode = textareaCSS.value; function fillCode() { - editable.innerHTML = textareaCSS.value; - section.innerHTML = textareaHTML.value; + editable.innerHTML = textareaCSS.value; + section.innerHTML = textareaHTML.value; } -reset.addEventListener('click', function () { - textareaHTML.value = htmlCode; - textareaCSS.value = cssCode; - fillCode(); +reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); }); -textareaHTML.addEventListener('input', fillCode); -textareaCSS.addEventListener('input', fillCode); -window.addEventListener('load', fillCode); +textareaHTML.addEventListener("input", fillCode); +textareaCSS.addEventListener("input", fillCode); +window.addEventListener("load", fillCode); diff --git a/howto/styles.css b/howto/styles.css index 030678b3..11945fee 100644 --- a/howto/styles.css +++ b/howto/styles.css @@ -1,61 +1,65 @@ -/* Some default styling for cookbook examples */ -/* -rgb(53,43,34) -rgb(75,70,74) -rgb(95,97,110) -rgb(137,151,188) -rgb(160,178,226) -*/ -body { - background-color: #fff; - color: #333; - font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif; - padding: 0; - margin: 0; -} - -/* styles for the editor */ - -.playable { - font-family: monospace; - display: block; - margin-bottom: 10px; - background-color: #F4F7F8; - border: none; - border-left: 6px solid #558ABB; - color: #4D4E53; - width: 90%; - max-width: 700px; - padding: 10px 10px 0px; - font-size: 90%; - } - - .playable-css { - height: 80px; - } - - .playable-html { - height: 160px; - } - - .playable-buttons { - text-align: right; - width: 90%; - max-width: 700px; - padding: 5px 10px 5px 26px; - font-size: 100%; - } - - .preview { - width: 90%; - max-width: 700px; - border: 1px solid #4D4E53; - border-radius: 2px; - padding: 10px 14px 10px 10px; - margin-bottom: 10px; - } - - .preview input { - display: block; - margin: 5px; - } +/* Some default styling for cookbook examples */ +/* +rgb(53,43,34) +rgb(75,70,74) +rgb(95,97,110) +rgb(137,151,188) +rgb(160,178,226) +*/ +body { + background-color: #fff; + color: #333; + font: + 1.2em / 1.5 Helvetica Neue, + Helvetica, + Arial, + sans-serif; + padding: 0; + margin: 0; +} + +/* styles for the editor */ + +.playable { + font-family: monospace; + display: block; + margin-bottom: 10px; + background-color: #f4f7f8; + border: none; + border-left: 6px solid #558abb; + color: #4d4e53; + width: 90%; + max-width: 700px; + padding: 10px 10px 0px; + font-size: 90%; +} + +.playable-css { + height: 80px; +} + +.playable-html { + height: 160px; +} + +.playable-buttons { + text-align: right; + width: 90%; + max-width: 700px; + padding: 5px 10px 5px 26px; + font-size: 100%; +} + +.preview { + width: 90%; + max-width: 700px; + border: 1px solid #4d4e53; + border-radius: 2px; + padding: 10px 14px 10px 10px; + margin-bottom: 10px; +} + +.preview input { + display: block; + margin: 5px; +} diff --git a/howto/text-shadow.html b/howto/text-shadow.html index 0925430a..f41b61a6 100644 --- a/howto/text-shadow.html +++ b/howto/text-shadow.html @@ -1,57 +1,55 @@ - + - + CSS Solutions: How to add a shadow to text - + - + - +
    -
    -

    Adding a shadow to text

    -
    +
    +

    Adding a shadow to text

    +
    - + color: royalblue; + text-shadow: 2px 4px 4px rgba(46,91,173,0.6); +} - +

    Adding a shadow to text

    +
    - +
    - - - + + diff --git a/howto/transition-button.html b/howto/transition-button.html index 9fd1341c..929d3978 100644 --- a/howto/transition-button.html +++ b/howto/transition-button.html @@ -1,60 +1,60 @@ - + - + CSS Solutions: How to transition a button - + - + - +
    -
    - -
    +
    + +
    - +} - +
    - +
    - - - + + diff --git a/images/image-set-type.html b/images/image-set-type.html index ad8d35e6..452a6706 100644 --- a/images/image-set-type.html +++ b/images/image-set-type.html @@ -1,37 +1,39 @@ - + - + image-set() type() - + - + - +
    -
    +
    - +} - +
    - +
    - - - + + diff --git a/images/image-set.html b/images/image-set.html index f7246dde..3488e144 100644 --- a/images/image-set.html +++ b/images/image-set.html @@ -1,37 +1,39 @@ - + - + image-set() - + - + - +
    -
    +
    - +} - +
    - +
    - - - - \ No newline at end of file + + + diff --git a/images/playable.js b/images/playable.js index ddebe2d8..d9353ed2 100644 --- a/images/playable.js +++ b/images/playable.js @@ -1,22 +1,22 @@ -var section = document.querySelector('section'); -var editable = document.querySelector('.editable'); -var textareaHTML = document.querySelector('.playable-html'); -var textareaCSS = document.querySelector('.playable-css'); -var reset = document.getElementById('reset'); +var section = document.querySelector("section"); +var editable = document.querySelector(".editable"); +var textareaHTML = document.querySelector(".playable-html"); +var textareaCSS = document.querySelector(".playable-css"); +var reset = document.getElementById("reset"); var htmlCode = textareaHTML.value; var cssCode = textareaCSS.value; function fillCode() { - editable.innerHTML = textareaCSS.value; - section.innerHTML = textareaHTML.value; + editable.innerHTML = textareaCSS.value; + section.innerHTML = textareaHTML.value; } -reset.addEventListener('click', function () { - textareaHTML.value = htmlCode; - textareaCSS.value = cssCode; - fillCode(); +reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); }); -textareaHTML.addEventListener('input', fillCode); -textareaCSS.addEventListener('input', fillCode); -window.addEventListener('load', fillCode); \ No newline at end of file +textareaHTML.addEventListener("input", fillCode); +textareaCSS.addEventListener("input", fillCode); +window.addEventListener("load", fillCode); diff --git a/images/styles.css b/images/styles.css index b733e436..11945fee 100644 --- a/images/styles.css +++ b/images/styles.css @@ -1,61 +1,65 @@ /* Some default styling for cookbook examples */ -/* +/* rgb(53,43,34) rgb(75,70,74) rgb(95,97,110) rgb(137,151,188) rgb(160,178,226) */ -body { - background-color: #fff; - color: #333; - font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif; - padding: 0; - margin: 0; +body { + background-color: #fff; + color: #333; + font: + 1.2em / 1.5 Helvetica Neue, + Helvetica, + Arial, + sans-serif; + padding: 0; + margin: 0; } /* styles for the editor */ .playable { - font-family: monospace; - display: block; - margin-bottom: 10px; - background-color: #F4F7F8; - border: none; - border-left: 6px solid #558ABB; - color: #4D4E53; - width: 90%; - max-width: 700px; - padding: 10px 10px 0px; - font-size: 90%; - } + font-family: monospace; + display: block; + margin-bottom: 10px; + background-color: #f4f7f8; + border: none; + border-left: 6px solid #558abb; + color: #4d4e53; + width: 90%; + max-width: 700px; + padding: 10px 10px 0px; + font-size: 90%; +} - .playable-css { - height: 80px; - } +.playable-css { + height: 80px; +} - .playable-html { - height: 160px; - } +.playable-html { + height: 160px; +} - .playable-buttons { - text-align: right; - width: 90%; - max-width: 700px; - padding: 5px 10px 5px 26px; - font-size: 100%; - } +.playable-buttons { + text-align: right; + width: 90%; + max-width: 700px; + padding: 5px 10px 5px 26px; + font-size: 100%; +} - .preview { - width: 90%; - max-width: 700px; - border: 1px solid #4D4E53; - border-radius: 2px; - padding: 10px 14px 10px 10px; - margin-bottom: 10px; - } +.preview { + width: 90%; + max-width: 700px; + border: 1px solid #4d4e53; + border-radius: 2px; + padding: 10px 14px 10px 10px; + margin-bottom: 10px; +} - .preview input { - display: block; - margin: 5px; - } +.preview input { + display: block; + margin: 5px; +} diff --git a/inline-formatting/align.html b/inline-formatting/align.html index 52d717da..34e81140 100644 --- a/inline-formatting/align.html +++ b/inline-formatting/align.html @@ -1,4 +1,4 @@ - + @@ -7,7 +7,10 @@ - - - +
    +

    :is()-styled links

    +
    +

    + Here is my main content. This + contains a link. +

    +
    - + + +
    +

    + This is my footer, also containing + a link. +

    +
    +
    +
    +

    :where()-styled links

    +
    +

    + Here is my main content. This + contains a link. +

    +
    + + + +
    +

    + This is my footer, also containing + a link. +

    +
    +
    + diff --git a/layout/normal-flow.html b/layout/normal-flow.html index 0d5d0003..0bb89b67 100644 --- a/layout/normal-flow.html +++ b/layout/normal-flow.html @@ -1,125 +1,134 @@ - + - - - - CSS Normal Flow + + + + CSS Normal Flow - - + - - - -
    -
    -

    One November night in the year 1782, so the story runs, two brothers sat over their winter fire in - the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their - names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful - minds and a deep interest in all scientific knowledge and new discovery.

    -

    Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths - of their fires without drawing any special inspiration from the fact.”

    -
    + span { + background-color: lightblue; + } + + -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); - \ No newline at end of file + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + + diff --git a/learn/backgrounds-borders/background-blend-mode.html b/learn/backgrounds-borders/background-blend-mode.html index d49351f2..71f47bb1 100644 --- a/learn/backgrounds-borders/background-blend-mode.html +++ b/learn/backgrounds-borders/background-blend-mode.html @@ -1,4 +1,4 @@ - + @@ -15,24 +15,25 @@
    -
    +
    - +} - +
    diff --git a/learn/backgrounds-borders/background-image.html b/learn/backgrounds-borders/background-image.html index 6f14b263..f3a42c41 100644 --- a/learn/backgrounds-borders/background-image.html +++ b/learn/backgrounds-borders/background-image.html @@ -1,4 +1,4 @@ - + @@ -16,7 +16,7 @@ .box { width: 200px; height: 100px; - padding: .5em; + padding: 0.5em; border: 1px solid #ccc; margin: 20px; } @@ -30,7 +30,6 @@ .b { background-image: url(star.png); } - @@ -40,25 +39,23 @@
    - - +} - +
    diff --git a/learn/backgrounds-borders/background.html b/learn/backgrounds-borders/background.html index 3e09f745..2ca28a3d 100644 --- a/learn/backgrounds-borders/background.html +++ b/learn/backgrounds-borders/background.html @@ -1,4 +1,4 @@ - + @@ -11,38 +11,42 @@ .box { width: 500px; height: 300px; - padding: .5em; + padding: 0.5em; }
    -
    - + background: + linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat, +url(big-star.png) center no-repeat, + rebeccapurple; +} - +
    diff --git a/learn/backgrounds-borders/borders.html b/learn/backgrounds-borders/borders.html index 264a9fac..d62301a1 100644 --- a/learn/backgrounds-borders/borders.html +++ b/learn/backgrounds-borders/borders.html @@ -1,4 +1,4 @@ - + @@ -10,7 +10,7 @@ } .box { width: 500px; - padding: .5em; + padding: 0.5em; } @@ -35,10 +35,9 @@

    Borders

    Try changing the borders.

    - - +} - +
    diff --git a/learn/backgrounds-borders/color.html b/learn/backgrounds-borders/color.html index 6fafe7aa..ae24b177 100644 --- a/learn/backgrounds-borders/color.html +++ b/learn/backgrounds-borders/color.html @@ -1,4 +1,4 @@ - + @@ -10,7 +10,7 @@ } .box { width: 500px; - padding: .5em; + padding: 0.5em; } @@ -25,7 +25,7 @@ } span { - background-color: rgba(255,255,255,.5); + background-color: rgba(255, 255, 255, 0.5); } @@ -36,10 +36,9 @@

    Background Colors

    Try changing the background colors.

    - - +} - +
    diff --git a/learn/backgrounds-borders/corners.html b/learn/backgrounds-borders/corners.html index 94686e83..a448dd8f 100644 --- a/learn/backgrounds-borders/corners.html +++ b/learn/backgrounds-borders/corners.html @@ -1,4 +1,4 @@ - + @@ -10,7 +10,7 @@ } .box { width: 500px; - padding: .5em; + padding: 0.5em; } @@ -20,8 +20,6 @@ border-radius: 1em; border-top-right-radius: 10% 30%; } - - @@ -31,23 +29,21 @@

    Borders

    Try changing the borders.

    - - +} - +
    diff --git a/learn/backgrounds-borders/gradients.html b/learn/backgrounds-borders/gradients.html index b5be9fb8..2d1957d0 100644 --- a/learn/backgrounds-borders/gradients.html +++ b/learn/backgrounds-borders/gradients.html @@ -1,4 +1,4 @@ - + @@ -16,7 +16,7 @@ .box { width: 200px; height: 100px; - padding: .5em; + padding: 0.5em; border: 1px solid #ccc; margin: 20px; } @@ -24,14 +24,21 @@ @@ -41,10 +48,9 @@
    - - +} - +
    diff --git a/learn/backgrounds-borders/mix-blend-mode.html b/learn/backgrounds-borders/mix-blend-mode.html index 098d7da0..1883c8a2 100644 --- a/learn/backgrounds-borders/mix-blend-mode.html +++ b/learn/backgrounds-borders/mix-blend-mode.html @@ -1,4 +1,4 @@ - + @@ -35,18 +35,19 @@ @@ -57,15 +58,15 @@
    - +
    Multiply mix
    -
    + - +} - +
    diff --git a/learn/backgrounds-borders/multiple-background-image.html b/learn/backgrounds-borders/multiple-background-image.html index ebfda8de..ca44fc14 100644 --- a/learn/backgrounds-borders/multiple-background-image.html +++ b/learn/backgrounds-borders/multiple-background-image.html @@ -1,4 +1,4 @@ - + @@ -16,7 +16,7 @@ .box { width: 300px; height: 100px; - padding: .5em; + padding: 0.5em; border: 1px solid #ccc; margin: 20px; } @@ -26,7 +26,6 @@ .box { background-image: url(star.png), url(big-star.png); } - @@ -35,20 +34,18 @@
    - - +} - +
    diff --git a/learn/backgrounds-borders/position.html b/learn/backgrounds-borders/position.html index df5cb6d4..ff728cc8 100644 --- a/learn/backgrounds-borders/position.html +++ b/learn/backgrounds-borders/position.html @@ -1,4 +1,4 @@ - + @@ -12,7 +12,7 @@ .box { width: 300px; height: 100px; - padding: .5em; + padding: 0.5em; border: 1px solid #ccc; margin: 20px; } @@ -24,7 +24,6 @@ background-repeat: no-repeat; background-position: 120px 1em; } - @@ -33,17 +32,16 @@
    - +} - +
    diff --git a/learn/backgrounds-borders/repeat.html b/learn/backgrounds-borders/repeat.html index a861c8d4..53064119 100644 --- a/learn/backgrounds-borders/repeat.html +++ b/learn/backgrounds-borders/repeat.html @@ -1,4 +1,4 @@ - + @@ -12,7 +12,7 @@ .box { width: 300px; height: 100px; - padding: .5em; + padding: 0.5em; border: 1px solid #ccc; margin: 20px; } @@ -23,7 +23,6 @@ background-image: url(star.png); background-repeat: no-repeat; } - @@ -32,16 +31,15 @@
    - +} - +
    diff --git a/learn/backgrounds-borders/size.html b/learn/backgrounds-borders/size.html index 7b2094f6..942c0603 100644 --- a/learn/backgrounds-borders/size.html +++ b/learn/backgrounds-borders/size.html @@ -1,4 +1,4 @@ - + @@ -12,7 +12,7 @@ .box { width: 500px; height: 300px; - padding: .5em; + padding: 0.5em; border: 1px solid #ccc; margin: 20px; } @@ -24,7 +24,6 @@ background-repeat: no-repeat; background-size: 100px 10em; } - @@ -33,17 +32,16 @@
    - +} - +
    diff --git a/learn/backgrounds-borders/task.html b/learn/backgrounds-borders/task.html index 04643081..5ca50b82 100644 --- a/learn/backgrounds-borders/task.html +++ b/learn/backgrounds-borders/task.html @@ -1,4 +1,4 @@ - + @@ -10,17 +10,15 @@ } .box { width: 500px; - padding: .5em; + padding: 0.5em; } @@ -30,24 +28,23 @@

    Backgrounds & Borders

    - - - + + +
    diff --git a/learn/box-model/block.html b/learn/box-model/block.html index 1d5642d1..890fda37 100644 --- a/learn/box-model/block.html +++ b/learn/box-model/block.html @@ -1,4 +1,4 @@ - + @@ -45,8 +45,8 @@

    - +} - +

    I am another paragraph. Some of the words have been wrapped in a span element.

    diff --git a/learn/box-model/border.html b/learn/box-model/border.html index 0f4e6f8b..a33b6ba5 100644 --- a/learn/box-model/border.html +++ b/learn/box-model/border.html @@ -1,4 +1,4 @@ - + @@ -20,7 +20,7 @@ .container { border-top: 5px dotted green; border-right: 1px solid black; - border-bottom: 20px double rgb(23,45,145); + border-bottom: 20px double rgb(23, 45, 145); } .box { @@ -34,12 +34,12 @@
    -
    -
    Change my borders.
    -
    +
    +
    Change my borders.
    +
    - +} - +
    diff --git a/learn/box-model/box-models.html b/learn/box-model/box-models.html index f3509042..4ccf23ef 100644 --- a/learn/box-model/box-models.html +++ b/learn/box-model/box-models.html @@ -1,4 +1,4 @@ - + @@ -24,11 +24,11 @@
    -
    I use the standard box model.
    -
    I use the alternate box model.
    +
    I use the standard box model.
    +
    I use the alternate box model.
    - +} - +
    I use the alternate box model.
    diff --git a/learn/box-model/inline-block-nav.html b/learn/box-model/inline-block-nav.html index 6de6a2a2..aa4b3c56 100644 --- a/learn/box-model/inline-block-nav.html +++ b/learn/box-model/inline-block-nav.html @@ -1,26 +1,26 @@ - + Box Model: Inline block for navigation items @@ -41,10 +40,10 @@
  27. Link two
  28. Link three
    29. - + - +} - +
    diff --git a/learn/box-model/inline-block.html b/learn/box-model/inline-block.html index f0bb6f50..37b5748d 100644 --- a/learn/box-model/inline-block.html +++ b/learn/box-model/inline-block.html @@ -1,18 +1,17 @@ - + Box Model: Inline boxes

    - I am a paragraph and this is a span inside that paragraph. A span is an inline element and so does not respect width and height. -

    + I am a paragraph and this is a span inside that paragraph. + A span is an inline element and so does not respect width and height. +

    - +} - + I am a paragraph and this is a span inside that paragraph. A span is an inline element and so does not respect width and height. +

    diff --git a/learn/box-model/inline-box-model.html b/learn/box-model/inline-box-model.html index 3430efcd..d300c398 100644 --- a/learn/box-model/inline-box-model.html +++ b/learn/box-model/inline-box-model.html @@ -1,18 +1,17 @@ - + Box Model: Inline boxes

    - I am a paragraph and this is a span inside that paragraph. A span is an inline element and so does not respect width and height. -

    + I am a paragraph and this is a span inside that paragraph. + A span is an inline element and so does not respect width and height. +

    - +} - + I am a paragraph and this is a span inside that paragraph. A span is an inline element and so does not respect width and height. +

    diff --git a/learn/box-model/inline.html b/learn/box-model/inline.html index c11d731b..249a428e 100644 --- a/learn/box-model/inline.html +++ b/learn/box-model/inline.html @@ -1,4 +1,4 @@ - + @@ -7,7 +7,7 @@

    - I am a paragraph. Some of the - words have been wrapped in a - span element. -

    + I am a paragraph. Some of the + words have been wrapped in a span element. +

    • Item One
    • Item Two
      • @@ -45,8 +44,8 @@

      I am another paragraph. Also a short one.

    - +} - +

    I am another paragraph. Also a short one.

    diff --git a/learn/box-model/margin-collapse.html b/learn/box-model/margin-collapse.html index e496f1eb..04383b50 100644 --- a/learn/box-model/margin-collapse.html +++ b/learn/box-model/margin-collapse.html @@ -1,4 +1,4 @@ - + @@ -30,28 +30,27 @@
    -
    -

    I am paragraph one.

    -

    I am paragraph two.

    -
    +
    +

    I am paragraph one.

    +

    I am paragraph two.

    +
    - +} - +
    diff --git a/learn/box-model/margin.html b/learn/box-model/margin.html index 9b34247b..e34a3936 100644 --- a/learn/box-model/margin.html +++ b/learn/box-model/margin.html @@ -1,4 +1,4 @@ - + @@ -30,25 +30,24 @@
    -
    -
    Change my margin.
    -
    +
    +
    Change my margin.
    +
    - +} - +
    diff --git a/learn/box-model/padding.html b/learn/box-model/padding.html index 45341a4b..7b6de4ec 100644 --- a/learn/box-model/padding.html +++ b/learn/box-model/padding.html @@ -1,4 +1,4 @@ - + @@ -32,12 +32,12 @@
    -
    -
    Change my padding.
    -
    +
    +
    Change my padding.
    +
    - +} - +
    diff --git a/learn/cascade/all.html b/learn/cascade/all.html index 49c60149..b0ba70d6 100644 --- a/learn/cascade/all.html +++ b/learn/cascade/all.html @@ -1,62 +1,59 @@ - + - + all - - + + - + - +
    -
    -

    This blockquote is styled

    -
    +
    +

    This blockquote is styled

    +
    -
    -

    This blockquote is not styled

    -
    +
    +

    This blockquote is not styled

    +
    - + all: unset; +} - +
    +

    This blockquote is not styled

    +
    - +
    - - - + + diff --git a/learn/cascade/cascade-layers.html b/learn/cascade/cascade-layers.html index c3729224..414dae68 100644 --- a/learn/cascade/cascade-layers.html +++ b/learn/cascade/cascade-layers.html @@ -1,56 +1,55 @@ - + - + cascade layers demo - - + + - + - -
    -

    - A paragraph with a border and background -

    -
    + +
    +

    A paragraph with a border and background

    +
    - +} - +

    - +
    - - - + + diff --git a/learn/cascade/cascade-simple.html b/learn/cascade/cascade-simple.html index 24c30742..81be7678 100644 --- a/learn/cascade/cascade-simple.html +++ b/learn/cascade/cascade-simple.html @@ -1,46 +1,43 @@ - + - + The Cascade: simple example - - + + - + - +
    -

    This is my heading.

    +

    This is my heading.

    - +h1 { + color: blue; +} - +
    - +
    - - - - \ No newline at end of file + + + diff --git a/learn/cascade/important.html b/learn/cascade/important.html index bb670011..44138d7f 100644 --- a/learn/cascade/important.html +++ b/learn/cascade/important.html @@ -1,15 +1,39 @@ - + - + !important - - + + + + + +
    +

    This is a paragraph.

    +

    One selector to rule them all!

    +
    + + - -
    -

    This is a paragraph.

    -

    One selector to rule them all!

    -
    - - - - +

    One selector to rule them all!

    - +
    - - - - \ No newline at end of file + + + diff --git a/learn/cascade/inheritance-simple.html b/learn/cascade/inheritance-simple.html index f0f9f9a4..b4f2934f 100644 --- a/learn/cascade/inheritance-simple.html +++ b/learn/cascade/inheritance-simple.html @@ -1,50 +1,53 @@ - + - + Inheritance: simple example - - + + - + - +
    -

    As the body has been set to have a color of blue this is inherited through the descendants.

    -

    We can change the color by targeting the element with a selector, such as this span.

    +

    + As the body has been set to have a color of blue this is inherited + through the descendants. +

    +

    + We can change the color by targeting the element with a selector, such + as this span. +

    - + color: black; +} - +

    We can change the color by targeting the element with a selector, such as this span.

    - +
    - - - + + diff --git a/learn/cascade/inheritance.html b/learn/cascade/inheritance.html index 8f9d7596..5164235b 100644 --- a/learn/cascade/inheritance.html +++ b/learn/cascade/inheritance.html @@ -1,92 +1,92 @@ - + - + Inheritance - - + + - + - +
    -
      -
    • Item One
      • -
    • Item Two -
        -
      • 2.1
        • -
      • 2.2
        • -
      -
      • -
    • Item Three -
        -
      • 3.1 -
          -
        • 3.1.1
          • -
        • 3.1.2
          • -
        -
        • -
      • 3.2
        • -
      +
        +
      • Item One
        • +
      • + Item Two +
          +
        • 2.1
          • +
        • 2.2
          • +
        +
        • +
      • + Item Three +
          +
        • + 3.1 +
            +
          • 3.1.1
            • +
          • 3.1.2
            • +
          • -
        +
      • 3.2
        • +
      +
      • +
    - + color: black; + font-weight: bold; +} - + +
  29. 3.2
    30. + + +
    - +
    - - - - \ No newline at end of file + + + diff --git a/learn/cascade/keywords.html b/learn/cascade/keywords.html index 71b9746d..2c625524 100644 --- a/learn/cascade/keywords.html +++ b/learn/cascade/keywords.html @@ -1,74 +1,71 @@ - + - + Keyword values - - + + - + - +
    -
      -
    • Default link color
      • -
    • Inherit the link color
      • -
    • Reset the link color
      • -
    • Unset the link color
      • -
    +
      +
    • Default link color
      • +
    • Inherit the link color
      • +
    • Reset the link color
      • +
    • Unset the link color
      • +
    - + color: unset; +} - +
  30. Default link color
    31. +
  31. Inherit the link color
    32. +
  32. Reset the link color
    33. +
  33. Unset the link color
    34. +
    - +
    - - - - \ No newline at end of file + + + diff --git a/learn/cascade/mixing-rules.html b/learn/cascade/mixing-rules.html index 4d3de8f7..7deed4ae 100644 --- a/learn/cascade/mixing-rules.html +++ b/learn/cascade/mixing-rules.html @@ -1,64 +1,61 @@ - + - + mixing rules - - + + - + - +
    -

    Heading with no class

    -

    Heading with class of small

    -

    Heading with class of bright

    +

    Heading with no class

    +

    Heading with class of small

    +

    Heading with class of bright

    - + color: rebeccapurple; +} - +

    Heading with class of bright

    - +
    - - - - \ No newline at end of file + + + diff --git a/learn/cascade/specificity-boxes.html b/learn/cascade/specificity-boxes.html index 705f2132..1de74fa2 100644 --- a/learn/cascade/specificity-boxes.html +++ b/learn/cascade/specificity-boxes.html @@ -1,15 +1,82 @@ - + - + specificity demo - - + + + + + +
    +
    +
    + +
    +
    +
    + + -/* 4. specificity: 1-1-3 */ -#outer div ul .nav a { - color: white; -} - -/* 5. specificity: 0-2-4 */ -div div li:nth-child(2) a:hover { - border: 10px solid black; -} - -/* 6. specificity: 0-2-3 */ -div li:nth-child(2) a:hover { - border: 10px dashed black; -} - -/* 7. specificity: 0-3-3 */ -div div .nav:nth-child(2) a:hover { - border: 10px double black; -} - -a { - display: inline-block; - line-height: 40px; - font-size: 20px; - text-decoration: none; - text-align: center; - width: 200px; - margin-bottom: 10px; -} - -ul { - padding: 0; -} - -li { - list-style-type: none; -} - - - +
    + +
    +
    - +
    - - - - \ No newline at end of file + + + diff --git a/learn/cascade/specificity-simple.html b/learn/cascade/specificity-simple.html index edbb02f6..14b21de4 100644 --- a/learn/cascade/specificity-simple.html +++ b/learn/cascade/specificity-simple.html @@ -1,48 +1,45 @@ - + - + Specificity: simple example - - + + - + - +
    -

    This is my heading.

    +

    This is my heading.

    - - +h1 { + color: blue; +} + +
    - +
    - - - - \ No newline at end of file + + + diff --git a/learn/cascade/task.html b/learn/cascade/task.html index 91868ba0..9cb5e943 100644 --- a/learn/cascade/task.html +++ b/learn/cascade/task.html @@ -1,29 +1,27 @@ - + - + The Cascade Task - - + + - + - +
    @@ -35,7 +33,7 @@
    - +} - +
    - +
    - - - - \ No newline at end of file + + + diff --git a/learn/getting-started--download.html b/learn/getting-started--download.html index ca443d80..239ec281 100644 --- a/learn/getting-started--download.html +++ b/learn/getting-started--download.html @@ -1,25 +1,28 @@ - + - + Getting started with CSS - - - + +

    I am a level one heading

    -

    This is a paragraph of text. In the text is a span element and also a link.

    +

    + This is a paragraph of text. In the text is a + span element and also a + link. +

    -

    This is the second paragraph. It contains an emphasized element.

    +

    + This is the second paragraph. It contains an emphasized element. +

      -
    • Item one
      • -
    • Item two
      • -
    • Item three
      • +
    • Item one
      • +
    • Item two
      • +
    • Item three
    - - - - \ No newline at end of file + + diff --git a/learn/getting-started/biog-download.html b/learn/getting-started/biog-download.html index 42b46a93..6c13f6be 100644 --- a/learn/getting-started/biog-download.html +++ b/learn/getting-started/biog-download.html @@ -1,6 +1,5 @@ - + - @@ -17,7 +16,7 @@ h1 { color: #375e97; font-size: 2em; - font-family: Georgia, 'Times New Roman', Times, serif; + font-family: Georgia, "Times New Roman", Times, serif; border-bottom: 1px solid #375e97; } @@ -42,25 +41,32 @@ -

    Jane Doe

    Web Developer
    -

    Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.

    +

    + Far far away, behind the word mountains, far from the countries Vokalia + and Consonantia, there live the blind texts. Separated they live in + Bookmarksgrove right at the coast of the Semantics, a large language + ocean. +

    -

    A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. +

    + A small river named Duden flows by their place and supplies it with the + necessary regelialia. It is a paradisematic country, in which roasted + parts of sentences fly into your mouth.

    Contact information

    - - - \ No newline at end of file + diff --git a/learn/getting-started/biog.html b/learn/getting-started/biog.html index 12bfc927..b66e88ee 100644 --- a/learn/getting-started/biog.html +++ b/learn/getting-started/biog.html @@ -1,92 +1,100 @@ - + - + Formatting a biography - - + + - + - +
    -

    Jane Doe

    -
    Web Developer
    -

    Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.

    - -

    A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.

    - -

    Contact information

    - +

    Jane Doe

    +
    Web Developer
    +

    + Far far away, behind the word mountains, far from the countries Vokalia + and Consonantia, there live the blind texts. Separated they live in + Bookmarksgrove right at the coast of the Semantics, a large language + ocean. +

    + +

    + A small river named Duden flows by their place and supplies it with the + necessary regelialia. It is a paradisematic country, in which roasted + parts of sentences fly into your mouth. +

    + +

    Contact information

    +
    - + text-decoration: none; +} - +
  34. Email: jane@example.com
    35. +
  35. Web: http://example.com
    36. +
  36. Tel: 123 45678
    37. +
    - +
    - - - - \ No newline at end of file + + + diff --git a/learn/getting-started/experiment-sandbox.html b/learn/getting-started/experiment-sandbox.html index 16b851c6..09a83286 100644 --- a/learn/getting-started/experiment-sandbox.html +++ b/learn/getting-started/experiment-sandbox.html @@ -1,42 +1,40 @@ - + - + Unstyled example - - + - + - +
    -

    Create your test HTML here

    +

    Create your test HTML here

    - +} - +
    - +
    - - - + + diff --git a/learn/getting-started/started1.html b/learn/getting-started/started1.html index 37b43c71..4fecd6fa 100644 --- a/learn/getting-started/started1.html +++ b/learn/getting-started/started1.html @@ -1,68 +1,70 @@ - + - + Unstyled example - - + - + - +
    -

    I am a level one heading

    +

    I am a level one heading

    -

    This is a paragraph of text. In the text is a span element -and also a link.

    +

    + This is a paragraph of text. In the text is a + span element and also a + link. +

    -

    This is the second paragraph. It contains an emphasized element.

    +

    + This is the second paragraph. It contains an + emphasized element. +

    -
      +
      • Item one
      • Item two
      • Item three
        • -
      +
    - - + + +
  37. Item one
    38. +
  38. Item two
    39. +
  39. Item three
    40. +
    - +
    - - - - \ No newline at end of file + + + diff --git a/learn/getting-started/started2.html b/learn/getting-started/started2.html index 3a13cb7f..10134dd1 100644 --- a/learn/getting-started/started2.html +++ b/learn/getting-started/started2.html @@ -1,68 +1,72 @@ - + - + Styling based on location - - + - + - +
    -

    I am a level one heading

    +

    I am a level one heading

    -

    This is a paragraph of text. In the text is a span element -and also a link.

    +

    + This is a paragraph of text. In the text is a + span element and also a + link. +

    -

    This is the second paragraph. It contains an emphasized element.

    +

    + This is the second paragraph. It contains an + emphasized element. +

    -
      +
      • Item one
      • Item two
      • Item three
        • -
      +
    - + font-size: 200%; +} - +
  40. Item one
    41. +
  41. Item two
    42. +
  42. Item three
    43. +
    - +
    - - - - \ No newline at end of file + + + diff --git a/learn/getting-started/started3.html b/learn/getting-started/started3.html index a44130d4..b4602ed7 100644 --- a/learn/getting-started/started3.html +++ b/learn/getting-started/started3.html @@ -1,76 +1,80 @@ - + - + Styling based on state - - + - + - +
    -

    I am a level one heading

    +

    I am a level one heading

    -

    This is a paragraph of text. In the text is a span element -and also a link.

    +

    + This is a paragraph of text. In the text is a + span element and also a + link. +

    -

    This is the second paragraph. It contains an emphasized element.

    +

    + This is the second paragraph. It contains an + emphasized element. +

    -
      +
      • Item one
      • Item two
      • Item three
        • -
      +
    - + text-decoration: none; +} - +
  43. Item one
    44. +
  44. Item two
    45. +
  45. Item three
    46. +
    - +
    - - - - \ No newline at end of file + + + diff --git a/learn/images/filter-text.html b/learn/images/filter-text.html index 6eb5fb52..98b0c9bb 100644 --- a/learn/images/filter-text.html +++ b/learn/images/filter-text.html @@ -1,4 +1,4 @@ - + @@ -13,7 +13,7 @@ padding: 20px; width: 100px; display: inline-block; - } + } @@ -36,23 +36,24 @@

    Box shadow

    - +} - +

    Box shadow

    diff --git a/learn/images/filter.html b/learn/images/filter.html index 6c8690f8..c4eddb0a 100644 --- a/learn/images/filter.html +++ b/learn/images/filter.html @@ -1,4 +1,4 @@ - + @@ -22,7 +22,6 @@ .box { border: 5px solid darkblue; } - @@ -45,16 +45,18 @@
    -
    -
    -
    -
    +
    + +
    +
    + +
    -
    +
    - +} - +
    diff --git a/learn/images/layout.html b/learn/images/layout.html index ae45ef9c..7d21d56e 100644 --- a/learn/images/layout.html +++ b/learn/images/layout.html @@ -1,4 +1,4 @@ - + @@ -8,7 +8,6 @@ * { box-sizing: border-box; } - @@ -29,14 +28,14 @@
    - star + star
    - +} - +
    diff --git a/learn/images/object-fit.html b/learn/images/object-fit.html index 38c2bd1f..032d7163 100644 --- a/learn/images/object-fit.html +++ b/learn/images/object-fit.html @@ -1,4 +1,4 @@ - + @@ -21,7 +21,6 @@ .box { border: 5px solid darkblue; } - @@ -38,27 +36,27 @@
    -
    star
    -
    balloons
    +
    star
    +
    balloons
    - +} - +
    diff --git a/learn/inspecting/inspecting.html b/learn/inspecting/inspecting.html index 745e4bf1..832ce265 100644 --- a/learn/inspecting/inspecting.html +++ b/learn/inspecting/inspecting.html @@ -1,76 +1,80 @@ - + - + Inspecting CSS + - - - +
    -
    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi - tomatillo - melon azuki bean garlic.

    -
    - -
    -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean - collard - greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    -
    +
    +

    + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh + onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. +

    +
    -

    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach - avocado - daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish - spinach - carrot soko. +

    +

    + Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot + courgette tatsoi pea sprouts fava bean collard greens dandelion okra + wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    +
    +

    + Turnip greens yarrow ricebean rutabaga endive + cauliflower sea lettuce kohlrabi amaranth water spinach avocado + daikon napa cabbage asparagus winter purslane kale. Celery potato + scallion desert raisin horseradish spinach carrot soko. +

    - + diff --git a/learn/layers/basic-cascade.html b/learn/layers/basic-cascade.html index 563575b7..3ae9019f 100644 --- a/learn/layers/basic-cascade.html +++ b/learn/layers/basic-cascade.html @@ -1,44 +1,41 @@ - + - + Cascade Layers: basic cascade origin - - + + - + - +

    User agent styles

    Author styles

    - + - +
    - +
    - - - - \ No newline at end of file + + + diff --git a/learn/layers/layer-order.html b/learn/layers/layer-order.html index d4df7e95..6509d23e 100644 --- a/learn/layers/layer-order.html +++ b/learn/layers/layer-order.html @@ -1,65 +1,61 @@ - + - + Cascade Layers: layer order - - + + - + - +

    Is this heading underlined?

    - +/* this does nothing */ +@layer site, page; - +
    - +
    - - - - \ No newline at end of file + + + diff --git a/learn/layers/layer-precedence.html b/learn/layers/layer-precedence.html index 7de89338..96d3ae0d 100644 --- a/learn/layers/layer-precedence.html +++ b/learn/layers/layer-precedence.html @@ -1,36 +1,77 @@ - + - + Cascade Layers: layer precedence - - + + + + + +
    +
    +

    + Inline styles +

    +
    +
    + + - -
    + - - +

    Inline styles

    +
    - +
    - - - - \ No newline at end of file + + + diff --git a/learn/layers/media-order.html b/learn/layers/media-order.html index bb60b181..4f61deb6 100644 --- a/learn/layers/media-order.html +++ b/learn/layers/media-order.html @@ -1,69 +1,64 @@ - + - + Cascade Layers: layer order - - + + - + - +

    Site layer is first on wide screens

    - +@layer page { + h1 { + text-decoration: overline; + color: red; + } +} + +@layer site { + h1 { + text-decoration: underline; + color: green; + } +} - +
    - +
    - - - - \ No newline at end of file + + + diff --git a/learn/media-queries/and.html b/learn/media-queries/and.html index 6353fe5f..940db9a4 100644 --- a/learn/media-queries/and.html +++ b/learn/media-queries/and.html @@ -1,6 +1,6 @@ - + - + Media Queries: and @@ -15,15 +15,21 @@ } } - - - - - -

    One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.

    -

    Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”

    - - - + + +

    + One November night in the year 1782, so the story runs, two brothers sat + over their winter fire in the little French town of Annonay, watching the + grey smoke-wreaths from the hearth curl up the wide chimney. Their names + were Stephen and Joseph Montgolfier, they were papermakers by trade, and + were noted as possessing thoughtful minds and a deep interest in all + scientific knowledge and new discovery. +

    +

    + Before that night—a memorable night, as it was to prove—hundreds of + millions of people had watched the rising smoke-wreaths of their fires + without drawing any special inspiration from the fact.” +

    + diff --git a/learn/media-queries/grid.html b/learn/media-queries/grid.html index 63be26af..954d6ec1 100644 --- a/learn/media-queries/grid.html +++ b/learn/media-queries/grid.html @@ -1,9 +1,11 @@ - + - Media Queries: a simple mobile first design, adding a grid component + + Media Queries: a simple mobile first design, adding a grid component + - + - - - -

    One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.

    -

    Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”

    - - - - - \ No newline at end of file + +

    + One November night in the year 1782, so the story runs, two brothers sat + over their winter fire in the little French town of Annonay, watching the + grey smoke-wreaths from the hearth curl up the wide chimney. Their names + were Stephen and Joseph Montgolfier, they were papermakers by trade, and + were noted as possessing thoughtful minds and a deep interest in all + scientific knowledge and new discovery. +

    +

    + Before that night—a memorable night, as it was to prove—hundreds of + millions of people had watched the rising smoke-wreaths of their fires + without drawing any special inspiration from the fact.” +

    + + diff --git a/learn/media-queries/max-width.html b/learn/media-queries/max-width.html index f267e2d1..193a3e97 100644 --- a/learn/media-queries/max-width.html +++ b/learn/media-queries/max-width.html @@ -1,6 +1,6 @@ - + - + Media Queries: max-width @@ -15,15 +15,21 @@ } } - - - - - -

    One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.

    -

    Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”

    - - - + + +

    + One November night in the year 1782, so the story runs, two brothers sat + over their winter fire in the little French town of Annonay, watching the + grey smoke-wreaths from the hearth curl up the wide chimney. Their names + were Stephen and Joseph Montgolfier, they were papermakers by trade, and + were noted as possessing thoughtful minds and a deep interest in all + scientific knowledge and new discovery. +

    +

    + Before that night—a memorable night, as it was to prove—hundreds of + millions of people had watched the rising smoke-wreaths of their fires + without drawing any special inspiration from the fact.” +

    + diff --git a/learn/media-queries/not.html b/learn/media-queries/not.html index cc34b88f..fbc78fe2 100644 --- a/learn/media-queries/not.html +++ b/learn/media-queries/not.html @@ -1,6 +1,6 @@ - + - + Media Queries: not @@ -12,18 +12,24 @@ @media not all and (orientation: landscape) { body { color: blue; - } + } } - + - - - -

    One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.

    -

    Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”

    - - - - - \ No newline at end of file + +

    + One November night in the year 1782, so the story runs, two brothers sat + over their winter fire in the little French town of Annonay, watching the + grey smoke-wreaths from the hearth curl up the wide chimney. Their names + were Stephen and Joseph Montgolfier, they were papermakers by trade, and + were noted as possessing thoughtful minds and a deep interest in all + scientific knowledge and new discovery. +

    +

    + Before that night—a memorable night, as it was to prove—hundreds of + millions of people had watched the rising smoke-wreaths of their fires + without drawing any special inspiration from the fact.” +

    + + diff --git a/learn/media-queries/or.html b/learn/media-queries/or.html index 3c8f8c2b..610fda4c 100644 --- a/learn/media-queries/or.html +++ b/learn/media-queries/or.html @@ -1,6 +1,6 @@ - + - + Media Queries: or @@ -9,21 +9,28 @@ font-size: 1em; } - @media screen and (min-width: 600px), screen and (orientation: landscape) { + @media screen and (min-width: 600px), + screen and (orientation: landscape) { body { color: blue; } } - - - - - -

    One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.

    -

    Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”

    - - - + + +

    + One November night in the year 1782, so the story runs, two brothers sat + over their winter fire in the little French town of Annonay, watching the + grey smoke-wreaths from the hearth curl up the wide chimney. Their names + were Stephen and Joseph Montgolfier, they were papermakers by trade, and + were noted as possessing thoughtful minds and a deep interest in all + scientific knowledge and new discovery. +

    +

    + Before that night—a memorable night, as it was to prove—hundreds of + millions of people had watched the rising smoke-wreaths of their fires + without drawing any special inspiration from the fact.” +

    + diff --git a/learn/media-queries/orientation.html b/learn/media-queries/orientation.html index 5fd0e476..093dd828 100644 --- a/learn/media-queries/orientation.html +++ b/learn/media-queries/orientation.html @@ -1,6 +1,6 @@ - + - + Media Queries: orientation @@ -9,21 +9,27 @@ font-size: 1em; } - @media(orientation: landscape) { + @media (orientation: landscape) { body { color: rebeccapurple; } } - + - - - -

    One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.

    -

    Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”

    - - - - - \ No newline at end of file + +

    + One November night in the year 1782, so the story runs, two brothers sat + over their winter fire in the little French town of Annonay, watching the + grey smoke-wreaths from the hearth curl up the wide chimney. Their names + were Stephen and Joseph Montgolfier, they were papermakers by trade, and + were noted as possessing thoughtful minds and a deep interest in all + scientific knowledge and new discovery. +

    +

    + Before that night—a memorable night, as it was to prove—hundreds of + millions of people had watched the rising smoke-wreaths of their fires + without drawing any special inspiration from the fact.” +

    + + diff --git a/learn/media-queries/step1.html b/learn/media-queries/step1.html index dc8fbf55..36f5e01f 100644 --- a/learn/media-queries/step1.html +++ b/learn/media-queries/step1.html @@ -1,4 +1,4 @@ - + @@ -12,7 +12,10 @@ body { width: 90%; margin: 2em auto; - font: 1em/1.3 Arial, Helvetica, sans-serif; + font: + 1em/1.3 Arial, + Helvetica, + sans-serif; } a:link, @@ -55,7 +58,6 @@ article { margin-bottom: 1em; } - diff --git a/learn/media-queries/step2.html b/learn/media-queries/step2.html index 0c12f91f..e99bc752 100644 --- a/learn/media-queries/step2.html +++ b/learn/media-queries/step2.html @@ -1,4 +1,4 @@ - + @@ -12,7 +12,10 @@ body { width: 90%; margin: 2em auto; - font: 1em/1.3 Arial, Helvetica, sans-serif; + font: + 1em/1.3 Arial, + Helvetica, + sans-serif; } a:link, @@ -71,7 +74,6 @@ flex: 1; } } - diff --git a/learn/media-queries/step3.html b/learn/media-queries/step3.html index 426efcf1..12765abe 100644 --- a/learn/media-queries/step3.html +++ b/learn/media-queries/step3.html @@ -1,4 +1,4 @@ - + @@ -12,7 +12,10 @@ body { width: 90%; margin: 2em auto; - font: 1em/1.3 Arial, Helvetica, sans-serif; + font: + 1em/1.3 Arial, + Helvetica, + sans-serif; } a:link, @@ -88,7 +91,6 @@ margin-top: 2em; } } - diff --git a/learn/media-queries/width.html b/learn/media-queries/width.html index 1d223b0d..6a212df4 100644 --- a/learn/media-queries/width.html +++ b/learn/media-queries/width.html @@ -1,6 +1,6 @@ - + - + Media Queries: width @@ -15,15 +15,21 @@ } } - + - - - -

    One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.

    -

    Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”

    - - - - - \ No newline at end of file + +

    + One November night in the year 1782, so the story runs, two brothers sat + over their winter fire in the little French town of Annonay, watching the + grey smoke-wreaths from the hearth curl up the wide chimney. Their names + were Stephen and Joseph Montgolfier, they were papermakers by trade, and + were noted as possessing thoughtful minds and a deep interest in all + scientific knowledge and new discovery. +

    +

    + Before that night—a memorable night, as it was to prove—hundreds of + millions of people had watched the rising smoke-wreaths of their fires + without drawing any special inspiration from the fact.” +

    + + diff --git a/learn/overflow/auto.html b/learn/overflow/auto.html index 12feff2e..0133ba70 100644 --- a/learn/overflow/auto.html +++ b/learn/overflow/auto.html @@ -1,12 +1,10 @@ - + Overflow: auto - + + + + + + + - - - + +
    -

    This layout is fixed width. See what happens if you make the browser window narrow.

    +

    + This layout is fixed width. See what happens if you make the browser + window narrow. +

    -

    One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.

    -

    Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”

    +

    + One November night in the year 1782, so the story runs, two brothers + sat over their winter fire in the little French town of Annonay, + watching the grey smoke-wreaths from the hearth curl up the wide + chimney. Their names were Stephen and Joseph Montgolfier, they were + papermakers by trade, and were noted as possessing thoughtful minds + and a deep interest in all scientific knowledge and new discovery. +

    +

    + Before that night—a memorable night, as it was to prove—hundreds of + millions of people had watched the rising smoke-wreaths of their fires + without drawing any special inspiration from the fact.” +

    -
    - - - \ No newline at end of file + + diff --git a/learn/rwd/flex-based-rwd.html b/learn/rwd/flex-based-rwd.html index 232f5802..639c9da2 100644 --- a/learn/rwd/flex-based-rwd.html +++ b/learn/rwd/flex-based-rwd.html @@ -1,12 +1,15 @@ - + - + A simple flexbox-based responsive design - - - + +
    -

    This layout is responsive. See what happens if you make the browser window wider or narrow.

    +

    + This layout is responsive. See what happens if you make the browser + window wider or narrow. +

    -

    One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.

    -

    Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”

    +

    + One November night in the year 1782, so the story runs, two brothers + sat over their winter fire in the little French town of Annonay, + watching the grey smoke-wreaths from the hearth curl up the wide + chimney. Their names were Stephen and Joseph Montgolfier, they were + papermakers by trade, and were noted as possessing thoughtful minds + and a deep interest in all scientific knowledge and new discovery. +

    +

    + Before that night—a memorable night, as it was to prove—hundreds of + millions of people had watched the rising smoke-wreaths of their fires + without drawing any special inspiration from the fact.” +

    -
    - - - \ No newline at end of file + + diff --git a/learn/rwd/float-based-rwd.html b/learn/rwd/float-based-rwd.html index ecdd20ca..0dc8bd70 100644 --- a/learn/rwd/float-based-rwd.html +++ b/learn/rwd/float-based-rwd.html @@ -1,12 +1,15 @@ - + - + A simple float-based responsive design - - - + +
    -

    This layout is responsive. See what happens if you make the browser window wider or narrow.

    +

    + This layout is responsive. See what happens if you make the browser + window wider or narrow. +

    -

    One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.

    -

    Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”

    +

    + One November night in the year 1782, so the story runs, two brothers + sat over their winter fire in the little French town of Annonay, + watching the grey smoke-wreaths from the hearth curl up the wide + chimney. Their names were Stephen and Joseph Montgolfier, they were + papermakers by trade, and were noted as possessing thoughtful minds + and a deep interest in all scientific knowledge and new discovery. +

    +

    + Before that night—a memorable night, as it was to prove—hundreds of + millions of people had watched the rising smoke-wreaths of their fires + without drawing any special inspiration from the fact.” +

    -
    - - - \ No newline at end of file + + diff --git a/learn/rwd/grid-based-rwd.html b/learn/rwd/grid-based-rwd.html index 0e863365..2ba9d88c 100644 --- a/learn/rwd/grid-based-rwd.html +++ b/learn/rwd/grid-based-rwd.html @@ -1,12 +1,15 @@ - + - + A simple grid-based responsive design - - - + +
    -

    This layout is responsive. See what happens if you make the browser window wider or narrow.

    +

    + This layout is responsive. See what happens if you make the browser + window wider or narrow. +

    -

    One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.

    -

    Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”

    +

    + One November night in the year 1782, so the story runs, two brothers + sat over their winter fire in the little French town of Annonay, + watching the grey smoke-wreaths from the hearth curl up the wide + chimney. Their names were Stephen and Joseph Montgolfier, they were + papermakers by trade, and were noted as possessing thoughtful minds + and a deep interest in all scientific knowledge and new discovery. +

    +

    + Before that night—a memorable night, as it was to prove—hundreds of + millions of people had watched the rising smoke-wreaths of their fires + without drawing any special inspiration from the fact.” +

    -
    - - - \ No newline at end of file + + diff --git a/learn/rwd/liquid-width.html b/learn/rwd/liquid-width.html index ba27765a..f47b1b13 100644 --- a/learn/rwd/liquid-width.html +++ b/learn/rwd/liquid-width.html @@ -1,12 +1,15 @@ - + - + A liquid layout - - - + +
    -

    This layout is liquid. See what happens if you make the browser window wider or narrow.

    +

    + This layout is liquid. See what happens if you make the browser window + wider or narrow. +

    -

    One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.

    -

    Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”

    +

    + One November night in the year 1782, so the story runs, two brothers + sat over their winter fire in the little French town of Annonay, + watching the grey smoke-wreaths from the hearth curl up the wide + chimney. Their names were Stephen and Joseph Montgolfier, they were + papermakers by trade, and were noted as possessing thoughtful minds + and a deep interest in all scientific knowledge and new discovery. +

    +

    + Before that night—a memorable night, as it was to prove—hundreds of + millions of people had watched the rising smoke-wreaths of their fires + without drawing any special inspiration from the fact.” +

    -
    - - - \ No newline at end of file + + diff --git a/learn/rwd/type-rwd.html b/learn/rwd/type-rwd.html index 962f6a85..676f6552 100644 --- a/learn/rwd/type-rwd.html +++ b/learn/rwd/type-rwd.html @@ -1,6 +1,6 @@ - + - + Demonstration of responsive typography @@ -10,7 +10,10 @@ } body { - font: 1.2em Helvetica, Arial, sans-serif; + font: + 1.2em Helvetica, + Arial, + sans-serif; margin: 20px; padding: 0; background-color: #eee; @@ -42,21 +45,32 @@ } } - - - + +

    Watch my size!

    -

    This layout is responsive. See what happens if you make the browser window wider or narrow.

    +

    + This layout is responsive. See what happens if you make the browser + window wider or narrow. +

    -

    One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.

    -

    Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”

    +

    + One November night in the year 1782, so the story runs, two brothers + sat over their winter fire in the little French town of Annonay, + watching the grey smoke-wreaths from the hearth curl up the wide + chimney. Their names were Stephen and Joseph Montgolfier, they were + papermakers by trade, and were noted as possessing thoughtful minds + and a deep interest in all scientific knowledge and new discovery. +

    +

    + Before that night—a memorable night, as it was to prove—hundreds of + millions of people had watched the rising smoke-wreaths of their fires + without drawing any special inspiration from the fact.” +

    -
    - - - \ No newline at end of file + + diff --git a/learn/rwd/type-vw.html b/learn/rwd/type-vw.html index efe54604..c18d6a1e 100644 --- a/learn/rwd/type-vw.html +++ b/learn/rwd/type-vw.html @@ -1,6 +1,6 @@ - + - + Demonstration of responsive typography with vw @@ -10,7 +10,10 @@ } body { - font: 1.2em Helvetica, Arial, sans-serif; + font: + 1.2em Helvetica, + Arial, + sans-serif; margin: 20px; padding: 0; background-color: #eee; @@ -38,21 +41,32 @@ } } - - - + +

    Watch my size!

    -

    This layout is responsive. See what happens if you make the browser window wider or narrow.

    +

    + This layout is responsive. See what happens if you make the browser + window wider or narrow. +

    -

    One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.

    -

    Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”

    +

    + One November night in the year 1782, so the story runs, two brothers + sat over their winter fire in the little French town of Annonay, + watching the grey smoke-wreaths from the hearth curl up the wide + chimney. Their names were Stephen and Joseph Montgolfier, they were + papermakers by trade, and were noted as possessing thoughtful minds + and a deep interest in all scientific knowledge and new discovery. +

    +

    + Before that night—a memorable night, as it was to prove—hundreds of + millions of people had watched the rising smoke-wreaths of their fires + without drawing any special inspiration from the fact.” +

    -
    - - - \ No newline at end of file + + diff --git a/learn/selectors/adjacent.html b/learn/selectors/adjacent.html index 7cbd4702..1e339b70 100644 --- a/learn/selectors/adjacent.html +++ b/learn/selectors/adjacent.html @@ -1,61 +1,62 @@ - + - + - Selectors: Adjacent Combinator - - + Selectors: Adjacent Combinator + + - + - +
    -
    +

    A heading

    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo - melon azuki bean garlic.

    - -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard - greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    -
    +

    + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh + onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. +

    + +

    + Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot + courgette tatsoi pea sprouts fava bean collard greens dandelion okra + wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. +

    +
    - - - + + +
    - +
    - - - - \ No newline at end of file + + + diff --git a/learn/selectors/after-icon.html b/learn/selectors/after-icon.html index c035eca2..e52cd67c 100644 --- a/learn/selectors/after-icon.html +++ b/learn/selectors/after-icon.html @@ -1,41 +1,37 @@ - + - + Selectors: ::after - - + + - + - +
    -

    Content in the box in my HTML page.

    +

    Content in the box in my HTML page.

    - + content: " ➥"; +} - +
    - +
    - - - + + diff --git a/learn/selectors/attribute-case.html b/learn/selectors/attribute-case.html index 38b5cf45..b6f7d946 100644 --- a/learn/selectors/attribute-case.html +++ b/learn/selectors/attribute-case.html @@ -1,60 +1,55 @@ - + - + Selectors: case-insensitivity - - + + - + - +
    -

    Case-insensitivity

    -
      -
    • Item 1
      • -
    • Item 2
      • -
    • Item 3
      • -
    - +

    Case-insensitivity

    +
      +
    • Item 1
      • +
    • Item 2
      • +
    • Item 3
      • +
    - + color: red; +} - +
  46. Item 1
    47. +
  47. Item 2
    48. +
  48. Item 3
    49. +
    - +
    - - - - \ No newline at end of file + + + diff --git a/learn/selectors/attribute-links.html b/learn/selectors/attribute-links.html index b76c094f..3af2286b 100644 --- a/learn/selectors/attribute-links.html +++ b/learn/selectors/attribute-links.html @@ -1,65 +1,64 @@ - + - + Selectors: attribute selectors - + - - + - +
    - - - +
    - + border: 5px solid grey; +} - +
  49. Link 1
    50. +
  50. Link 2
    51. +
  51. Link 3
    52. +
  52. Link 4
    53. +
    - +
    - - - - \ No newline at end of file + + + diff --git a/learn/selectors/attribute-substring.html b/learn/selectors/attribute-substring.html index d639d6cb..d62542bf 100644 --- a/learn/selectors/attribute-substring.html +++ b/learn/selectors/attribute-substring.html @@ -1,70 +1,65 @@ - + - + Selectors: substring matching selectors - - + + - + - +
    -

    Attribute substring matching selectors

    -
      -
    • Item 1
      • -
    • Item 2
      • -
    • Item 3
      • -
    • Item 4
      • -
    - +

    Attribute substring matching selectors

    +
      +
    • Item 1
      • +
    • Item 2
      • +
    • Item 3
      • +
    • Item 4
      • +
    - + color: red; +} - +
  53. Item 1
    54. +
  54. Item 2
    55. +
  55. Item 3
    56. +
  56. Item 4
    57. +
    - +
    - - - - \ No newline at end of file + + + diff --git a/learn/selectors/attribute.html b/learn/selectors/attribute.html index dae3be17..613500d6 100644 --- a/learn/selectors/attribute.html +++ b/learn/selectors/attribute.html @@ -1,70 +1,65 @@ - + - + Selectors: attribute presence and value selectors - - + + - + - +
    -

    Attribute presence and value selectors

    -
      -
    • Item 1
      • -
    • Item 2
      • -
    • Item 3
      • -
    • Item 4
      • -
    - +

    Attribute presence and value selectors

    +
      +
    • Item 1
      • +
    • Item 2
      • +
    • Item 3
      • +
    • Item 4
      • +
    - + color: red; +} - +
    - +
    - - - - \ No newline at end of file + + + diff --git a/learn/selectors/before-styled.html b/learn/selectors/before-styled.html index 016c6c9d..896e4739 100644 --- a/learn/selectors/before-styled.html +++ b/learn/selectors/before-styled.html @@ -1,51 +1,47 @@ - + - + Selectors: ::before - - + + - + - +
    -

    Content in the box in my HTML page.

    +

    Content in the box in my HTML page.

    - + content: ""; + display: block; + width: 100px; + height: 100px; + background-color: rebeccapurple; + border: 1px solid black; +} - +
    - +
    - - - - \ No newline at end of file + + + diff --git a/learn/selectors/before.html b/learn/selectors/before.html index 25fe3c28..65b45d80 100644 --- a/learn/selectors/before.html +++ b/learn/selectors/before.html @@ -1,41 +1,37 @@ - + - + Selectors: ::before - - + + - + - +
    -

    Content in the box in my HTML page.

    +

    Content in the box in my HTML page.

    - + content: "This should show before the other content. "; +} - +
    - +
    - - - + + diff --git a/learn/selectors/child.html b/learn/selectors/child.html index 72f893d2..8df17a71 100644 --- a/learn/selectors/child.html +++ b/learn/selectors/child.html @@ -1,57 +1,54 @@ - + - + Selectors: Child combinator - - + + - + - +
    -
      +
      • Unordered item
        • -
      • Unordered item -
          -
        1. Item 1
          2. -
        2. Item 2
          3. -
        +
      • + Unordered item +
          +
        1. Item 1
          2. +
        2. Item 2
          3. +
        • -
      +
    - + border-top: 5px solid red; +} - +
  57. Unordered item
    58. +
  58. Unordered item +
      +
    1. Item 1
      2. +
    2. Item 2
      3. +
    +
    59. +
    - +
    - - - - \ No newline at end of file + + + diff --git a/learn/selectors/class-many.html b/learn/selectors/class-many.html index 459d879e..89ae5303 100644 --- a/learn/selectors/class-many.html +++ b/learn/selectors/class-many.html @@ -1,55 +1,48 @@ - + - + Selectors: class - + - + - +
    -
    - This is an informational note. -
    +
    This is an informational note.
    -
    - This note shows a warning. -
    +
    This note shows a warning.
    -
    - This note shows danger! -
    +
    This note shows danger!
    - This won't get styled — it also needs to have the notebox class. + This won't get styled — it also needs to have the notebox class.
    - +} - +
    - +
    - - - + + diff --git a/learn/selectors/class-type.html b/learn/selectors/class-type.html index 7c8154ef..c4643e6e 100644 --- a/learn/selectors/class-type.html +++ b/learn/selectors/class-type.html @@ -1,59 +1,62 @@ - + - + Selectors: class - - + + - + - +
    -

    Class selectors

    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo - melon azuki bean garlic.

    - -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard - greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    +

    Class selectors

    +

    + Veggies es bonus vobis, proinde vos postulo essum magis + kohlrabi welsh onion daikon amaranth + tatsoi tomatillo melon azuki bean garlic. +

    + +

    + Gumbo beet greens corn soko endive gumbo gourd. Parsley + shallot courgette tatsoi pea sprouts fava bean collard greens dandelion + okra wakame tomato. Dandelion cucumber earthnut pea peanut soko + zucchini. +

    - + background-color: pink; +} - + greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    - +
    - - - - \ No newline at end of file + + + diff --git a/learn/selectors/class.html b/learn/selectors/class.html index 96e928c7..487009fc 100644 --- a/learn/selectors/class.html +++ b/learn/selectors/class.html @@ -1,51 +1,53 @@ - + - + Selectors: class - - + + - + - +
    -

    Class selectors

    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo - melon azuki bean garlic.

    - -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard - greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    +

    Class selectors

    +

    + Veggies es bonus vobis, proinde vos postulo essum magis + kohlrabi welsh onion daikon amaranth + tatsoi tomatillo melon azuki bean garlic. +

    + +

    + Gumbo beet greens corn soko endive gumbo gourd. Parsley + shallot courgette tatsoi pea sprouts fava bean collard greens dandelion + okra wakame tomato. Dandelion cucumber earthnut pea peanut soko + zucchini. +

    - + background-color: yellow; +} - + greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    - +
    - - - - \ No newline at end of file + + + diff --git a/learn/selectors/descendant.html b/learn/selectors/descendant.html index 99303e6c..7e929372 100644 --- a/learn/selectors/descendant.html +++ b/learn/selectors/descendant.html @@ -1,43 +1,38 @@ - + - + Selectors: Descendant combinator - - + + - + - +
    -

    Text in .box

    -

    Text not in .box

    +

    Text in .box

    +

    Text not in .box

    - + color: red; +} - +

    Text not in .box

    - +
    - - - - \ No newline at end of file + + + diff --git a/learn/selectors/first-child.html b/learn/selectors/first-child.html index 533bcac1..fdb5c64b 100644 --- a/learn/selectors/first-child.html +++ b/learn/selectors/first-child.html @@ -1,55 +1,55 @@ - + - + Selectors: :first-child example using a class - - + + - + - +
    -
    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo - melon azuki bean garlic.

    - -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard - greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    -
    +
    +

    + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh + onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. +

    + +

    + Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot + courgette tatsoi pea sprouts fava bean collard greens dandelion okra + wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. +

    +
    - + font-size: 120%; + font-weight: bold; +} - +
    - +
    - - - - \ No newline at end of file + + + diff --git a/learn/selectors/first-child2.html b/learn/selectors/first-child2.html index ac2be963..4103e40d 100644 --- a/learn/selectors/first-child2.html +++ b/learn/selectors/first-child2.html @@ -1,55 +1,56 @@ - + - + - Selectors: :first-child - - + Selectors: :first-child + + - + - +
    -
    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo - melon azuki bean garlic.

    - -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard - greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    -
    +
    +

    + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh + onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. +

    + +

    + Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot + courgette tatsoi pea sprouts fava bean collard greens dandelion okra + wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. +

    +
    - + font-size: 120%; + font-weight: bold; +} - +
    - +
    - - - - \ No newline at end of file + + + diff --git a/learn/selectors/first-line.html b/learn/selectors/first-line.html index dc91294c..81532d47 100644 --- a/learn/selectors/first-line.html +++ b/learn/selectors/first-line.html @@ -1,55 +1,56 @@ - + - + - Selectors: ::first-line - - + Selectors: ::first-line + + - + - +
    -
    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo - melon azuki bean garlic.

    - -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard - greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    -
    +
    +

    + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh + onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. +

    + +

    + Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot + courgette tatsoi pea sprouts fava bean collard greens dandelion okra + wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. +

    +
    - + font-size: 120%; + font-weight: bold; +} - +
    - +
    - - - - \ No newline at end of file + + + diff --git a/learn/selectors/general.html b/learn/selectors/general.html index 6d9386c7..2bbb454d 100644 --- a/learn/selectors/general.html +++ b/learn/selectors/general.html @@ -1,56 +1,53 @@ - + - + - Selectors: General Sibling Combinator - - + Selectors: General Sibling Combinator + + - + - +
    -
    +

    A heading

    I am a paragraph.

    I am a div

    I am another paragraph.

    -
    +
    - + font-weight: bold; + background-color: #333; + color: #fff; + padding: .5em; +} - +

    A heading

    +

    I am a paragraph.

    +
    I am a div
    +

    I am another paragraph.

    +
    - +
    - - - - \ No newline at end of file + + + diff --git a/learn/selectors/hover.html b/learn/selectors/hover.html index 96055280..3b0a2e78 100644 --- a/learn/selectors/hover.html +++ b/learn/selectors/hover.html @@ -1,53 +1,49 @@ - + - + Selectors: :hover - - + + - + - +
    -

    Hover over me

    +

    Hover over me

    - + color:hotpink; +} - +
    - +
    - - - - \ No newline at end of file + + + diff --git a/learn/selectors/id.html b/learn/selectors/id.html index 593def4b..e9159e30 100644 --- a/learn/selectors/id.html +++ b/learn/selectors/id.html @@ -1,59 +1,61 @@ - + - + Selectors: id - - + + - + - +
    -

    ID selector

    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo - melon azuki bean garlic.

    - -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard - greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    +

    ID selector

    +

    + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh + onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. +

    + +

    + Gumbo beet greens corn soko endive gumbo gourd. Parsley + shallot courgette tatsoi pea sprouts fava bean collard greens dandelion + okra wakame tomato. Dandelion cucumber earthnut pea peanut soko + zucchini. +

    - + color: rebeccapurple; +} - + greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    - +
    - - - - \ No newline at end of file + + + diff --git a/learn/selectors/nesting.html b/learn/selectors/nesting.html index f37e842d..b43672c3 100644 --- a/learn/selectors/nesting.html +++ b/learn/selectors/nesting.html @@ -1,56 +1,56 @@ - + - - - - Selectors: General Sibling Combinator - - - + + + + Selectors: General Sibling Combinator + + + - -
    -
    -

    A heading

    -

    I am a paragraph.

    -
    I am a div
    -

    I am another paragraph.

    -
    -
    + +
    +
    +

    A heading

    +

    I am a paragraph.

    +
    I am a div
    +

    I am another paragraph.

    +
    +
    - + & ~ p { /* this is parsed by the browser as h1 ~ p */ + font-weight: bold; + background-color: #333; + color: #fff; + padding: .5em; + } +} - - -
    - -
    - - + +
    + +
    + + diff --git a/learn/selectors/selector-list.html b/learn/selectors/selector-list.html index 2e75ef2b..b22b6c03 100644 --- a/learn/selectors/selector-list.html +++ b/learn/selectors/selector-list.html @@ -1,59 +1,66 @@ - + - + Selectors: selector list - - + + - + - +
    -

    Type selectors

    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo - melon azuki bean garlic.

    +

    Type selectors

    +

    + Veggies es bonus vobis, proinde vos postulo essum magis + kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon + azuki bean garlic. +

    -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard - greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    +

    + Gumbo beet greens corn soko endive gumbo gourd. Parsley + shallot courgette tatsoi pea sprouts fava bean collard greens dandelion + okra wakame tomato. Dandelion cucumber earthnut pea peanut soko + zucchini. +

    -

    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado - daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach -

    +

    + Turnip greens yarrow ricebean rutabaga endive cauliflower sea + lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage + asparagus winter purslane kale. Celery potato scallion desert raisin + horseradish spinach +

    - + color: rebeccapurple; +} - +

    - +
    - - - - \ No newline at end of file + + + diff --git a/learn/selectors/type.html b/learn/selectors/type.html index 35faf160..e3b65a1e 100644 --- a/learn/selectors/type.html +++ b/learn/selectors/type.html @@ -1,59 +1,66 @@ - + - + Selectors: type - - + + - + - +
    -

    Type selectors

    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo - melon azuki bean garlic.

    +

    Type selectors

    +

    + Veggies es bonus vobis, proinde vos postulo essum magis + kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon + azuki bean garlic. +

    -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard - greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    +

    + Gumbo beet greens corn soko endive gumbo gourd. Parsley + shallot courgette tatsoi pea sprouts fava bean collard greens dandelion + okra wakame tomato. Dandelion cucumber earthnut pea peanut soko + zucchini. +

    -

    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado - daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach -

    +

    + Turnip greens yarrow ricebean rutabaga endive cauliflower sea + lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage + asparagus winter purslane kale. Celery potato scallion desert raisin + horseradish spinach +

    - + color: rebeccapurple; +} - +

    - +
    - - - - \ No newline at end of file + + + diff --git a/learn/selectors/universal.html b/learn/selectors/universal.html index 667c6f6a..84b4a498 100644 --- a/learn/selectors/universal.html +++ b/learn/selectors/universal.html @@ -1,52 +1,53 @@ - + - + Selectors: universal - - + + - + - +
    -

    Universal selector

    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo - melon azuki bean garlic.

    - -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard - greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    - - +

    Universal selector

    +

    + Veggies es bonus vobis, proinde vos postulo essum magis + kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon + azuki bean garlic. +

    + +

    + Gumbo beet greens corn soko endive gumbo gourd. Parsley + shallot courgette tatsoi pea sprouts fava bean collard greens dandelion + okra wakame tomato. Dandelion cucumber earthnut pea peanut soko + zucchini. +

    - + margin: 0; +} - + greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    - +
    - - - - \ No newline at end of file + + + diff --git a/learn/sizing/height.html b/learn/sizing/height.html index 7dcdd06f..33c23d19 100644 --- a/learn/sizing/height.html +++ b/learn/sizing/height.html @@ -1,4 +1,4 @@ - + @@ -16,7 +16,6 @@ .wrapper > * { margin: 20px; } - @@ -30,24 +28,23 @@

    Backgrounds & Borders

    - - - + + +
    diff --git a/learn/tasks/backgrounds/backgrounds2-download.html b/learn/tasks/backgrounds/backgrounds2-download.html index 355e93db..2ad291ba 100644 --- a/learn/tasks/backgrounds/backgrounds2-download.html +++ b/learn/tasks/backgrounds/backgrounds2-download.html @@ -1,13 +1,17 @@ - + - + Backgrounds and Borders: Task 2 @@ -30,24 +28,23 @@

    Backgrounds & Borders

    - - - + + +
    diff --git a/learn/tasks/box-model/box-models-download.html b/learn/tasks/box-model/box-models-download.html index a5ab897c..fba59979 100644 --- a/learn/tasks/box-model/box-models-download.html +++ b/learn/tasks/box-model/box-models-download.html @@ -1,19 +1,23 @@ - + - + Box Model Task 1: Standard and Alternate Box Models - +
    -
    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

    - -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    -
    +
    +

    + Veggies es bonus vobis, proinde vos postulo essum magis + kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean + garlic. +

    + +

    + Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot + courgette tatsoi pea sprouts fava bean collard greens dandelion okra + wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. +

    +
    - +} - +
    diff --git a/learn/tasks/box-model/mbp-download.html b/learn/tasks/box-model/mbp-download.html index 88463f63..50ea72f3 100644 --- a/learn/tasks/box-model/mbp-download.html +++ b/learn/tasks/box-model/mbp-download.html @@ -1,27 +1,28 @@ - + - + Box Model Task 2: Margin, Border, and Padding - + -
    I use the standard box model.
    - - - \ No newline at end of file + diff --git a/learn/tasks/box-model/mbp.html b/learn/tasks/box-model/mbp.html index 3fa6e93e..f76ca3dc 100644 --- a/learn/tasks/box-model/mbp.html +++ b/learn/tasks/box-model/mbp.html @@ -1,4 +1,4 @@ - + @@ -8,26 +8,23 @@
    -
    I use the standard box model.
    +
    I use the standard box model.
    - - +} + +
    diff --git a/learn/tasks/cascade/cascade-download.html b/learn/tasks/cascade/cascade-download.html index a902ac38..b5abf5aa 100644 --- a/learn/tasks/cascade/cascade-download.html +++ b/learn/tasks/cascade/cascade-download.html @@ -1,4 +1,4 @@ - + @@ -8,7 +8,11 @@ body { background-color: #fff; color: #333; - font: 1.2em / 1.5 "Helvetica Neue", Helvetica, Arial, sans-serif; + font: + 1.2em / 1.5 "Helvetica Neue", + Helvetica, + Arial, + sans-serif; padding: 1em; margin: 0; } diff --git a/learn/tasks/cascade/cascade.html b/learn/tasks/cascade/cascade.html index c18da76e..52030012 100644 --- a/learn/tasks/cascade/cascade.html +++ b/learn/tasks/cascade/cascade.html @@ -1,4 +1,4 @@ - + @@ -31,17 +31,16 @@
    +
    diff --git a/learn/tasks/cascade/cascadelayer-download.html b/learn/tasks/cascade/cascadelayer-download.html index b2628e4c..69edabd4 100644 --- a/learn/tasks/cascade/cascadelayer-download.html +++ b/learn/tasks/cascade/cascadelayer-download.html @@ -1,4 +1,4 @@ - + diff --git a/learn/tasks/cascade/cascadelayer.html b/learn/tasks/cascade/cascadelayer.html index 099e189c..d75ca330 100644 --- a/learn/tasks/cascade/cascadelayer.html +++ b/learn/tasks/cascade/cascadelayer.html @@ -1,4 +1,4 @@ - + @@ -41,26 +41,25 @@
    +@layer yellow { + #outer div ul .nav a { + padding: 5px; + display: inline-block; + margin-bottom: 10px; + } +} +@layer purple { + div div li a { + color: rebeccapurple; + } +} +@layer green { + a { + color: lightgreen; + } +} +
    diff --git a/learn/tasks/cascade/marking.md b/learn/tasks/cascade/marking.md index dab510fd..c8590d03 100644 --- a/learn/tasks/cascade/marking.md +++ b/learn/tasks/cascade/marking.md @@ -10,7 +10,7 @@ One possible solution is as follows: } ``` -There are two things the student needs to do in this task. First, write a selector for the `a` element which is more specific than the selector used to turn the background powderblue. In this solution, this is achieved by using the `id` selector, which has very high specificity. +There are two things the student needs to do in this task. First, write a selector for the `a` element which is more specific than the selector used to turn the background powderblue. In this solution, this is achieved by using the `id` selector, which has very high specificity. Then the student needs to remember there are special keyword values for all properties. In this case, using `inherit` sets the background color back to be the same as its parent element. @@ -24,4 +24,4 @@ One possible solution is as follows: There is one thing the student needs to do in this task: change the order of precedence so the declaration for the desired color is in the last declared layer, which is what his solution shows. -The student needs to remember that unlayered normal styles take precedence over layered normal styles. But, if all styles are within layers — as in the case of this task — styles in later declared layers take precedence over styles declared in earlier layers. Moving the purple layer to the end means it has precedence over the green and yellow layers. \ No newline at end of file +The student needs to remember that unlayered normal styles take precedence over layered normal styles. But, if all styles are within layers — as in the case of this task — styles in later declared layers take precedence over styles declared in earlier layers. Moving the purple layer to the end means it has precedence over the green and yellow layers. diff --git a/learn/tasks/flexbox/flexbox1-download.html b/learn/tasks/flexbox/flexbox1-download.html index 00e78f6e..8a603e5d 100644 --- a/learn/tasks/flexbox/flexbox1-download.html +++ b/learn/tasks/flexbox/flexbox1-download.html @@ -1,45 +1,44 @@ - + - + Flexbox: Task 1 - + - - - - - - + - - - - \ No newline at end of file + + diff --git a/learn/tasks/flexbox/flexbox1.html b/learn/tasks/flexbox/flexbox1.html index 6942d9a2..608a7f16 100644 --- a/learn/tasks/flexbox/flexbox1.html +++ b/learn/tasks/flexbox/flexbox1.html @@ -1,44 +1,41 @@ - + - - + Flexbox: task 1 - + + - - - +
    - - + + +
    - +
    - - - + + diff --git a/learn/tasks/flexbox/flexbox2-download.html b/learn/tasks/flexbox/flexbox2-download.html index 2cd56054..1bae6f76 100644 --- a/learn/tasks/flexbox/flexbox2-download.html +++ b/learn/tasks/flexbox/flexbox2-download.html @@ -1,48 +1,49 @@ - + - + Flexbox: Task 2 - - - - - - - - -
      -
    • I am small
      • -
    • I have more content than the very small item.
      • -
    • I have lots of content. So much content that I don't know where it is all going to go. I'm glad that CSS is pretty good at dealing with situations where we end up with more words than expected!
      • -
    - - - - \ No newline at end of file + + + +
      +
    • I am small
      • +
    • I have more content than the very small item.
      • +
    • + I have lots of content. So much content that I don't know where it is + all going to go. I'm glad that CSS is pretty good at dealing with + situations where we end up with more words than expected! +
      • +
    + + diff --git a/learn/tasks/flexbox/flexbox2.html b/learn/tasks/flexbox/flexbox2.html index 5ec3b0d9..c749d2e7 100644 --- a/learn/tasks/flexbox/flexbox2.html +++ b/learn/tasks/flexbox/flexbox2.html @@ -1,75 +1,74 @@ - + - - + Flexbox: task 2 - + + - - - +
    • I am small
    • I have more content than the very small item.
      • -
    • I have lots of content. So much content that I don't know where it is all going to go. I'm glad that CSS is pretty good at dealing with situations where we end up with more words than expected!
      • +
    • + I have lots of content. So much content that I don't know where it is + all going to go. I'm glad that CSS is pretty good at dealing with + situations where we end up with more words than expected! +
    - +} - +
    - +
    - - - + + diff --git a/learn/tasks/flexbox/flexbox3-download.html b/learn/tasks/flexbox/flexbox3-download.html index 9aa7aaec..fe349430 100644 --- a/learn/tasks/flexbox/flexbox3-download.html +++ b/learn/tasks/flexbox/flexbox3-download.html @@ -1,45 +1,42 @@ - + - + Flexbox: Task 3 - - - - - - - - -
    -
    Center me.
    -
    - - - - \ No newline at end of file + + + +
    +
    Center me.
    +
    + + diff --git a/learn/tasks/flexbox/flexbox3.html b/learn/tasks/flexbox/flexbox3.html index 3f1496fb..1811ab51 100644 --- a/learn/tasks/flexbox/flexbox3.html +++ b/learn/tasks/flexbox/flexbox3.html @@ -1,70 +1,66 @@ - + - - + Flexbox: task 3 - + + - - - +
    Center me.
    - + - +
    - +
    - - - + + diff --git a/learn/tasks/flexbox/flexbox4-download.html b/learn/tasks/flexbox/flexbox4-download.html index b9c804eb..669f12d3 100644 --- a/learn/tasks/flexbox/flexbox4-download.html +++ b/learn/tasks/flexbox/flexbox4-download.html @@ -1,56 +1,53 @@ - + - + Flexbox: Task 4 - - - - - - - - -
      -
    • Turnip
      • -
    • greens
      • -
    • yarrow
      • -
    • ricebean
      • -
    • rutabaga
      • -
    • endive
      • -
    • cauliflower
      • -
    • sea lettuce
      • -
    • kohlrabi
      • -
    • amaranth
      • -
    - - - - \ No newline at end of file + + + +
      +
    • Turnip
      • +
    • greens
      • +
    • yarrow
      • +
    • ricebean
      • +
    • rutabaga
      • +
    • endive
      • +
    • cauliflower
      • +
    • sea lettuce
      • +
    • kohlrabi
      • +
    • amaranth
      • +
    + + diff --git a/learn/tasks/flexbox/flexbox4.html b/learn/tasks/flexbox/flexbox4.html index 56adc57a..a6338e17 100644 --- a/learn/tasks/flexbox/flexbox4.html +++ b/learn/tasks/flexbox/flexbox4.html @@ -1,46 +1,42 @@ - + - - + Flexbox: task 4 - + + - - - +
    • Turnip
      • @@ -56,17 +52,17 @@
    - +} - +
    - +
    - - - + + diff --git a/learn/tasks/float/float1-download.html b/learn/tasks/float/float1-download.html index b8987774..cbafc3c1 100644 --- a/learn/tasks/float/float1-download.html +++ b/learn/tasks/float/float1-download.html @@ -1,13 +1,17 @@ - + - + Float: Task 1 - -
    One
    Two

    The two boxes should float to either side of this text.

    - - - \ No newline at end of file + diff --git a/learn/tasks/float/float1.html b/learn/tasks/float/float1.html index 708dff0a..59a3d465 100644 --- a/learn/tasks/float/float1.html +++ b/learn/tasks/float/float1.html @@ -1,4 +1,4 @@ - + @@ -10,7 +10,7 @@ } .box { width: 500px; - padding: .5em; + padding: 0.5em; } .float { margin: 15px; @@ -25,11 +25,9 @@ @@ -41,26 +39,24 @@
    Two

    The two boxes should float to either side of this text.

    - - +} - +
    diff --git a/learn/tasks/float/float2-download.html b/learn/tasks/float/float2-download.html index 6bc6f696..a3b8c0ff 100644 --- a/learn/tasks/float/float2-download.html +++ b/learn/tasks/float/float2-download.html @@ -1,13 +1,17 @@ - + - + Float: Task 2 - -
    Float

    This sentence appears next to the float.

    Cause this sentence to appear below the float.

    - - - \ No newline at end of file + diff --git a/learn/tasks/float/float2.html b/learn/tasks/float/float2.html index af391967..34c3e6fc 100644 --- a/learn/tasks/float/float2.html +++ b/learn/tasks/float/float2.html @@ -1,4 +1,4 @@ - + @@ -10,7 +10,7 @@ } .box { width: 500px; - padding: .5em; + padding: 0.5em; } .float { margin: 15px; @@ -25,11 +25,9 @@ @@ -41,26 +39,24 @@

    This sentence appears next to the float.

    Cause this sentence to appear below the float.

    - - +} - +
    diff --git a/learn/tasks/float/float3-download.html b/learn/tasks/float/float3-download.html index 16518d12..d66c43b2 100644 --- a/learn/tasks/float/float3-download.html +++ b/learn/tasks/float/float3-download.html @@ -1,14 +1,18 @@ - + - + Float: Task 3 - + - -
    Float

    This sentence appears next to the float.

    - - - \ No newline at end of file + diff --git a/learn/tasks/float/float3.html b/learn/tasks/float/float3.html index da6bfd68..22d2dca1 100644 --- a/learn/tasks/float/float3.html +++ b/learn/tasks/float/float3.html @@ -1,4 +1,4 @@ - + @@ -13,14 +13,14 @@ } .box { width: 500px; - padding: .5em; + padding: 0.5em; } .float { margin: 15px; width: 150px; height: 150px; border-radius: 5px; - background-color: rgb(207,232,220); + background-color: rgb(207, 232, 220); padding: 1em; } @@ -33,7 +33,6 @@ - -
    One
    Two
    Three
    Four
    - - - \ No newline at end of file + diff --git a/learn/tasks/grid/grid1.html b/learn/tasks/grid/grid1.html index 3ff96403..d70aa778 100644 --- a/learn/tasks/grid/grid1.html +++ b/learn/tasks/grid/grid1.html @@ -1,36 +1,31 @@ - + - - + Grid: task 1 - + + - - - +
    One
    @@ -40,25 +35,25 @@
    - + - +
    - +
    - - - + + diff --git a/learn/tasks/grid/grid2-download.html b/learn/tasks/grid/grid2-download.html index 51972a28..66340843 100644 --- a/learn/tasks/grid/grid2-download.html +++ b/learn/tasks/grid/grid2-download.html @@ -1,28 +1,31 @@ - + - Grid: task 2 - + - -
    One
    Two
    - - - \ No newline at end of file + diff --git a/learn/tasks/grid/grid2.html b/learn/tasks/grid/grid2.html index 14041b95..8e65f62f 100644 --- a/learn/tasks/grid/grid2.html +++ b/learn/tasks/grid/grid2.html @@ -1,55 +1,49 @@ - + - - + Grid: task 2 - + + - - - +
    One
    @@ -57,7 +51,7 @@
    - + - +
    - +
    - - - + + diff --git a/learn/tasks/grid/grid3-download.html b/learn/tasks/grid/grid3-download.html index f2c4e84a..07ab4cd5 100644 --- a/learn/tasks/grid/grid3-download.html +++ b/learn/tasks/grid/grid3-download.html @@ -1,30 +1,33 @@ - + - Grid: task 3 - + - -
    One
    Two
    Three
    Four
    - - - \ No newline at end of file + diff --git a/learn/tasks/grid/grid3.html b/learn/tasks/grid/grid3.html index 18c9257b..8cc3d308 100644 --- a/learn/tasks/grid/grid3.html +++ b/learn/tasks/grid/grid3.html @@ -1,38 +1,34 @@ - + - - + Grid: task 3 - + + - - - +
    One
    @@ -42,27 +38,26 @@
    - +} - +
    - +
    - - - + + diff --git a/learn/tasks/grid/grid4-download.html b/learn/tasks/grid/grid4-download.html index 54ee901d..74c4a704 100644 --- a/learn/tasks/grid/grid4-download.html +++ b/learn/tasks/grid/grid4-download.html @@ -1,7 +1,6 @@ - + - @@ -9,11 +8,14 @@ Grid and Flex: task 4 - -
    - a single red balloon + a single red balloon
    • balloon
    • red
      • @@ -61,7 +61,7 @@
    - balloons over some houses + balloons over some houses
    • balloons
    • houses
      • @@ -70,7 +70,7 @@
    - close-up of balloons inflating + close-up of balloons inflating
    • balloons
    • inflating
      • @@ -79,7 +79,7 @@
    - a balloon in the sun + a balloon in the sun
    • balloon
    • sun
      • @@ -89,7 +89,5 @@
    - - - \ No newline at end of file + diff --git a/learn/tasks/grid/grid4.html b/learn/tasks/grid/grid4.html index bd244660..9979de26 100644 --- a/learn/tasks/grid/grid4.html +++ b/learn/tasks/grid/grid4.html @@ -1,63 +1,56 @@ - + - - + Grid and Flex: task 4 - + + - - - +
    - a single red balloon + a single red balloon
    • balloon
    • red
      • @@ -67,7 +60,7 @@
    - balloons over some houses + balloons over some houses
    • balloons
    • houses
      • @@ -76,7 +69,7 @@
    - close-up of balloons inflating + close-up of balloons inflating
    • balloons
    • inflating
      • @@ -85,7 +78,7 @@
    - a balloon in the sun + a balloon in the sun
    • balloon
    • sun
      • @@ -97,17 +90,17 @@
    - +} - +
    - +
    - - - + + diff --git a/learn/tasks/grid/marking.md b/learn/tasks/grid/marking.md index 1b918793..b4b229de 100644 --- a/learn/tasks/grid/marking.md +++ b/learn/tasks/grid/marking.md @@ -29,15 +29,19 @@ I have used the shorthands below, however it would be correct for the student to grid-row: 2 / 4; } ``` + ### Additional question This extra question requires a little bit of research. One way of achieving this would be to use `order`, which we've encountered in the flexbox tutorial. + ``` .item1 { order: 1; } ``` + Another valid solution is to use `z-index`: + ``` .item1 { z-index: 1; diff --git a/learn/tasks/images/form-download.html b/learn/tasks/images/form-download.html index 721615d4..cc80175d 100644 --- a/learn/tasks/images/form-download.html +++ b/learn/tasks/images/form-download.html @@ -1,15 +1,18 @@ - + - + Images and forms 2: styling form fields - +
    -
    -
    - -
    +
    + + + +
    - +} - +
    + + + +
    +
    diff --git a/learn/tasks/images/marking.md b/learn/tasks/images/marking.md index 76915cd2..6fdeb461 100644 --- a/learn/tasks/images/marking.md +++ b/learn/tasks/images/marking.md @@ -40,5 +40,5 @@ The student has been asked to perform various tasks to style a form field and su color: white; border: 0; border-radius: 5px; -} +} ``` diff --git a/learn/tasks/images/object-fit-download.html b/learn/tasks/images/object-fit-download.html index ac10aba7..5ad0c76c 100644 --- a/learn/tasks/images/object-fit-download.html +++ b/learn/tasks/images/object-fit-download.html @@ -1,13 +1,17 @@ - + - + Images and forms 1: covering the box with an image -
    - balloons + balloons
    - - - \ No newline at end of file + diff --git a/learn/tasks/images/object-fit.html b/learn/tasks/images/object-fit.html index 5d9d9bc1..12142980 100644 --- a/learn/tasks/images/object-fit.html +++ b/learn/tasks/images/object-fit.html @@ -1,48 +1,45 @@ - + Images and forms 1: covering the box with an image
    -
    - balloons + balloons
    - - + + +
    diff --git a/learn/tasks/multicol/multicol1-download.html b/learn/tasks/multicol/multicol1-download.html index e07d6353..c1192c44 100644 --- a/learn/tasks/multicol/multicol1-download.html +++ b/learn/tasks/multicol/multicol1-download.html @@ -1,14 +1,18 @@ - + - + Multiple-column Layout: Task 1 - + - -
    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

    - -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    +

    + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh + onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. +

    -

    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. +

    + Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot + courgette tatsoi pea sprouts fava bean collard greens dandelion okra + wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    +

    + Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce + kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus + winter purslane kale. Celery potato scallion desert raisin horseradish + spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo + shoot green bean swiss chard seakale pumpkin onion chickpea gram corn + pea. +

    - - - \ No newline at end of file + diff --git a/learn/tasks/multicol/multicol1.html b/learn/tasks/multicol/multicol1.html index 48a1d326..80986c86 100644 --- a/learn/tasks/multicol/multicol1.html +++ b/learn/tasks/multicol/multicol1.html @@ -1,4 +1,4 @@ - + @@ -12,40 +12,50 @@
    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

    +

    + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh + onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. +

    -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    +

    + Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot + courgette tatsoi pea sprouts fava bean collard greens dandelion okra + wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. +

    -

    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea.

    +

    + Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce + kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus + winter purslane kale. Celery potato scallion desert raisin horseradish + spinach carrot soko. Lotus root water spinach fennel kombu maize + bamboo shoot green bean swiss chard seakale pumpkin onion chickpea + gram corn pea. +

    -
    - +} - +
    diff --git a/learn/tasks/multicol/multicol2-download.html b/learn/tasks/multicol/multicol2-download.html index 87882db6..ca64f9c0 100644 --- a/learn/tasks/multicol/multicol2-download.html +++ b/learn/tasks/multicol/multicol2-download.html @@ -1,14 +1,18 @@ - + - + Multiple-column Layout: Task 2 - + - -
    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

    - -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    +

    + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh + onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. +

    -

    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. +

    + Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot + courgette tatsoi pea sprouts fava bean collard greens dandelion okra + wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    +

    + Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce + kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus + winter purslane kale. Celery potato scallion desert raisin horseradish + spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo + shoot green bean swiss chard seakale pumpkin onion chickpea gram corn + pea. +

    - - - \ No newline at end of file + diff --git a/learn/tasks/multicol/multicol2.html b/learn/tasks/multicol/multicol2.html index fc64f879..549c65c3 100644 --- a/learn/tasks/multicol/multicol2.html +++ b/learn/tasks/multicol/multicol2.html @@ -1,4 +1,4 @@ - + @@ -12,40 +12,50 @@
    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

    +

    + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh + onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. +

    -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    +

    + Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot + courgette tatsoi pea sprouts fava bean collard greens dandelion okra + wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. +

    -

    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea.

    +

    + Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce + kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus + winter purslane kale. Celery potato scallion desert raisin horseradish + spinach carrot soko. Lotus root water spinach fennel kombu maize + bamboo shoot green bean swiss chard seakale pumpkin onion chickpea + gram corn pea. +

    -
    - +} - +
    diff --git a/learn/tasks/multicol/multicol3-download.html b/learn/tasks/multicol/multicol3-download.html index da756b86..02af6ab9 100644 --- a/learn/tasks/multicol/multicol3-download.html +++ b/learn/tasks/multicol/multicol3-download.html @@ -1,14 +1,18 @@ - + - + Multiple-column Layout: Task 3 - + - -
    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

    +

    + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh + onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. +

    -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    +

    + Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot + courgette tatsoi pea sprouts fava bean collard greens dandelion okra + wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. +

    I am a level 2 heading

    Lotus root water spinach fennel
    -

    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. +

    + Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce + kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus + winter purslane kale. Celery potato scallion desert raisin horseradish + spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo + shoot green bean swiss chard seakale pumpkin onion chickpea gram corn + pea.

    -
    - - - \ No newline at end of file + diff --git a/learn/tasks/multicol/multicol3.html b/learn/tasks/multicol/multicol3.html index 66154b07..479094f8 100644 --- a/learn/tasks/multicol/multicol3.html +++ b/learn/tasks/multicol/multicol3.html @@ -1,4 +1,4 @@ - + @@ -18,58 +18,68 @@ margin: 0; display: grid; grid-template-columns: 1fr auto 1fr; - column-gap: .5em; + column-gap: 0.5em; align-items: center; } .box h2::before { content: ""; - border-bottom:5px dotted #ccc; + border-bottom: 5px dotted #ccc; } .box h2::after { content: ""; - border-bottom:5px dotted #ccc; + border-bottom: 5px dotted #ccc; } .subhead { - font-style: italic; + font-style: italic; }
    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

    +

    + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh + onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. +

    -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    +

    + Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot + courgette tatsoi pea sprouts fava bean collard greens dandelion okra + wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. +

    I am a level 2 heading

    Lotus root water spinach fennel
    -

    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea.

    +

    + Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce + kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus + winter purslane kale. Celery potato scallion desert raisin horseradish + spinach carrot soko. Lotus root water spinach fennel kombu maize + bamboo shoot green bean swiss chard seakale pumpkin onion chickpea + gram corn pea. +

    -
    - +} - +

    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea.

    + +
    diff --git a/learn/tasks/overflow/overflow-hidden-download.html b/learn/tasks/overflow/overflow-hidden-download.html index 2e7ee1c6..bc04af61 100644 --- a/learn/tasks/overflow/overflow-hidden-download.html +++ b/learn/tasks/overflow/overflow-hidden-download.html @@ -1,14 +1,18 @@ - + - + Overflow Task 2: Hiding overflow - + - -
    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

    +

    + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh + onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. +

    Target
    -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    +

    + Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot + courgette tatsoi pea sprouts fava bean collard greens dandelion okra + wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. +

    - - - \ No newline at end of file + diff --git a/learn/tasks/position/position1.html b/learn/tasks/position/position1.html index 92de773c..cee9fba9 100644 --- a/learn/tasks/position/position1.html +++ b/learn/tasks/position/position1.html @@ -1,4 +1,4 @@ - + @@ -10,25 +10,23 @@ } .container { width: 500px; - padding: .5em; + padding: 0.5em; border: 5px solid #ccc; } .target { width: 150px; height: 150px; border-radius: 5px; - background-color: rgb(207,232,220); + background-color: rgb(207, 232, 220); padding: 1em; } @@ -36,30 +34,35 @@
    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

    +

    + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh + onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. +

    Target
    -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    +

    + Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot + courgette tatsoi pea sprouts fava bean collard greens dandelion okra + wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. +

    -
    - +} - +
    diff --git a/learn/tasks/position/position2-download.html b/learn/tasks/position/position2-download.html index 85d9a5aa..2a41455f 100644 --- a/learn/tasks/position/position2-download.html +++ b/learn/tasks/position/position2-download.html @@ -1,13 +1,17 @@ - + Position: Task 2 - - - -
    -
    -

    This is the sidebar. It should remain in position as the content scrolls.

    -
    -
    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

    -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    -

    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.

    -
    -
    - +
    +
    +

    + This is the sidebar. It should remain in position as the content + scrolls. +

    +
    +
    +

    + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh + onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. +

    +

    + Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot + courgette tatsoi pea sprouts fava bean collard greens dandelion okra + wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. +

    +

    + Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce + kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus + winter purslane kale. Celery potato scallion desert raisin horseradish + spinach carrot soko. Lotus root water spinach fennel kombu maize + bamboo shoot green bean swiss chard seakale pumpkin onion chickpea + gram corn pea. Brussels sprout coriander water chestnut gourd swiss + chard wakame kohlrabi beetroot carrot watercress. Corn amaranth + salsify bunya nuts nori azuki bean chickweed potato bell pepper + artichoke. +

    +
    +
    - diff --git a/learn/tasks/position/position2.html b/learn/tasks/position/position2.html index 3d45299a..991650dd 100644 --- a/learn/tasks/position/position2.html +++ b/learn/tasks/position/position2.html @@ -1,4 +1,4 @@ - + @@ -11,12 +11,12 @@ .container { width: 550px; height: 400px; - padding: .5em; + padding: 0.5em; border: 5px solid #ccc; overflow: auto; } .sidebar { - background-color: rgb(207,232,220); + background-color: rgb(207, 232, 220); padding: 1em; float: left; width: 150px; @@ -29,11 +29,9 @@ @@ -42,28 +40,47 @@
    -

    This is the sidebar. It should remain in position as the content scrolls.

    +

    + This is the sidebar. It should remain in position as the content + scrolls. +

    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

    -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    -

    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.

    +

    + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi + welsh onion daikon amaranth tatsoi tomatillo melon azuki bean + garlic. +

    +

    + Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot + courgette tatsoi pea sprouts fava bean collard greens dandelion okra + wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. +

    +

    + Turnip greens yarrow ricebean rutabaga endive cauliflower sea + lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage + asparagus winter purslane kale. Celery potato scallion desert raisin + horseradish spinach carrot soko. Lotus root water spinach fennel + kombu maize bamboo shoot green bean swiss chard seakale pumpkin + onion chickpea gram corn pea. Brussels sprout coriander water + chestnut gourd swiss chard wakame kohlrabi beetroot carrot + watercress. Corn amaranth salsify bunya nuts nori azuki bean + chickweed potato bell pepper artichoke. +

    -
    - +} - +
    diff --git a/learn/tasks/rwd/rwd-download.html b/learn/tasks/rwd/rwd-download.html index a04836fe..cfb449bf 100644 --- a/learn/tasks/rwd/rwd-download.html +++ b/learn/tasks/rwd/rwd-download.html @@ -1,17 +1,20 @@ - + - + Responsive Web Design Task: Task - + - - + - +
    - - - +
    - + border: 5px solid grey; +} - +
  59. Link 1
    60. +
  60. Link 2
    61. +
  61. Link 3
    62. +
  62. Link 4
    63. +
    - +
    - - - - \ No newline at end of file + + + diff --git a/learn/tasks/selectors/class-id-download.html b/learn/tasks/selectors/class-id-download.html index 9128d668..8e1722da 100644 --- a/learn/tasks/selectors/class-id-download.html +++ b/learn/tasks/selectors/class-id-download.html @@ -1,14 +1,18 @@ - + - + Selectors: Class and ID Selectors - + - -

    This is a heading

    -

    Veggies es - bonus vobis, proinde vos postulo +

    + Veggies es bonus vobis, proinde vos postulo essum magis - kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

    + kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean + garlic. +

    A level 2 heading

    Gumbo beet greens corn soko endive gumbo gourd.

    Another level 2 heading

    Parsley shallot - courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    + courgette tatsoi pea sprouts fava bean collard greens dandelion okra + wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. +

    - - + + diff --git a/learn/tasks/selectors/class-id.html b/learn/tasks/selectors/class-id.html index 656621d6..06079b3d 100644 --- a/learn/tasks/selectors/class-id.html +++ b/learn/tasks/selectors/class-id.html @@ -1,4 +1,4 @@ - + @@ -10,40 +10,42 @@ } - +

    This is a heading

    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

    +

    + Veggies es bonus vobis, proinde vos postulo + essum magis kohlrabi welsh onion + daikon amaranth tatsoi tomatillo melon azuki bean garlic. +

    A level 2 heading

    Gumbo beet greens corn soko endive gumbo gourd.

    Another level 2 heading

    -

    Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    +

    + Parsley shallot courgette tatsoi pea + sprouts fava bean collard greens dandelion okra wakame tomato. + Dandelion cucumber earthnut pea peanut soko zucchini. +

    -
    - + - +
    diff --git a/learn/tasks/selectors/combinators-download.html b/learn/tasks/selectors/combinators-download.html index bcc2a93d..c9127548 100644 --- a/learn/tasks/selectors/combinators-download.html +++ b/learn/tasks/selectors/combinators-download.html @@ -1,14 +1,18 @@ - + - + Selectors: Combinators - + - + @@ -31,7 +28,8 @@

    Another heading

    • One
      • -
    • Two +
    • + Two
      • 2.1
      • 2.2
        • @@ -39,37 +37,31 @@

        Another heading

      • Three
      -
    - - + - +

    Another heading

    +

    This paragraph comes after the heading.

    +
      +
    • One
      • +
    • Two +
        +
      • 2.1
        • +
      • 2.2
        • +
      +
      • +
    • Three
      • +
    +
    diff --git a/learn/tasks/selectors/marking.md b/learn/tasks/selectors/marking.md index f785f5a7..cbd2bfc2 100644 --- a/learn/tasks/selectors/marking.md +++ b/learn/tasks/selectors/marking.md @@ -26,7 +26,7 @@ span { This tests that the student understands he different between these and also how to target multiple classes on an item. ``` -#special { +#special { background-color: yellow; } @@ -105,11 +105,11 @@ a[title] { Target the element with an href attribute which contains the word contact anywhere in its value and make the border orange (border-color: orange). -There are two things we want to match here, the href value "/contact" and also "../contact". So we need to match the string "contact" anywhere in the value using *=. This will select the third and fourth links. +There are two things we want to match here, the href value "/contact" and also "../contact". So we need to match the string "contact" anywhere in the value using \*=. This will select the third and fourth links. ``` a[href*="contact"] { - border-color: orange; + border-color: orange; } ``` @@ -118,8 +118,7 @@ Target the element with an href value starting with https and give it a gree Here we can look for an href value which starts with "https" and so use ^=, this will only select the first link. ``` -a[href^="https"] { +a[href^="https"] { border-color: green; } ``` - diff --git a/learn/tasks/selectors/pseudo-download.html b/learn/tasks/selectors/pseudo-download.html index 64f23d4d..e560eb38 100644 --- a/learn/tasks/selectors/pseudo-download.html +++ b/learn/tasks/selectors/pseudo-download.html @@ -1,14 +1,18 @@ - + - + Selectors: Pseudo-class and Pseudo-element Selectors - + - -
    -

    Veggies es - bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

    -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    +

    + Veggies es bonus vobis, proinde vos + postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi + tomatillo melon azuki bean garlic. +

    +

    + Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot + courgette tatsoi pea sprouts fava bean collard greens dandelion okra + wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. +

    @@ -63,7 +72,5 @@
    Fruits
    - - diff --git a/learn/tasks/selectors/pseudo.html b/learn/tasks/selectors/pseudo.html index 037d5557..9b650e7b 100644 --- a/learn/tasks/selectors/pseudo.html +++ b/learn/tasks/selectors/pseudo.html @@ -1,4 +1,4 @@ - + @@ -14,23 +14,29 @@ width: 300px; } - td, th { - padding: .2em; + td, + th { + padding: 0.2em; text-align: left; } - +
    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

    -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    +

    + Veggies es bonus vobis, proinde vos + postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi + tomatillo melon azuki bean garlic. +

    +

    + Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot + courgette tatsoi pea sprouts fava bean collard greens dandelion okra + wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. +

    @@ -61,14 +67,11 @@
    -
    - + - +
    diff --git a/learn/tasks/selectors/type-download.html b/learn/tasks/selectors/type-download.html index 3cfced8c..c679a290 100644 --- a/learn/tasks/selectors/type-download.html +++ b/learn/tasks/selectors/type-download.html @@ -1,14 +1,18 @@ - + - + Selectors: Type Selectors - + - -

    This is a heading

    -

    Veggies es - bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

    +

    + Veggies es bonus vobis, proinde vos postulo essum magis + kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean + garlic. +

    A level 2 heading

    -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    - +

    + Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot + courgette tatsoi pea sprouts fava bean collard greens dandelion okra + wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. +

    - - - \ No newline at end of file + diff --git a/learn/tasks/selectors/type.html b/learn/tasks/selectors/type.html index 949555ca..b5178ada 100644 --- a/learn/tasks/selectors/type.html +++ b/learn/tasks/selectors/type.html @@ -1,4 +1,4 @@ - + @@ -10,36 +10,38 @@ } - +

    This is a heading

    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

    +

    + Veggies es bonus vobis, proinde vos postulo essum magis + kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean + garlic. +

    A level 2 heading

    -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    +

    + Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot + courgette tatsoi pea sprouts fava bean collard greens dandelion okra + wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. +

    -
    - + - +
    diff --git a/learn/tasks/sizing/height-min-height-download.html b/learn/tasks/sizing/height-min-height-download.html index 599bab0e..070525d1 100644 --- a/learn/tasks/sizing/height-min-height-download.html +++ b/learn/tasks/sizing/height-min-height-download.html @@ -1,4 +1,4 @@ - + @@ -8,7 +8,11 @@ body { background-color: #fff; color: #333; - font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif; + font: + 1.2em / 1.5 Helvetica Neue, + Helvetica, + Arial, + sans-serif; padding: 1em; margin: 0; } diff --git a/learn/tasks/sizing/height-min-height.html b/learn/tasks/sizing/height-min-height.html index 2fc9bb29..33d947fb 100644 --- a/learn/tasks/sizing/height-min-height.html +++ b/learn/tasks/sizing/height-min-height.html @@ -1,63 +1,67 @@ - + Sizing Task 1: height and min-height
    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens corn soko endive gumbo gourd.

    +

    + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh + onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo + beet greens corn soko endive gumbo gourd. +

    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens corn soko endive gumbo gourd.

    +

    + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh + onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo + beet greens corn soko endive gumbo gourd. +

    - +} - +
    diff --git a/learn/tasks/sizing/max-width-download.html b/learn/tasks/sizing/max-width-download.html index f496c75c..26a7573f 100644 --- a/learn/tasks/sizing/max-width-download.html +++ b/learn/tasks/sizing/max-width-download.html @@ -1,39 +1,39 @@ - + Sizing Task 3: maximum width and images -
    - star + star
    - balloons + balloons
    - diff --git a/learn/tasks/sizing/max-width.html b/learn/tasks/sizing/max-width.html index 77eac83f..3ea41f49 100644 --- a/learn/tasks/sizing/max-width.html +++ b/learn/tasks/sizing/max-width.html @@ -1,51 +1,49 @@ - + Sizing Task 3: maximum width and images
    - star + star
    - balloons + balloons
    - - + + +
    diff --git a/learn/tasks/sizing/percentages-download.html b/learn/tasks/sizing/percentages-download.html index 6c1d8f0f..626650c4 100644 --- a/learn/tasks/sizing/percentages-download.html +++ b/learn/tasks/sizing/percentages-download.html @@ -1,11 +1,10 @@ - + - + Sizing Task 2: Percentages -
    Make me 60% of my parent's width.
    - - diff --git a/learn/tasks/sizing/percentages.html b/learn/tasks/sizing/percentages.html index 59af5502..368710f3 100644 --- a/learn/tasks/sizing/percentages.html +++ b/learn/tasks/sizing/percentages.html @@ -1,21 +1,21 @@ - + Sizing Task 2: Percentages @@ -37,20 +35,19 @@
    - - + + +
    diff --git a/learn/tasks/styles.css b/learn/tasks/styles.css index b733e436..11945fee 100644 --- a/learn/tasks/styles.css +++ b/learn/tasks/styles.css @@ -1,61 +1,65 @@ /* Some default styling for cookbook examples */ -/* +/* rgb(53,43,34) rgb(75,70,74) rgb(95,97,110) rgb(137,151,188) rgb(160,178,226) */ -body { - background-color: #fff; - color: #333; - font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif; - padding: 0; - margin: 0; +body { + background-color: #fff; + color: #333; + font: + 1.2em / 1.5 Helvetica Neue, + Helvetica, + Arial, + sans-serif; + padding: 0; + margin: 0; } /* styles for the editor */ .playable { - font-family: monospace; - display: block; - margin-bottom: 10px; - background-color: #F4F7F8; - border: none; - border-left: 6px solid #558ABB; - color: #4D4E53; - width: 90%; - max-width: 700px; - padding: 10px 10px 0px; - font-size: 90%; - } + font-family: monospace; + display: block; + margin-bottom: 10px; + background-color: #f4f7f8; + border: none; + border-left: 6px solid #558abb; + color: #4d4e53; + width: 90%; + max-width: 700px; + padding: 10px 10px 0px; + font-size: 90%; +} - .playable-css { - height: 80px; - } +.playable-css { + height: 80px; +} - .playable-html { - height: 160px; - } +.playable-html { + height: 160px; +} - .playable-buttons { - text-align: right; - width: 90%; - max-width: 700px; - padding: 5px 10px 5px 26px; - font-size: 100%; - } +.playable-buttons { + text-align: right; + width: 90%; + max-width: 700px; + padding: 5px 10px 5px 26px; + font-size: 100%; +} - .preview { - width: 90%; - max-width: 700px; - border: 1px solid #4D4E53; - border-radius: 2px; - padding: 10px 14px 10px 10px; - margin-bottom: 10px; - } +.preview { + width: 90%; + max-width: 700px; + border: 1px solid #4d4e53; + border-radius: 2px; + padding: 10px 14px 10px 10px; + margin-bottom: 10px; +} - .preview input { - display: block; - margin: 5px; - } +.preview input { + display: block; + margin: 5px; +} diff --git a/learn/tasks/tables/table-download.html b/learn/tasks/tables/table-download.html index 5e22bb8e..0915e66d 100644 --- a/learn/tasks/tables/table-download.html +++ b/learn/tasks/tables/table-download.html @@ -1,7 +1,7 @@ - + - + Tables Task - - + @@ -80,7 +81,5 @@
    A summary of the UK's most famous punk bands + A summary of the UK's most famous punk bands +
    Band
    - - - \ No newline at end of file + diff --git a/learn/tasks/tables/table.html b/learn/tasks/tables/table.html index 1f684d72..04dd7e35 100644 --- a/learn/tasks/tables/table.html +++ b/learn/tasks/tables/table.html @@ -1,97 +1,94 @@ - + Tables Task - +
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    A summary of the UK's most famous punk bands
    BandYear formedNo. of AlbumsMost famous song
    Buzzcocks19769Ever fallen in love (with someone you shouldn't've)
    The Clash19766London Calling
    The Damned197610Smash it up
    Sex Pistols19751Anarchy in the UK
    Sham 69197613If the kids are united
    Siouxsie and the Banshees197611Hong Kong Garden
    Stiff Little Fingers197710Suspect Device
    The Stranglers197417No More Heroes
    Total albums77
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + A summary of the UK's most famous punk bands +
    BandYear formedNo. of AlbumsMost famous song
    Buzzcocks19769Ever fallen in love (with someone you shouldn't've)
    The Clash19766London Calling
    The Damned197610Smash it up
    Sex Pistols19751Anarchy in the UK
    Sham 69197613If the kids are united
    Siouxsie and the Banshees197611Hong Kong Garden
    Stiff Little Fingers197710Suspect Device
    The Stranglers197417No More Heroes
    Total albums77
    - + - +
    diff --git a/learn/tasks/values/color-download.html b/learn/tasks/values/color-download.html index 8f7107f9..b2aa4347 100644 --- a/learn/tasks/values/color-download.html +++ b/learn/tasks/values/color-download.html @@ -1,14 +1,18 @@ - + - + Values and Units Task 1: color values -
    • hex color
    • RGB color
    • HSL color
    • Alpha value 0.6
    - - - \ No newline at end of file + diff --git a/learn/tasks/values/color.html b/learn/tasks/values/color.html index 912b22a6..582c6678 100644 --- a/learn/tasks/values/color.html +++ b/learn/tasks/values/color.html @@ -1,53 +1,49 @@ - + Values and Units Task 1: color values
    -
      -
    • hex color
      • -
    • RGB color
      • -
    • HSL color
      • -
    • Alpha value 0.6
      • -
    +
      +
    • hex color
      • +
    • RGB color
      • +
    • HSL color
      • +
    • Alpha value 0.6
      • +
    - +} - +
    diff --git a/learn/tasks/values/length-download.html b/learn/tasks/values/length-download.html index 78379145..44e7a81a 100644 --- a/learn/tasks/values/length-download.html +++ b/learn/tasks/values/length-download.html @@ -1,39 +1,46 @@ - + - + Values and Units Task 1: length values -

    Level 1 heading

    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

    +

    + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh + onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. +

    Level 2 heading

    -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    - +

    + Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette + tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. + Dandelion cucumber earthnut pea peanut soko zucchini. +

    - - \ No newline at end of file + diff --git a/learn/tasks/values/length.html b/learn/tasks/values/length.html index 616c26ae..71b2cb3f 100644 --- a/learn/tasks/values/length.html +++ b/learn/tasks/values/length.html @@ -1,28 +1,22 @@ - + Values and Units Task 1: length values - + @@ -30,12 +24,19 @@

    Level 1 heading

    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

    +

    + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh + onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. +

    Level 2 heading

    -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    +

    + Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot + courgette tatsoi pea sprouts fava bean collard greens dandelion okra + wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. +

    - +} - +

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    diff --git a/learn/tasks/values/marking.md b/learn/tasks/values/marking.md index 147c95de..331b09fc 100644 --- a/learn/tasks/values/marking.md +++ b/learn/tasks/values/marking.md @@ -43,7 +43,7 @@ p { h1+p { font-size: 120%; -} +} ``` ## Task 3 position diff --git a/learn/tasks/values/position-download.html b/learn/tasks/values/position-download.html index e5640307..d18847ae 100644 --- a/learn/tasks/values/position-download.html +++ b/learn/tasks/values/position-download.html @@ -1,14 +1,18 @@ - + - + Values and Units Task 3: position values - -
    - - - \ No newline at end of file + diff --git a/learn/tasks/values/position.html b/learn/tasks/values/position.html index f6ddaf58..87fef11e 100644 --- a/learn/tasks/values/position.html +++ b/learn/tasks/values/position.html @@ -1,15 +1,15 @@ - + Values and Units Task 3: position values
    -
    - -
    +
    - +} - +
    diff --git a/learn/tasks/writing-modes/logical-mbp-download.html b/learn/tasks/writing-modes/logical-mbp-download.html index 8d405934..505d2051 100644 --- a/learn/tasks/writing-modes/logical-mbp-download.html +++ b/learn/tasks/writing-modes/logical-mbp-download.html @@ -1,14 +1,18 @@ - + - + Writing Modes Task 3: Logical Margin, Border, Padding - + @@ -21,7 +21,6 @@ padding-top: 40px; margin-bottom: 30px; } - @@ -31,7 +30,7 @@
    Vertical.
    - +} - +
    Vertical.
    diff --git a/learn/tasks/writing-modes/logical-width-height-download.html b/learn/tasks/writing-modes/logical-width-height-download.html index 8b66cbdf..381f3897 100644 --- a/learn/tasks/writing-modes/logical-width-height-download.html +++ b/learn/tasks/writing-modes/logical-width-height-download.html @@ -1,14 +1,18 @@ - + - + Writing Modes Task 2: Logical width and height - + @@ -19,7 +19,6 @@ width: 200px; height: 100px; } - @@ -29,7 +28,7 @@
    Vertical.
    - +} - +
    Vertical.
    diff --git a/learn/tasks/writing-modes/writing-mode-download.html b/learn/tasks/writing-modes/writing-mode-download.html index 03e544ff..6ef614d8 100644 --- a/learn/tasks/writing-modes/writing-mode-download.html +++ b/learn/tasks/writing-modes/writing-mode-download.html @@ -1,14 +1,18 @@ - + - + Writing Modes Task 1: The writing-mode property - + - + - +
    -
    +
    - +} - +
    - +
    - - - - \ No newline at end of file + + + diff --git a/learn/writing-modes/block-inline.html b/learn/writing-modes/block-inline.html index dc4a9189..fd5d8829 100644 --- a/learn/writing-modes/block-inline.html +++ b/learn/writing-modes/block-inline.html @@ -1,4 +1,4 @@ - + @@ -15,7 +15,7 @@ .box { border: 1px solid #ccc; - padding: .5em; + padding: 0.5em; margin: 10px; } @@ -28,7 +28,6 @@ .vertical { writing-mode: vertical-rl; } - @@ -46,17 +45,16 @@

    Heading

    - +} - +
    diff --git a/learn/writing-modes/float.html b/learn/writing-modes/float.html index 61046fbd..568d8fb6 100644 --- a/learn/writing-modes/float.html +++ b/learn/writing-modes/float.html @@ -1,4 +1,4 @@ - + @@ -15,7 +15,7 @@ .box { margin: 10px; - padding: .5em; + padding: 0.5em; border: 1px solid #ccc; } @@ -26,12 +26,11 @@ writing-mode: horizontal-tb; } - img{ + img { float: inline-start; margin-inline-end: 10px; margin-block-end: 10px; } - @@ -39,13 +38,16 @@
    - star -

    This box uses logical properties. The star image has been floated inline-start, it also has a margin on the inline-end and block-end.

    + star +

    + This box uses logical properties. The star image has been floated + inline-start, it also has a margin on the inline-end and block-end. +

    - +} - +
    diff --git a/learn/writing-modes/inline-size.html b/learn/writing-modes/inline-size.html index c51a3f4f..f7452935 100644 --- a/learn/writing-modes/inline-size.html +++ b/learn/writing-modes/inline-size.html @@ -1,4 +1,4 @@ - + @@ -15,7 +15,7 @@ .box { border: 1px solid #ccc; - padding: .5em; + padding: 0.5em; margin: 10px; } @@ -32,8 +32,6 @@ .vertical { writing-mode: vertical-rl; } - - @@ -53,7 +51,7 @@

    Heading

    - +} - +
    diff --git a/learn/writing-modes/logical-mbp.html b/learn/writing-modes/logical-mbp.html index cf750e4e..828e960c 100644 --- a/learn/writing-modes/logical-mbp.html +++ b/learn/writing-modes/logical-mbp.html @@ -1,4 +1,4 @@ - + @@ -65,7 +65,7 @@

    Logical Properties

    - +} - +
    diff --git a/learn/writing-modes/simple-vertical.html b/learn/writing-modes/simple-vertical.html index 28e53703..2ea4a52f 100644 --- a/learn/writing-modes/simple-vertical.html +++ b/learn/writing-modes/simple-vertical.html @@ -1,4 +1,4 @@ - + @@ -20,7 +20,6 @@ h1 { writing-mode: vertical-rl; } - @@ -29,15 +28,15 @@

    Play with writing modes

    - +} - +
    diff --git a/learn/writing-modes/width.html b/learn/writing-modes/width.html index 44e05b37..662c6517 100644 --- a/learn/writing-modes/width.html +++ b/learn/writing-modes/width.html @@ -1,4 +1,4 @@ - + @@ -15,7 +15,7 @@ .box { border: 1px solid #ccc; - padding: .5em; + padding: 0.5em; margin: 10px; } @@ -32,8 +32,6 @@ .vertical { writing-mode: vertical-rl; } - - @@ -53,7 +51,7 @@

    Heading

    - +} - +
    diff --git a/logical/border-longhands.html b/logical/border-longhands.html index 0dd9da64..f2f77aaa 100644 --- a/logical/border-longhands.html +++ b/logical/border-longhands.html @@ -1,105 +1,98 @@ - + - + Border Properties - + - + - +
    -
    -
    - Borders use physical properties. -
    +
    +
    Borders use physical properties.
    -
    - Borders use logical properties. -
    -
    +
    Borders use logical properties.
    +
    - + border-block-start: 2px solid hotpink; + border-inline-end-style: dotted; + border-inline-end-color: goldenrod; + border-inline-end-width: 5px; + border-block-end: 4px double black; + border-inline-start: none; +} - +
    +
    + Borders use logical properties. +
    +
    - +
    - - - - \ No newline at end of file + + + diff --git a/logical/float.html b/logical/float.html index fa9eefd8..b8327c1b 100644 --- a/logical/float.html +++ b/logical/float.html @@ -1,91 +1,89 @@ - + - + logical values for float - + - + - +
    -
    -
    -
    - Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach - avocado daikon napa cabbage asparagus winter purslane kale. -
    -
    - Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water - spinach - avocado daikon napa cabbage asparagus winter purslane kale. -
    -
    +
    +
    +
    + Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce + kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus + winter purslane kale. +
    +
    + Turnip greens yarrow ricebean rutabaga endive cauliflower sea + lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage + asparagus winter purslane kale. +
    +
    +
    - + float: inline-start; +} - - +
    - +
    - - - - \ No newline at end of file + + + diff --git a/logical/intro-feature-queries.html b/logical/intro-feature-queries.html index b548b73d..6143d132 100644 --- a/logical/intro-feature-queries.html +++ b/logical/intro-feature-queries.html @@ -1,64 +1,64 @@ - + - + Feature Queries - + - + - +
    -
    -
    One
    -
    Two
    -
    Three
    -
    Four
    -
    +
    +
    One
    +
    Two
    +
    Three
    +
    Four
    +
    - +} - - +
    One
    +
    Two
    +
    Three
    +
    Four
    +
    - +
    - - - - \ No newline at end of file + + + diff --git a/logical/intro-grid-example.html b/logical/intro-grid-example.html index dfc0ff98..a7d7ecdb 100644 --- a/logical/intro-grid-example.html +++ b/logical/intro-grid-example.html @@ -1,74 +1,71 @@ - + - + Grid and writing modes example - + - + - +
    -
    -
    One
    -
    Two
    -
    Three
    -
    Four
    -
    +
    +
    One
    +
    Two
    +
    Three
    +
    Four
    +
    - + writing-mode: vertical-rl; + inline-size: 400px; +} - - +
    One
    +
    Two
    +
    Three
    +
    Four
    +
    - +
    - - - - \ No newline at end of file + + + diff --git a/logical/margin-longhands.html b/logical/margin-longhands.html index 4c01f857..99dea384 100644 --- a/logical/margin-longhands.html +++ b/logical/margin-longhands.html @@ -1,120 +1,116 @@ - + - + Margin Longhands - + - + - +
    -
    -
    -
    - margin-top: 5px
    - margin-right: 0
    - margin-bottom: 2em
    - margin-left: 50px -
    -
    -
    -
    - margin-block-start: 5px
    - margin-inline-end: 0
    - margin-block-end: 2em
    - margin-inline-start: 50px -
    -
    +
    +
    +
    + margin-top: 5px
    + margin-right: 0
    + margin-bottom: 2em
    + margin-left: 50px +
    +
    +
    + margin-block-start: 5px
    + margin-inline-end: 0
    + margin-block-end: 2em
    + margin-inline-start: 50px +
    +
    +
    - + margin-block-start: 5px; + margin-inline-end: 0; + margin-block-end: 2em; + margin-inline-start: 50px; +} - - + +
    - +
    - - - - \ No newline at end of file + + + diff --git a/logical/padding-longhands.html b/logical/padding-longhands.html index c2809ec0..1c482a96 100644 --- a/logical/padding-longhands.html +++ b/logical/padding-longhands.html @@ -1,111 +1,107 @@ - + - + Padding Longhands - + - + - +
    -
    -
    - padding-top: 5px
    - padding-right: 0
    - padding-bottom: 2em
    - padding-left: 50px -
    +
    +
    + padding-top: 5px
    + padding-right: 0
    + padding-bottom: 2em
    + padding-left: 50px +
    -
    - padding-block-start: 5px
    - padding-inline-end: 0
    - padding-block-end: 2em
    - padding-inline-start: 50px -
    +
    + padding-block-start: 5px
    + padding-inline-end: 0
    + padding-block-end: 2em
    + padding-inline-start: 50px
    +
    - + padding-block-start: 5px; + padding-inline-end: 0; + padding-block-end: 2em; + padding-inline-start: 50px; +} - +
    + padding-top: 5px
    + padding-right: 0
    + padding-bottom: 2em
    + padding-left: 50px +
    +
    + padding-block-start: 5px
    + padding-inline-end: 0
    + padding-block-end: 2em
    + padding-inline-start: 50px +
    +
    - +
    - - - - \ No newline at end of file + + + diff --git a/logical/positioning-inset.html b/logical/positioning-inset.html index b04ca9c9..8d09853c 100644 --- a/logical/positioning-inset.html +++ b/logical/positioning-inset.html @@ -1,99 +1,95 @@ - + - + inset properties for positioning - + - + - +
    -
    -
    -
    -
    -
    -
    -
    +
    +
    +
    +
    +
    +
    +
    +
    - + position: absolute; + inset-block-start: 20px; + inset-inline-end: 0; +} - - +
    +
    +
    +
    +
    +
    +
    - +
    - - - - \ No newline at end of file + + + diff --git a/logical/size-inline-block.html b/logical/size-inline-block.html index 7cbaafbe..b98315f2 100644 --- a/logical/size-inline-block.html +++ b/logical/size-inline-block.html @@ -1,59 +1,56 @@ - + - + Size: inline-size and block-size - + - + - +
    -
    -
    - I have a width of 200px and a height of 100px. -
    +
    +
    + I have a width of 200px and a height of 100px. +
    -
    - I have an inline-size of 200px and a block-size of 100px. -
    +
    + I have an inline-size of 200px and a block-size of 100px.
    +
    - + inline-size: 200px; + block-size: 100px; +} - +
    + I have a width of 200px and a height of 100px. +
    +
    + I have an inline-size of 200px and a block-size of 100px. +
    +
    - +
    - - - - \ No newline at end of file + + + diff --git a/logical/size-max.html b/logical/size-max.html index 599f830b..f84a81a8 100644 --- a/logical/size-max.html +++ b/logical/size-max.html @@ -1,84 +1,76 @@ - + - + Size: max-inline-size - + - + - +
    -
    -
    - I have a max-width of 200px. -
    +
    +
    I have a max-width of 200px.
    -
    - I have an max-inline-size of 200px. -
    -
    +
    I have an max-inline-size of 200px.
    +
    - + max-inline-size: 200px; +} - +
    + I have a max-width of 200px. +
    +
    + I have an max-inline-size of 200px. +
    +
    - +
    - - - - \ No newline at end of file + + + diff --git a/logical/size-min.html b/logical/size-min.html index 6ea74dda..9b2c6955 100644 --- a/logical/size-min.html +++ b/logical/size-min.html @@ -1,88 +1,84 @@ - + - + Size: min-block-size - + - + - +
    -
    -
    - I have a width of 200px and a height of 100px. -
    +
    +
    + I have a width of 200px and a height of 100px. +
    -
    - I have an inline-size of 200px and a min-block-size of 5em. -
    +
    + I have an inline-size of 200px and a min-block-size of 5em.
    +
    - + inline-size: 200px; + min-block-size: 5em; +} - +
    + I have a width of 200px and a min-height of 5em. +
    +
    + I have an inline-size of 200px and a min-block-size of 5em. +
    +
    - +
    - - - - \ No newline at end of file + + + diff --git a/logical/size-resize.html b/logical/size-resize.html index 54f34586..a887d52d 100644 --- a/logical/size-resize.html +++ b/logical/size-resize.html @@ -1,62 +1,61 @@ - + - + Size: the resize property - + - + - +
    -
    -
    - I have a width of 200px and a height of 100px. I can be resized horizontally. -
    +
    +
    + I have a width of 200px and a height of 100px. I can be resized + horizontally. +
    -
    - I have an inline-size of 200px and a block-size of 100px. I can be resized in the inline direction. -
    +
    + I have an inline-size of 200px and a block-size of 100px. I can be + resized in the inline direction.
    +
    - + inline-size: 200px; + block-size: 100px; + resize: inline; +} - +
    + I have a width of 200px and a height of 100px. I can be resized horizontally. +
    +
    + I have an inline-size of 200px and a block-size of 100px. I can be resized in the inline direction. +
    +
    - +
    - - - - \ No newline at end of file + + + diff --git a/logical/text-align.html b/logical/text-align.html index ea343e01..d21f6e4f 100644 --- a/logical/text-align.html +++ b/logical/text-align.html @@ -1,80 +1,73 @@ - + - + text-align logical values - + - + - +
    -
    -
    - Aligned text -
    -
    - Aligned text -
    -
    +
    +
    Aligned text
    +
    Aligned text
    +
    - + text-align: end; +} - - +
    + Aligned text +
    +
    + Aligned text +
    +
    - +
    - - - - \ No newline at end of file + + + diff --git a/masking/mask-border.html b/masking/mask-border.html index c8a4510b..2202e9b1 100644 --- a/masking/mask-border.html +++ b/masking/mask-border.html @@ -1,143 +1,134 @@ - + - - - - Masking: the mask-origin property - - - + + + + +
    +
    + This element is surrounded by a bitmap-based mask border! Pretty neat, + isn't it? +
    +
    + + - -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/masking/mask-clip.html b/masking/mask-clip.html index aa2707e4..09567db9 100644 --- a/masking/mask-clip.html +++ b/masking/mask-clip.html @@ -1,90 +1,88 @@ - + - - - - Masking: the mask-clip property - - - - - - -
    -
    -
    - -
    - - - -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/masking/mask-composite.html b/masking/mask-composite.html index 2e33236a..cef0408c 100644 --- a/masking/mask-composite.html +++ b/masking/mask-composite.html @@ -1,69 +1,88 @@ - + - - - - Masking: the mask-origin property - - - + + + + +
    +
    +
    + + + +
    +
    + + + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/masking/mask-image.html b/masking/mask-image.html index 9e4563e9..da0bee0b 100644 --- a/masking/mask-image.html +++ b/masking/mask-image.html @@ -1,124 +1,118 @@ - + - - - - Masking: the mask-image property - - - + + + + +
    +
    +
    + + + +
    +
    + + + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/masking/mask-mode.html b/masking/mask-mode.html index 6142c442..606e8cdf 100644 --- a/masking/mask-mode.html +++ b/masking/mask-mode.html @@ -1,128 +1,122 @@ - + - - - - Masking: the mask-mode property - - - + + + + +
    +
    +
    + + + +
    +
    + + + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/masking/mask-origin.html b/masking/mask-origin.html index 7e61cb79..7196af3b 100644 --- a/masking/mask-origin.html +++ b/masking/mask-origin.html @@ -1,129 +1,124 @@ - + - - - - Masking: the mask-origin property - - - - - - -
    -
    -
    - -
    - - - -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/masking/mask-position.html b/masking/mask-position.html index 0fa67e17..326cf4c1 100644 --- a/masking/mask-position.html +++ b/masking/mask-position.html @@ -1,92 +1,94 @@ - + - - - - Masking: the mask-position property - - - - - - -
    -
    + + + + Masking: the mask-position property + + + + + + +
    +
    -
    -
    +
    +
    - - -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/masking/mask-repeat.html b/masking/mask-repeat.html index 879dd0ca..098d0579 100644 --- a/masking/mask-repeat.html +++ b/masking/mask-repeat.html @@ -1,127 +1,122 @@ - + - - - - Masking: the mask-origin property - - - + + + + +
    +
    +
    + + + +
    +
    + + + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/masking/mask-size.html b/masking/mask-size.html index 1af2d9a7..4f88f497 100644 --- a/masking/mask-size.html +++ b/masking/mask-size.html @@ -1,127 +1,122 @@ - + - - - - Masking: the mask-origin property - - - + + + + +
    +
    +
    + + + +
    +
    + + + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/min-max-clamp/index.html b/min-max-clamp/index.html index 540456df..63897c81 100644 --- a/min-max-clamp/index.html +++ b/min-max-clamp/index.html @@ -1,4 +1,4 @@ - + @@ -16,7 +16,7 @@ h1 { letter-spacing: 2px; - font-size: clamp(1.8rem, 2.5vw, 2.8rem) + font-size: clamp(1.8rem, 2.5vw, 2.8rem); } p { @@ -27,8 +27,29 @@

    Simple responsive test

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In orci orci, eleifend id risus nec, mattis rutrum velit. Suspendisse fringilla egestas erat eu convallis. Phasellus eu velit ut magna dapibus elementum cursus at ligula. Ut tempus varius nibh, nec auctor sapien iaculis sit amet. Fusce iaculis, libero quis elementum viverra, nulla ante accumsan lectus, sit amet convallis lacus ipsum vel est. Curabitur et urna non est consectetur pulvinar vel id risus. Ut vestibulum, sem in semper aliquet, felis arcu euismod sapien, ac imperdiet massa nisl quis sem. Vestibulum ac elementum felis, in tempor velit. Pellentesque purus ex, mattis at ornare quis, porta condimentum mi. Donec vestibulum ligula vel nulla blandit, quis euismod nulla vestibulum. Suspendisse potenti. Nunc neque mauris, tempor sed facilisis at, ultrices eget nulla. Pellentesque convallis ante nec augue porttitor, id tempus ante luctus.

    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. In orci orci, + eleifend id risus nec, mattis rutrum velit. Suspendisse fringilla egestas + erat eu convallis. Phasellus eu velit ut magna dapibus elementum cursus at + ligula. Ut tempus varius nibh, nec auctor sapien iaculis sit amet. Fusce + iaculis, libero quis elementum viverra, nulla ante accumsan lectus, sit + amet convallis lacus ipsum vel est. Curabitur et urna non est consectetur + pulvinar vel id risus. Ut vestibulum, sem in semper aliquet, felis arcu + euismod sapien, ac imperdiet massa nisl quis sem. Vestibulum ac elementum + felis, in tempor velit. Pellentesque purus ex, mattis at ornare quis, + porta condimentum mi. Donec vestibulum ligula vel nulla blandit, quis + euismod nulla vestibulum. Suspendisse potenti. Nunc neque mauris, tempor + sed facilisis at, ultrices eget nulla. Pellentesque convallis ante nec + augue porttitor, id tempus ante luctus. +

    -

    Integer rutrum sollicitudin tellus, quis cursus nulla scelerisque nec. Nunc eu facilisis lorem. Maecenas faucibus sapien eleifend, semper tellus at, pharetra quam. Cras feugiat vulputate tortor at rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam non felis quis sem lobortis sodales vel id libero. Phasellus sit amet placerat lorem.

    +

    + Integer rutrum sollicitudin tellus, quis cursus nulla scelerisque nec. + Nunc eu facilisis lorem. Maecenas faucibus sapien eleifend, semper tellus + at, pharetra quam. Cras feugiat vulputate tortor at rhoncus. Class aptent + taciti sociosqu ad litora torquent per conubia nostra, per inceptos + himenaeos. Nam non felis quis sem lobortis sodales vel id libero. + Phasellus sit amet placerat lorem. +

    diff --git a/modules/animation.html b/modules/animation.html index fd7f2a56..68e85a12 100644 --- a/modules/animation.html +++ b/modules/animation.html @@ -1,4 +1,4 @@ - + @@ -138,11 +138,12 @@ height: 150px; background: #ffffff; border-radius: 0 0 90px 33% / 0 0 45px 50px; - box-shadow: - 5px 15px 15px white, - -5px 15px 15px white, - 0 20px 20px rgba(125 125 125 / 0.5); - animation: clouds ease 5s alternate infinite 0.2s, + box-shadow: + 5px 15px 15px white, + -5px 15px 15px white, + 0 20px 20px rgba(125 125 125 / 0.5); + animation: + clouds ease 5s alternate infinite 0.2s, wind ease-out 4s alternate infinite; } .ground { @@ -196,7 +197,7 @@ div[class] { animation-play-state: paused; } - /* When the div is hovered, the animation plays. Also, + /* When the div is hovered, the animation plays. Also, when the input is checked, the animation coming after the checked checkbox plays */ div:hover *, input:checked ~ div * { diff --git a/modules/backgrounds.html b/modules/backgrounds.html index ad5d680f..6f9923b0 100644 --- a/modules/backgrounds.html +++ b/modules/backgrounds.html @@ -1,4 +1,4 @@ - + @@ -28,11 +28,13 @@ /* the third transparent background image was added to provide space for the background color to show through */ background-color: currentcolor; background-position: center; - background-size: 60px 60px, 120px 120px; + background-size: + 60px 60px, + 120px 120px; background-clip: content-box, content-box, padding-box; - box-shadow: + box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.4), - inset -5px -5px 5px rgba(0, 0, 0, 0.4), + inset -5px -5px 5px rgba(0, 0, 0, 0.4), 5px 5px 5px rgba(0, 0, 0, 0.4), -5px -5px 5px rgba(0, 0, 0, 0.4); } diff --git a/modules/basicUI.html b/modules/basicUI.html index 58eab64c..1f2bd488 100644 --- a/modules/basicUI.html +++ b/modules/basicUI.html @@ -1,4 +1,4 @@ - + @@ -50,13 +50,16 @@ Be careful not to ruin usability: try resizing these. + + + diff --git a/modules/colors.html b/modules/colors.html index 1974bbae..d15c47d6 100644 --- a/modules/colors.html +++ b/modules/colors.html @@ -1,4 +1,4 @@ - + @@ -41,7 +41,9 @@ black 180deg 270deg, transparent 270deg 360deg ); - background-size: 100% 100%, 20px 20px; + background-size: + 100% 100%, + 20px 20px; padding: 0; margin: 0; } @@ -164,8 +166,7 @@ h = ((g - b) / delta) % 6; } else if (cmax === g) { h = (b - r) / delta + 2; - } - else h = (r - g) / delta + 4; + } else h = (r - g) / delta + 4; h = Math.round(h * 60); @@ -175,7 +176,7 @@ } l = (cmax + cmin) / 2; - s = (delta === 0) ? 0 : delta / (1 - Math.abs(2 * l - 1)); + s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1)); s = Number((s * 100).toFixed(1)); l = Number((l * 100).toFixed(1)); @@ -189,7 +190,7 @@ function createHWB(h, s, l, opacity) { const cell = document.querySelector("#HWB td"); - const chroma = s * (1 - Math.abs(l/50 - 1)); + const chroma = s * (1 - Math.abs(l / 50 - 1)); let W = l - chroma / 2; let B = 100 - l - chroma / 2; W = W.toFixed(1); diff --git a/modules/compositing.html b/modules/compositing.html index fd739b15..79f0d4d4 100644 --- a/modules/compositing.html +++ b/modules/compositing.html @@ -1,4 +1,4 @@ - + diff --git a/modules/filters.html b/modules/filters.html index b6af49fe..fa9c14bd 100644 --- a/modules/filters.html +++ b/modules/filters.html @@ -1,4 +1,4 @@ - + @@ -171,7 +171,7 @@ /* do function */ changeCSS(); }, - false + false, ); } document.querySelector("button").addEventListener( @@ -181,7 +181,7 @@ changeCSS(); }, 50); }, - false + false, ); function changeCSS() { @@ -227,9 +227,7 @@ } function hueRotate() { let hueRotateValue = document.getElementsByName("hueRotate")[0].value; - return hueRotateValue == 0 - ? "" - : `hue-rotate(${hueRotateValue}turn) `; + return hueRotateValue == 0 ? "" : `hue-rotate(${hueRotateValue}turn) `; } function invert() { let invertValue = document.getElementsByName("invert")[0].value; diff --git a/modules/generated_content.html b/modules/generated_content.html index 7dc529dd..da599e48 100644 --- a/modules/generated_content.html +++ b/modules/generated_content.html @@ -1,58 +1,105 @@ - + Generated content diff --git a/modules/multicol.html b/modules/multicol.html index 6c79ee8f..443a56e1 100644 --- a/modules/multicol.html +++ b/modules/multicol.html @@ -1,4 +1,4 @@ - + diff --git a/modules/overflow.html b/modules/overflow.html index 5bbca06e..e0133503 100644 --- a/modules/overflow.html +++ b/modules/overflow.html @@ -1,4 +1,4 @@ - + @@ -130,15 +130,15 @@ Oh, Rubber Duckie, you're the one You make bath time lots of fun Rubber Duckie, I'm awfully fond of you - + Rubber Duckie, joy of joys When I squeeze you, you make noise Rubber Duckie, you're my very best friend, it's true - + Oh, every day when I make my way to the tubby I find a little fella who's cute and yellow and chubby Rub-a-dub-dubby - + Rubber Duckie, you're so fine And I'm lucky that you're mine Rubber Duckie, I'm awfully fond of you diff --git a/modules/scroll_snap.html b/modules/scroll_snap.html index d6807c29..b095079d 100644 --- a/modules/scroll_snap.html +++ b/modules/scroll_snap.html @@ -1,4 +1,4 @@ - + @@ -6,15 +6,15 @@ Scroll snap - - + - + + fill='context-stroke' stroke='context-fill red'/>" + /> diff --git a/multicol/balancing/auto.html b/multicol/balancing/auto.html index 15cca0ae..b7307a94 100644 --- a/multicol/balancing/auto.html +++ b/multicol/balancing/auto.html @@ -1,134 +1,134 @@ - + - - - - Multicol example - auto - - + + + + +
    +
    + balloons + +

    + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh + onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. +

    - section input { - display: block; - margin: 5px; - } - img { - max-width: 100%; -} - - - - - - -
    -
    - balloons - -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

    -

    Gumbo beet greens corn soko endive gumbo gourd.

    - - -
    - -
    - - + -
    - -
    - - + +
    +
    + +
    + + diff --git a/multicol/balancing/balance.html b/multicol/balancing/balance.html index b1706b90..4ad545f4 100644 --- a/multicol/balancing/balance.html +++ b/multicol/balancing/balance.html @@ -1,134 +1,135 @@ - + - - - - Multicol example - balancing - - - - - - -
    -
    - balloons - -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

    - -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion.

    - - -
    - -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/multicol/basics/column-count-width.html b/multicol/basics/column-count-width.html index aaafcb9c..03a340f7 100644 --- a/multicol/basics/column-count-width.html +++ b/multicol/basics/column-count-width.html @@ -1,124 +1,136 @@ - + - - - - Multicol example - column-count and column-width - - - - - - -
    -
    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

    - -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    - -

    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko.

    -
    - -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/multicol/basics/column-count.html b/multicol/basics/column-count.html index afa30a61..d60b94dc 100644 --- a/multicol/basics/column-count.html +++ b/multicol/basics/column-count.html @@ -1,122 +1,134 @@ - + - - - - Multicol example - column-count - - - - - - -
    -
    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

    - -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    - -

    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko.

    -
    - -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/multicol/basics/column-width.html b/multicol/basics/column-width.html index 3501b2ff..aeb5ea47 100644 --- a/multicol/basics/column-width.html +++ b/multicol/basics/column-width.html @@ -1,122 +1,134 @@ - + - - - - Multicol example - column-width - - - - - - -
    -
    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

    - -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    - -

    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko.

    -
    - -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/multicol/fragmentation/break-before.html b/multicol/fragmentation/break-before.html index 3f6de2c5..ea50c28b 100644 --- a/multicol/fragmentation/break-before.html +++ b/multicol/fragmentation/break-before.html @@ -1,155 +1,159 @@ - + - - - - Multicol example - break-before - - - + - - - -
    -
    - -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon.

    + } + + + + +
    +
    +

    + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh + onion daikon. +

    My heading

    - -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    - -

    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce.

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

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon.

    + +

    My heading

    + +

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    + +

    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce.

    + + +
    +
    + +
    + + diff --git a/multicol/fragmentation/break-inside.html b/multicol/fragmentation/break-inside.html index 34282561..c6ec0578 100644 --- a/multicol/fragmentation/break-inside.html +++ b/multicol/fragmentation/break-inside.html @@ -1,149 +1,154 @@ - + - - - - Multicol example - break-inside - - - + - + } + + - -
    -
    + +
    +
    - balloons -
    Balloons
    + balloons +
    Balloons
    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

    - -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.

    - - -
    - -
    - - + -
    - -
    - - + +
    +
    + +
    + + diff --git a/multicol/fragmentation/orphans.html b/multicol/fragmentation/orphans.html index 0d85184a..a52ae999 100644 --- a/multicol/fragmentation/orphans.html +++ b/multicol/fragmentation/orphans.html @@ -1,148 +1,149 @@ - + - - - - Multicol example - orphans - - - - - - -
    -
    - -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon.

    - -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    - -

    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce.

    - - -
    - -
    - + - +
    + +
    + + + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/multicol/overflow/image-max-width.html b/multicol/overflow/image-max-width.html index a6d7b916..337969ee 100644 --- a/multicol/overflow/image-max-width.html +++ b/multicol/overflow/image-max-width.html @@ -1,132 +1,144 @@ - + - - - - Multicol example - image with max-width - - - + - - - -
    -
    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

    - - balloons - -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    - -

    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko.

    -
    - -
    - - + -
    - -
    - - + +
    + +
    + + diff --git a/multicol/overflow/image.html b/multicol/overflow/image.html index 42d9f057..c1cdba3a 100644 --- a/multicol/overflow/image.html +++ b/multicol/overflow/image.html @@ -1,126 +1,138 @@ - + - - - - Multicol example - image overflow - - - - - - -
    -
    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

    - - balloons - -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    - -

    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko.

    -
    - -
    - - + -
    - -
    - - + +
    + +
    + + diff --git a/multicol/overflow/min-height.html b/multicol/overflow/min-height.html index 614bdcb0..38a5a4c2 100644 --- a/multicol/overflow/min-height.html +++ b/multicol/overflow/min-height.html @@ -1,126 +1,138 @@ - + - - - - Multicol example - min-height media query - - - - - -
    -
    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

    + .playable-buttons { + text-align: right; + width: 90%; + max-width: 700px; + padding: 5px 10px 5px 26px; + font-size: 100%; + } -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    - -

    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko.

    -
    + section { + width: 90%; + max-width: 700px; + border: 1px solid #4d4e53; + border-radius: 2px; + padding: 10px 14px 10px 10px; + margin-bottom: 10px; + } -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/multicol/overflow/overflow-inline.html b/multicol/overflow/overflow-inline.html index 1e318096..c3cefef2 100644 --- a/multicol/overflow/overflow-inline.html +++ b/multicol/overflow/overflow-inline.html @@ -1,124 +1,136 @@ - + - - - - Multicol example - inline overflow - - - - - - -
    -
    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

    - -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    - -

    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko.

    -
    - -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/multicol/spanning/h2-span.html b/multicol/spanning/h2-span.html index e8d04a54..56877bda 100644 --- a/multicol/spanning/h2-span.html +++ b/multicol/spanning/h2-span.html @@ -1,137 +1,150 @@ - + - - - - Multicol example - h2 spanning element - - - + - - - -
    -
    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens corn soko endive gumbo gourd.

    + } + + + + +
    +
    +

    + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh + onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo + beet greens corn soko endive gumbo gourd. +

    A heading

    -

    Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    - -

    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko.

    -
    - -
    - - + -
    - -
    - - +
    +
    + +
    + + diff --git a/multicol/spanning/mpb-span.html b/multicol/spanning/mpb-span.html index afe35515..b1a02d20 100644 --- a/multicol/spanning/mpb-span.html +++ b/multicol/spanning/mpb-span.html @@ -1,147 +1,159 @@ - + - - - - Multicol example - broken border and padding - - - + - - - -
    -
    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens corn soko endive gumbo gourd.

    + } + + + + +
    +
    +

    + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh + onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo + beet greens corn soko endive gumbo gourd. +

    -

    A heading

    - -

    Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    - -

    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko.

    +

    A heading

    + +

    + Parsley shallot courgette tatsoi pea sprouts fava bean collard + greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea + peanut soko zucchini. +

    + +

    + Turnip greens yarrow ricebean rutabaga endive cauliflower sea + lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage + asparagus winter purslane kale. Celery potato scallion desert raisin + horseradish spinach carrot soko. +

    -
    - -
    - - + -
    - -
    - - +
    +
    + +
    + + diff --git a/multicol/spanning/nested-h2-span.html b/multicol/spanning/nested-h2-span.html index a4e0b93f..5051643f 100644 --- a/multicol/spanning/nested-h2-span.html +++ b/multicol/spanning/nested-h2-span.html @@ -1,139 +1,152 @@ - + - - - - Multicol example - h2 spanning element inside article - - - + - - - -
    -
    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens corn soko endive gumbo gourd.

    + } + + + + +
    +
    +

    + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh + onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo + beet greens corn soko endive gumbo gourd. +

    -

    A heading

    - -

    Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    - -

    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko.

    +

    A heading

    + +

    + Parsley shallot courgette tatsoi pea sprouts fava bean collard + greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea + peanut soko zucchini. +

    + +

    + Turnip greens yarrow ricebean rutabaga endive cauliflower sea + lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage + asparagus winter purslane kale. Celery potato scallion desert raisin + horseradish spinach carrot soko. +

    -
    - -
    - - + -
    - -
    - - +
    +
    + +
    + + diff --git a/multicol/styling/column-gap.html b/multicol/styling/column-gap.html index c4327c48..a9aeb873 100644 --- a/multicol/styling/column-gap.html +++ b/multicol/styling/column-gap.html @@ -1,124 +1,136 @@ - + - - - - Multicol example - column-gap - - - - - - -
    -
    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

    - -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    - -

    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko.

    -
    - -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/multicol/styling/column-rule-wide.html b/multicol/styling/column-rule-wide.html index 74cb7170..2b7381c0 100644 --- a/multicol/styling/column-rule-wide.html +++ b/multicol/styling/column-rule-wide.html @@ -1,126 +1,138 @@ - + - - - - Multicol example - column-rule properties - - - - - - -
    -
    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

    - -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    - -

    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko.

    -
    - -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/multicol/styling/column-rule.html b/multicol/styling/column-rule.html index a3484612..f9821a7b 100644 --- a/multicol/styling/column-rule.html +++ b/multicol/styling/column-rule.html @@ -1,128 +1,140 @@ - + - - - - Multicol example - column-rule properties - - - - - - -
    -
    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

    - -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    - -

    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko.

    -
    - -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/object-fit-basics/index.html b/object-fit-basics/index.html index f3c2dcb6..271a5558 100644 --- a/object-fit-basics/index.html +++ b/object-fit-basics/index.html @@ -1,70 +1,128 @@ - + Object-fit basics - - + +

    Object fit basics

    -

    This page illustrates different object-fit settings. It is part of the Exploring object-fit Mozilla Hacks post.

    +

    + This page illustrates different object-fit settings. It is part of the + Exploring object-fit + Mozilla Hacks post. +

    object-fit: contain

    -

    with object-fit: contain, the image is letterboxed inside the image element, retaining its aspect ratio.

    +

    + with object-fit: contain, the image is letterboxed inside the + image element, retaining its aspect ratio. +

    - with object-fit contain, the image is trapped inside the image element, retaining aspect ratio. + with object-fit contain, the image is trapped inside the image element, retaining aspect ratio.

    object-fit: cover

    -

    with object-fit: cover, the image completely covers the image element — it is shown completely along the shortest dimension, and will be cut off in the other direction.

    +

    + with object-fit: cover, the image completely covers the image + element — it is shown completely along the shortest dimension, and will be + cut off in the other direction. +

    - with object-fit cover, the image completely covers the image element and is cropped along the longest dimension + with object-fit cover, the image completely covers the image element and is cropped along the longest dimension

    object-fit: fill

    -

    Object-fill: fill can override a video’s intrinsic aspect ratio, forcing it to completely fill the <video> element. This is good for correcting videos with broken aspect ratios.

    - -
@@ -54,6 +64,5 @@

Shapes from Images and Gradients

  • Radial Gradients
  • With generated content
    • - - \ No newline at end of file + diff --git a/shapes/overview/box.html b/shapes/overview/box.html index 77912238..45e9a3e3 100644 --- a/shapes/overview/box.html +++ b/shapes/overview/box.html @@ -1,64 +1,66 @@ - + - - - - CSS Shapes Overview: Box values + + + + CSS Shapes Overview: Box values - - + - - - -
    -
    -
    -

    One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery. Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.

    -
    + } + + -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/shapes/overview/circle.html b/shapes/overview/circle.html index ee9020f7..f7fd308e 100644 --- a/shapes/overview/circle.html +++ b/shapes/overview/circle.html @@ -1,117 +1,127 @@ - + - - - - CSS Shapes Overview: circle() + + + + CSS Shapes Overview: circle() - - + - - - -
    -
    - balloon -

    One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery. Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”

    -
    + } + + -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/shapes/overview/clip-path.html b/shapes/overview/clip-path.html index e79152dd..f92c8377 100644 --- a/shapes/overview/clip-path.html +++ b/shapes/overview/clip-path.html @@ -1,119 +1,129 @@ - + - - - - CSS Shapes Overview: clip-path + + + + CSS Shapes Overview: clip-path - - + - - - -
    -
    - balloon -

    One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery. Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.

    -
    + clip-path: ellipse(40% 50%); + } + + -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/shapes/overview/generated-content.html b/shapes/overview/generated-content.html index 6346e417..76d4bd5f 100644 --- a/shapes/overview/generated-content.html +++ b/shapes/overview/generated-content.html @@ -1,64 +1,66 @@ - + - - - - CSS Shapes Overview: Using Generated Content + + + + CSS Shapes Overview: Using Generated Content - - + - - - -
    -
    -

    One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery. Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.

    -
    + } + + -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/shapes/overview/image.html b/shapes/overview/image.html index 8d1ec33c..2d9b61c7 100644 --- a/shapes/overview/image.html +++ b/shapes/overview/image.html @@ -1,117 +1,127 @@ - + - - - - CSS Shapes Overview: image + + + + CSS Shapes Overview: image - - + - - - -
    -
    - balloon -

    One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery. Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.

    -
    + } + + -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/shapes/overview/shape-margin.html b/shapes/overview/shape-margin.html index 75820276..29181ab1 100644 --- a/shapes/overview/shape-margin.html +++ b/shapes/overview/shape-margin.html @@ -1,119 +1,129 @@ - + - - - - CSS Shapes Overview: shape-margin + + + + CSS Shapes Overview: shape-margin - - + - - - -
    -
    - balloon -

    One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery. Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.

    -
    + } + + -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/shapes/overview/threshold.html b/shapes/overview/threshold.html index d98d973d..37ebe74a 100644 --- a/shapes/overview/threshold.html +++ b/shapes/overview/threshold.html @@ -1,85 +1,104 @@ - + - - - - CSS Shapes Overview: circle() + + + + CSS Shapes Overview: circle() - - + - - - -
    -
    -
    -

    One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery. Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.

    -
    + background-image: linear-gradient( + 30deg, + rebeccapurple, + transparent 80%, + transparent + ); + shape-outside: linear-gradient( + 30deg, + rebeccapurple, + transparent 80%, + transparent + ); + shape-image-threshold: 0.4; + } + + -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/target-text/index.html b/target-text/index.html index 939d78cf..94b78dd5 100644 --- a/target-text/index.html +++ b/target-text/index.html @@ -1,67 +1,285 @@ - + ::target-text demo -
    -

    ::target-text

    +
    +

    ::target-text

    -

    Not a few of our readers will remember the ascent of Nadar’s colossal balloon from Paris, on Sunday, the 18th of October, 1863. This balloon was remarkable as having attached to it a regular two-story house for a car. Its ascent was witnessed by nearly half a million of persons. The balloon, after passing over the eastern part of France, Belgium, and Holland, suffered a disastrous descent in Hanover the day after it started on its perilous journey. It was a fool-hardy enterprise to construct such a gigantic and unmanageable balloon, presenting such an immense surface to the atmosphere, and being so susceptible to adverse aerial currents as to become the helpless prey of the elements; and it was still more fool-hardy to place the lives of its passengers at the mercy of such terrible and ungovernable forces. A large section of the public laboured under the delusion that Nadar’s balloon was one capable of being steered. In reality, however, the ‘Geant’ was unquestionably the most rebellious and unruly specimen of its class that has been made since the days of Montgolfier. The object in view when this formidable monster was designed and constructed was to create the means to collect sufficient funds to form a “Free Association for Aerial Navigation by means of MACHINES HEAVIER THAN AIR,” and for the construction of machines on this principle. The receipts from the exhibition of the “Geant” were intended to form the first capital of the association. The hopes, however, of the promoters have not been realised in this respect; for while the expenses of the construction of the balloon have amounted, directly and indirectly, to the sum of L8,300, its two ascents in Paris and its exhibition in London produced only L3,300.

    +

    + Not a few of our readers will remember the ascent of Nadar’s colossal + balloon from Paris, on Sunday, the 18th of October, 1863. This balloon + was remarkable as having attached to it a regular two-story house for a + car. Its ascent was witnessed by nearly half a million of persons. The + balloon, after passing over the eastern part of France, Belgium, and + Holland, suffered a disastrous descent in Hanover the day after it + started on its perilous journey. It was a fool-hardy enterprise to + construct such a gigantic and unmanageable balloon, presenting such an + immense surface to the atmosphere, and being so susceptible to adverse + aerial currents as to become the helpless prey of the elements; and it + was still more fool-hardy to place the lives of its passengers at the + mercy of such terrible and ungovernable forces. A large section of the + public laboured under the delusion that Nadar’s balloon was one capable + of being steered. In reality, however, the ‘Geant’ was unquestionably + the most rebellious and unruly specimen of its class that has been made + since the days of Montgolfier. The object in view when this formidable + monster was designed and constructed was to create the means to collect + sufficient funds to form a “Free Association for Aerial Navigation by + means of MACHINES HEAVIER THAN AIR,” and for the construction of + machines on this principle. The receipts from the exhibition of the + “Geant” were intended to form the first capital of the association. The + hopes, however, of the promoters have not been realised in this respect; + for while the expenses of the construction of the balloon have amounted, + directly and indirectly, to the sum of L8,300, its two ascents in Paris + and its exhibition in London produced only L3,300. +

    -

    Space forbids us to enter at length on the various stages of the idea of aerial navigation by means of an apparatus heavier than the atmosphere. The idea is not, however, by any means so absurd as it appears at first sight. Those who, like Arago, declare that the word “impossible” does not exist, except in the higher mathematics, and those who look hopefully to the future instead of resting content with the past, will join in applauding the spirit which dictated the manifesto of aerial locomotion to the founder of the association which we are about to describe. M. Babinet, speaking on this subject before the French Polytechnic Association, said: “It is absurd to talk of guiding balloons. How will you set about it? How is it possible that a balloon—say, for instance, like the Flesselles, whose diameter measures 120 feet—can resist and manoeuvre against opposing winds or currents of air? It would require a power equal to 400 horses for the sails of a ship to struggle on equal terms with the wind. Suppose an impossibility, namely, that a balloon could carry with it a force equal to 400 horse-power; this result would be of little use, for under the immense weight the fragile covering of the balloon would instantly collapse. If all the horses of a regiment were harnessed to the car of a balloon by means of a long rope, the result would be that the balloon would fly into shivers, being too fragile to withstand these two opposing forces. Man must seek to raise himself in the air by another mode of operation altogether, if he wish to guide himself at the same time. Some time ago I bought a play thing, very much in vogue at that time, called a Stropheor. This toy was composed of a small rotating screw propeller, which revolved on its own support when the piece of string wound round it was pulled sharply. The screw was rather heavy, weighing nearly a quarter of a pound, and the wings were of tin, very broad and thick. This machine, however, was rather too eccentric for parlour use, for its flight was so violent that it was continually breaking the pier glass, if there was one in the room; and, failing this, it next attacked the windows. The ascending force of this machine is so great that I have seen one of them fly over Antwerp Cathedral, which is one of the highest edifices in the world. The air from underneath the machine is exhausted by the action of the screw, which, passing under the wings, causes a vacuum, while the air above it replenishes and fills this void, and under the influence of these two causes the apparatus mounts from the earth. But the problem is not solved by means of this plaything, whose motive power is exterior to it. Messrs. Nadar, Ponton, D’Amecourt, and De la Landelle teach us better than this, although the wings of their different models are entirely unworthy of men who desire to demonstrate a truth to short-lived mortals. We have only arrived as yet at the infancy of the process, but we have made a good beginning, for, having once proved that a machine capable of raising itself in the air, wholly unaided from without, can be made, we have overcome with this apparently small result the whole difficulty. The principle of propulsion by means of a screw is by no means a novelty. It was first utilised in windmills, whose sails are nothing more nor less than an immense screw which is turned by the action of the wind on its surface. In the case of turbine water-wheels, where perhaps 970 cubic feet of water are utilised by means of a mechanism not larger than a hat, we see another illustration of it, with this difference, that water takes the place of wind as the motive power.

    +

    + Space forbids us to enter at length on the various stages of the idea of + aerial navigation by means of an apparatus heavier than the atmosphere. + The idea is not, however, by any means so absurd as it appears at first + sight. Those who, like Arago, declare that the word “impossible” does + not exist, except in the higher mathematics, and those who look + hopefully to the future instead of resting content with the past, will + join in applauding the spirit which dictated the manifesto of aerial + locomotion to the founder of the association which we are about to + describe. M. Babinet, speaking on this subject before the French + Polytechnic Association, said: “It is absurd to talk of guiding + balloons. How will you set about it? How is it possible that a + balloon—say, for instance, like the Flesselles, whose diameter measures + 120 feet—can resist and manoeuvre against opposing winds or currents of + air? It would require a power equal to 400 horses for the sails of a + ship to struggle on equal terms with the wind. Suppose an impossibility, + namely, that a balloon could carry with it a force equal to 400 + horse-power; this result would be of little use, for under the immense + weight the fragile covering of the balloon would instantly collapse. If + all the horses of a regiment were harnessed to the car of a balloon by + means of a long rope, the result would be that the balloon would fly + into shivers, being too fragile to withstand these two opposing forces. + Man must seek to raise himself in the air by another mode of operation + altogether, if he wish to guide himself at the same time. Some time ago + I bought a play thing, very much in vogue at that time, called a + Stropheor. This toy was composed of a small rotating screw propeller, + which revolved on its own support when the piece of string wound round + it was pulled sharply. The screw was rather heavy, weighing nearly a + quarter of a pound, and the wings were of tin, very broad and thick. + This machine, however, was rather too eccentric for parlour use, for its + flight was so violent that it was continually breaking the pier glass, + if there was one in the room; and, failing this, it next attacked the + windows. The ascending force of this machine is so great that I have + seen one of them fly over Antwerp Cathedral, which is one of the highest + edifices in the world. The air from underneath the machine is exhausted + by the action of the screw, which, passing under the wings, causes a + vacuum, while the air above it replenishes and fills this void, and + under the influence of these two causes the apparatus mounts from the + earth. But the problem is not solved by means of this plaything, whose + motive power is exterior to it. Messrs. Nadar, Ponton, D’Amecourt, and + De la Landelle teach us better than this, although the wings of their + different models are entirely unworthy of men who desire to demonstrate + a truth to short-lived mortals. We have only arrived as yet at the + infancy of the process, but we have made a good beginning, for, having + once proved that a machine capable of raising itself in the air, wholly + unaided from without, can be made, we have overcome with this apparently + small result the whole difficulty. The principle of propulsion by means + of a screw is by no means a novelty. It was first utilised in windmills, + whose sails are nothing more nor less than an immense screw which is + turned by the action of the wind on its surface. In the case of turbine + water-wheels, where perhaps 970 cubic feet of water are utilised by + means of a mechanism not larger than a hat, we see another illustration + of it, with this difference, that water takes the place of wind as the + motive power. +

    -

    “The aerial screw is beset with great difficulties, but if we can succeed through its agency in raising even the smallest weight, we may be confident of being able to raise a heavier one, for a large machine is always more powerful in proportion to its size than a small one.

    +

    + “The aerial screw is beset with great difficulties, but if we can + succeed through its agency in raising even the smallest weight, we may + be confident of being able to raise a heavier one, for a large machine + is always more powerful in proportion to its size than a small one. +

    -

    “Mlle. Garnerin once made a bet that she would guide herself in her descent from a considerable altitude towards a fixed spot on the earth at some distance, with no other help than the parachute; and she was really able to guide herself to within a few feet of the specified spot, by simply altering the inclination of the parachute.

    +

    + “Mlle. Garnerin once made a bet that she would guide herself in her + descent from a considerable altitude towards a fixed spot on the earth + at some distance, with no other help than the parachute; and she was + really able to guide herself to within a few feet of the specified spot, + by simply altering the inclination of the parachute. +

    -

    “From observations in mountainous districts, where large birds of prey may be seen to the best advantage hovering with outstretched wings, I have come to the conclusion that they first of all attain the requisite height and then, extending their wings in the form of a parachute, let themselves glide gradually towards the desired spot. Marshal Niel confirms this opinion by his experience in the mountains of Algeria. It is, therefore, clear from these examples that we should possess the power of transporting ourselves from place to place if we could only discover a means of raising a weight perpendicularly in the air, which would then act as a capital of power, only requiring to be expended at will.”

    +

    + “From observations in mountainous districts, where large birds of prey + may be seen to the best advantage hovering with outstretched wings, I + have come to the conclusion that they first of all attain the requisite + height and then, extending their wings in the form of a parachute, let + themselves glide gradually towards the desired spot. Marshal Niel + confirms this opinion by his experience in the mountains of Algeria. It + is, therefore, clear from these examples that we should possess the + power of transporting ourselves from place to place if we could only + discover a means of raising a weight perpendicularly in the air, which + would then act as a capital of power, only requiring to be expended at + will.” +

    -

    From the foregoing remarks we may gather an idea of the importance which may be attached to aerial locomotion notwithstanding the successive failures of all those who have hitherto taken up the subject. We come now to the description of the memorable ascent of the ‘Geant.’

    +

    + From the foregoing remarks we may gather an idea of the importance which + may be attached to aerial locomotion notwithstanding the successive + failures of all those who have hitherto taken up the subject. We come + now to the description of the memorable ascent of the ‘Geant.’ +

    -

    We learn from the very interesting account of the ‘Geant,’ published at the time, all the mishaps and adventures it outlived from the time of the first stitch in its covering to its final inflation with gas. We must, however, be content to take up the narrative at the point at which the ‘Geant,’ with thirteen passengers on board, had, in obedience to the order to “let go,” been released from the bonds which held it to the earth. The narrative is, as our readers will perceive, written in somewhat exaggerated language:—

    +

    + We learn from the very interesting account of the ‘Geant,’ published at + the time, all the mishaps and adventures it outlived from the time of + the first stitch in its covering to its final inflation with gas. We + must, however, be content to take up the narrative at the point at which + the ‘Geant,’ with thirteen passengers on board, had, in obedience to the + order to “let go,” been released from the bonds which held it to the + earth. The narrative is, as our readers will perceive, written in + somewhat exaggerated language:— +

    -

    “The ‘Geant’ gave an almost imperceptible shake on finding itself free, and then commenced to rise. The ascent was slow and gradual at first—the monster seemed to be feeling its way. An immense shout rose with it from the assembled multitude. We ascended grandly, whilst the deafening clamour of two hundred thousand voices seemed to increase. We leant over the edge of the car, and gazed at the thousands of faces which were turned towards us from every point of the vast plain, in every conceivable angle of which we were the common apex. We still ascended. The summits of the double row of trees which surround the Champ de Mars were already under us. We reached the level of the cupola of the Military School. The tremendous uproar still reached us. We glided over Paris in an easterly direction, at the height of about six hundred feet. Every one took up the best possible position on the six light cane stools, and on the two long bunks at either end of the car, and contemplated the marvellous panorama spread out under us, of which we never grew weary.

    +

    + “The ‘Geant’ gave an almost imperceptible shake on finding itself free, + and then commenced to rise. The ascent was slow and gradual at first—the + monster seemed to be feeling its way. An immense shout rose with it from + the assembled multitude. We ascended grandly, whilst the deafening + clamour of two hundred thousand voices seemed to increase. We leant over + the edge of the car, and gazed at the thousands of faces which were + turned towards us from every point of the vast plain, in every + conceivable angle of which we were the common apex. We still ascended. + The summits of the double row of trees which surround the Champ de Mars + were already under us. We reached the level of the cupola of the + Military School. The tremendous uproar still reached us. We glided over + Paris in an easterly direction, at the height of about six hundred feet. + Every one took up the best possible position on the six light cane + stools, and on the two long bunks at either end of the car, and + contemplated the marvellous panorama spread out under us, of which we + never grew weary. +

    -

    “There is never any dizziness in a balloon, as is often erroneously supposed, for in it you are the only point in space without any possibility of comparison with another, and therefore the means of becoming giddy are not at hand.”

    +

    + “There is never any dizziness in a balloon, as is often erroneously + supposed, for in it you are the only point in space without any + possibility of comparison with another, and therefore the means of + becoming giddy are not at hand.” +

    -

    A very experienced aeronaut, who numbers his ascents by hundreds, has assured me that he never knew of a single case of dizziness.

    +

    + A very experienced aeronaut, who numbers his ascents by hundreds, has + assured me that he never knew of a single case of dizziness. +

    -

    “The earth seems to unfold itself to our view like an immense and variegated map, the predominant colour of which is green in all its shades and tints. The irregular division of the country into fields made it resemble a patchwork counterpane. The size of the houses, churches, fortresses, was so considerably diminished as to make them resemble nothing so much as those playthings manufactured at Carlsruhe. This was the effect produced by a microscopic train, which whistled very faintly to attract our attention, and which seemed to creep along at a snail’s pace, though doubtless going at the rate of thirty miles an hour, and was enveloped in a minute cloud of smoke. What a lasting impression this microscopic neatness makes on us! What is that white puff I see down there? the smoke of a cigar? No: it is a cloud of mist. It must be a perfect plain that we are looking at, for we cannot distinguish between the different altitudes of a bramble-bush and an oak a hundred years old!

    +

    + “The earth seems to unfold itself to our view like an immense and + variegated map, the predominant colour of which is green in all its + shades and tints. The irregular division of the country into fields made + it resemble a patchwork counterpane. The size of the houses, churches, + fortresses, was so considerably diminished as to make them resemble + nothing so much as those playthings manufactured at Carlsruhe. This was + the effect produced by a microscopic train, which whistled very faintly + to attract our attention, and which seemed to creep along at a snail’s + pace, though doubtless going at the rate of thirty miles an hour, and + was enveloped in a minute cloud of smoke. What a lasting impression this + microscopic neatness makes on us! What is that white puff I see down + there? the smoke of a cigar? No: it is a cloud of mist. It must be a + perfect plain that we are looking at, for we cannot distinguish between + the different altitudes of a bramble-bush and an oak a hundred years + old! +

    -

    “It is one of the delights of an aeronaut to gaze on the familiar scenes of earth from the immense height of the car of a balloon! What earthly pleasure can compare with this! Free, calm, silent, roving through this immense and hospitable space, where no human form can harm me, I despise every evil power; I can feel the pleasure of existence for the first time, for I am in full possession, as on no other occasion, of perfect health of mind and body. The aeronauts of the ‘Geant’ will scarcely condescend to pity those miserable mortals whom they can only faintly recognise by their gigantic works, which appear to them not more dignified than ant-hills!

    +

    + “It is one of the delights of an aeronaut to gaze on the familiar scenes + of earth from the immense height of the car of a balloon! What earthly + pleasure can compare with this! Free, calm, silent, roving through this + immense and hospitable space, where no human form can harm me, I despise + every evil power; I can feel the pleasure of existence for the first + time, for I am in full possession, as on no other occasion, of perfect + health of mind and body. The aeronauts of the ‘Geant’ will scarcely + condescend to pity those miserable mortals whom they can only faintly + recognise by their gigantic works, which appear to them not more + dignified than ant-hills! +

    -

    “The sun had already set behind the purple horizon in our rear. The atmosphere was still quite clear round the ‘Geant,’ although there was a thick haze underneath, through which we could occasionally see lights glimmering from the earth. We had attained a sufficient altitude to be only just able to hear noises from villages that we left beneath us, and were beginning to enjoy the delicious calm and repose peculiar to aerial ascents.

    +

    + “The sun had already set behind the purple horizon in our rear. The + atmosphere was still quite clear round the ‘Geant,’ although there was a + thick haze underneath, through which we could occasionally see lights + glimmering from the earth. We had attained a sufficient altitude to be + only just able to hear noises from villages that we left beneath us, and + were beginning to enjoy the delicious calm and repose peculiar to aerial + ascents. +

    -

    “There is, however, a talk about dinner, or rather supper, and night is now fast approaching. Every one eats with the best possible appetite. Hams, fowls and dessert only appear to disappear with an equal promptitude, and we quench our thirst with bordeaux and champagne. I remind our companions of the pigeons we brought with us, and which are hanging in a cage outside the railing. I knew there was no danger of their flying away, so fearlessly opened the cage. The three or four birds I had put in the car seemed struck with terror. They flew awkwardly towards the centre of our party, tumbling among the plates and dishes and under our feet. It was not a case of hunger with them, and I ought to have remembered that their feeding time was long since past. I replaced them in their cage.

    +

    + “There is, however, a talk about dinner, or rather supper, and night is + now fast approaching. Every one eats with the best possible appetite. + Hams, fowls and dessert only appear to disappear with an equal + promptitude, and we quench our thirst with bordeaux and champagne. I + remind our companions of the pigeons we brought with us, and which are + hanging in a cage outside the railing. I knew there was no danger of + their flying away, so fearlessly opened the cage. The three or four + birds I had put in the car seemed struck with terror. They flew + awkwardly towards the centre of our party, tumbling among the plates and + dishes and under our feet. It was not a case of hunger with them, and I + ought to have remembered that their feeding time was long since past. I + replaced them in their cage. +

    -

    “Meanwhile, the sun has left us for some time. Our longing gaze followed it behind the dark clouds in the horizon, whose edges it tipped with a glorious purple. Its last rays shone on us, and then came a bluish-grey twilight. Suddenly we are enveloped in a dense fog. We look around, above us. Everything has disappeared in the mist. The balloon itself is no longer visible. We can see nothing except the ropes which suspend us, and these are only visible for a few feet above our heads, when they lose themselves in the fog. We are alone with our wickerwork house in an unfathomable vault.

    +

    + “Meanwhile, the sun has left us for some time. Our longing gaze followed + it behind the dark clouds in the horizon, whose edges it tipped with a + glorious purple. Its last rays shone on us, and then came a bluish-grey + twilight. Suddenly we are enveloped in a dense fog. We look around, + above us. Everything has disappeared in the mist. The balloon itself is + no longer visible. We can see nothing except the ropes which suspend us, + and these are only visible for a few feet above our heads, when they + lose themselves in the fog. We are alone with our wickerwork house in an + unfathomable vault. +

    -

    “We still ascend, however, through the compact and terrible fog, which is so solid-looking as to seem capable of being carved into forms with a knife. As we were without a moon, and had no light at all, in fact, we were unable to distinguish nicely the different shades of colour in these thick clouds. Now and then, when the clouds seemed to be lighter, they had a bluish tinge; but the thicker ones were dirty and muddy-looking. Dante must have seen some like these.

    -

    Content from Wonderful Balloon Ascents

    +

    + “We still ascend, however, through the compact and terrible fog, which + is so solid-looking as to seem capable of being carved into forms with a + knife. As we were without a moon, and had no light at all, in fact, we + were unable to distinguish nicely the different shades of colour in + these thick clouds. Now and then, when the clouds seemed to be lighter, + they had a bluish tinge; but the thicker ones were dirty and + muddy-looking. Dante must have seen some like these. +

    +

    + Content from + Wonderful Balloon Ascents +

    - diff --git a/time/current.html b/time/current.html index b030b30f..5472aae7 100644 --- a/time/current.html +++ b/time/current.html @@ -1,4 +1,4 @@ - + @@ -10,40 +10,46 @@ } video { - max-width: 300px; + max-width: 300px; }
    - +
    - + - +
    diff --git a/time/future.html b/time/future.html index c2e510e6..81ebd9d8 100644 --- a/time/future.html +++ b/time/future.html @@ -1,4 +1,4 @@ - + @@ -10,40 +10,45 @@ } video { - max-width: 300px; + max-width: 300px; }
    - +
    - + background-color: green; +} - + + + +
    diff --git a/time/past.html b/time/past.html index 838b30f2..c097a201 100644 --- a/time/past.html +++ b/time/past.html @@ -1,4 +1,4 @@ - + @@ -10,40 +10,45 @@ } video { - max-width: 300px; + max-width: 300px; }
    - +
    - + background-color: red; +} - +
    diff --git a/time/styles.css b/time/styles.css index b733e436..11945fee 100644 --- a/time/styles.css +++ b/time/styles.css @@ -1,61 +1,65 @@ /* Some default styling for cookbook examples */ -/* +/* rgb(53,43,34) rgb(75,70,74) rgb(95,97,110) rgb(137,151,188) rgb(160,178,226) */ -body { - background-color: #fff; - color: #333; - font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif; - padding: 0; - margin: 0; +body { + background-color: #fff; + color: #333; + font: + 1.2em / 1.5 Helvetica Neue, + Helvetica, + Arial, + sans-serif; + padding: 0; + margin: 0; } /* styles for the editor */ .playable { - font-family: monospace; - display: block; - margin-bottom: 10px; - background-color: #F4F7F8; - border: none; - border-left: 6px solid #558ABB; - color: #4D4E53; - width: 90%; - max-width: 700px; - padding: 10px 10px 0px; - font-size: 90%; - } + font-family: monospace; + display: block; + margin-bottom: 10px; + background-color: #f4f7f8; + border: none; + border-left: 6px solid #558abb; + color: #4d4e53; + width: 90%; + max-width: 700px; + padding: 10px 10px 0px; + font-size: 90%; +} - .playable-css { - height: 80px; - } +.playable-css { + height: 80px; +} - .playable-html { - height: 160px; - } +.playable-html { + height: 160px; +} - .playable-buttons { - text-align: right; - width: 90%; - max-width: 700px; - padding: 5px 10px 5px 26px; - font-size: 100%; - } +.playable-buttons { + text-align: right; + width: 90%; + max-width: 700px; + padding: 5px 10px 5px 26px; + font-size: 100%; +} - .preview { - width: 90%; - max-width: 700px; - border: 1px solid #4D4E53; - border-radius: 2px; - padding: 10px 14px 10px 10px; - margin-bottom: 10px; - } +.preview { + width: 90%; + max-width: 700px; + border: 1px solid #4d4e53; + border-radius: 2px; + padding: 10px 14px 10px 10px; + margin-bottom: 10px; +} - .preview input { - display: block; - margin: 5px; - } +.preview input { + display: block; + margin: 5px; +} diff --git a/time/subtitles.vtt b/time/subtitles.vtt index f198cb9e..13c24968 100644 --- a/time/subtitles.vtt +++ b/time/subtitles.vtt @@ -1,16 +1,16 @@ WEBVTT FILE 1 -00:00:03.500 --> 00:00:05.000 +00:00:03.500 --> 00:00:05.000 This is the first caption 2 -00:00:06.000 --> 00:00:09.000 +00:00:06.000 --> 00:00:09.000 This is the second caption 3 -00:00:11.000 --> 00:00:19.000 -This is the third caption +00:00:11.000 --> 00:00:19.000 +This is the third caption There are five captions. @@ -20,4 +20,4 @@ This is the fouth caption 5 00:00:24.000 --> 00:00:42.000 -This is the last caption \ No newline at end of file +This is the last caption diff --git a/tools/border-image-generator/index.html b/tools/border-image-generator/index.html index 44e781bd..7d9c6414 100644 --- a/tools/border-image-generator/index.html +++ b/tools/border-image-generator/index.html @@ -1,157 +1,190 @@ - + - + Border-image generator - + -
    -
    - -
    Upload image
    - -
    + +
    Upload image
    + +
    -
    Control Box
    -
    -
    -
    scale
    -
    -
    -
    -
    -
    -
    draggable
    -
    -
    -
    -
    section height
    -
    -
    -
    +
    Control Box
    +
    +
    +
    scale
    +
    +
    +
    +
    +
    draggable
    +
    +
    +
    +
    section height
    +
    +
    -
    -
    -
    -
    -
    -
    -
    +
    +
    +
    +
    +
    +
    +
    - - -
    -
    border-image-slice
    -
    -
    fill
    -
    -
    + +
    +
    border-image-slice
    +
    +
    fill
    +
    +
    - -
    -
    border-image-width
    -
    + +
    +
    border-image-width
    +
    - -
    -
    border-image-outset
    -
    + +
    +
    border-image-outset
    +
    - -
    -
    additional-properties
    -
    -
    repeat-x
    -
    -
    stretch
    -
    repeat
    -
    round
    -
    space
    -
    -
    -
    -
    repeat-y
    -
    -
    stretch
    -
    repeat
    -
    round
    -
    space
    -
    -
    -
    -
    -
    -
    + +
    +
    additional-properties
    +
    +
    repeat-x
    +
    +
    stretch
    +
    repeat
    +
    round
    +
    space
    +
    +
    +
    +
    repeat-y
    +
    +
    stretch
    +
    repeat
    +
    round
    +
    space
    +
    +
    +
    +
    +
    -
    -
    -
    -
    -
    -
    -
    +
    +
    +
    +
    +
    +
    -
    -
    CSS Code
    -
    - border-image-slice: - -
    -
    - border-image-width: - -
    -
    - border-image-outset: - -
    -
    - border-image-repeat: - -
    -
    - border-image-source: - -
    -
    - border-style: - solid; -
    +
    +
    CSS Code
    +
    + border-image-slice: +
    -
    +
    + border-image-width: + +
    +
    + border-image-outset: + +
    +
    + border-image-repeat: + +
    +
    + border-image-source: + +
    +
    + border-style: + solid; +
    +
    +
    - + - diff --git a/tools/border-image-generator/script.js b/tools/border-image-generator/script.js index c715a97a..a998df35 100644 --- a/tools/border-image-generator/script.js +++ b/tools/border-image-generator/script.js @@ -1,265 +1,247 @@ - /** * UI-SlidersManager */ var InputSliderManager = (function InputSliderManager() { - - var subscribers = {}; - var sliders = []; - - var InputComponent = function InputComponent(obj) { - var input = document.createElement('input'); - input.setAttribute('type', 'text'); - input.style.width = 50 + obj.precision * 10 + 'px'; - - input.addEventListener('click', function(e) { - this.select(); - }); - - input.addEventListener('change', function(e) { - var value = parseFloat(e.target.value); - - if (isNaN(value) === true) - setValue(obj.topic, obj.value); - else - setValue(obj.topic, value); - }); - - return input; - }; - - var SliderComponent = function SliderComponent(obj, sign) { - var slider = document.createElement('div'); - var startX = null; - var start_value = 0; - - slider.addEventListener("click", function(e) { - document.removeEventListener("mousemove", sliderMotion); - setValue(obj.topic, obj.value + obj.step * sign); - }); - - slider.addEventListener("mousedown", function(e) { - startX = e.clientX; - start_value = obj.value; - document.body.style.cursor = "e-resize"; - - document.addEventListener("mouseup", slideEnd); - document.addEventListener("mousemove", sliderMotion); - }); - - var slideEnd = function slideEnd(e) { - document.removeEventListener("mousemove", sliderMotion); - document.body.style.cursor = "auto"; - slider.style.cursor = "pointer"; - }; - - var sliderMotion = function sliderMotion(e) { - slider.style.cursor = "e-resize"; - var delta = (e.clientX - startX) / obj.sensitivity | 0; - var value = delta * obj.step + start_value; - setValue(obj.topic, value); - }; - - return slider; - }; - - var InputSlider = function(node) { - var min = parseFloat(node.getAttribute('data-min')); - var max = parseFloat(node.getAttribute('data-max')); - var step = parseFloat(node.getAttribute('data-step')); - var value = parseFloat(node.getAttribute('data-value')); - var topic = node.getAttribute('data-topic'); - var unit = node.getAttribute('data-unit'); - var name = node.getAttribute('data-info'); - var sensitivity = node.getAttribute('data-sensitivity') | 0; - var precision = node.getAttribute('data-precision') | 0; - - this.min = isNaN(min) ? 0 : min; - this.max = isNaN(max) ? 100 : max; - this.precision = precision >= 0 ? precision : 0; - this.step = step < 0 || isNaN(step) ? 1 : step.toFixed(precision); - this.topic = topic; - this.node = node; - this.unit = unit === null ? '' : unit; - this.sensitivity = sensitivity > 0 ? sensitivity : 5; - value = isNaN(value) ? this.min : value; - - var input = new InputComponent(this); - var slider_left = new SliderComponent(this, -1); - var slider_right = new SliderComponent(this, 1); - - slider_left.className = 'ui-input-slider-left'; - slider_right.className = 'ui-input-slider-right'; - - if (name) { - var info = document.createElement('span'); - info.className = 'ui-input-slider-info'; - info.textContent = name; - node.appendChild(info); - } - - node.appendChild(slider_left); - node.appendChild(input); - node.appendChild(slider_right); - - this.input = input; - sliders[topic] = this; - setValue(topic, value); - }; - - InputSlider.prototype.setInputValue = function setInputValue() { - this.input.value = this.value.toFixed(this.precision) + this.unit; - }; - - var setValue = function setValue(topic, value, send_notify) { - var slider = sliders[topic]; - if (slider === undefined) - return; - - value = parseFloat(value.toFixed(slider.precision)); - - if (value > slider.max) value = slider.max; - if (value < slider.min) value = slider.min; - - slider.value = value; - slider.node.setAttribute('data-value', value); - - slider.setInputValue(); - - if (send_notify === false) - return; - - notify.call(slider); - }; - - var setMax = function setMax(topic, value) { - var slider = sliders[topic]; - if (slider === undefined) - return; - - slider.max = value; - setValue(topic, slider.value); - }; - - var setMin = function setMin(topic, value) { - var slider = sliders[topic]; - if (slider === undefined) - return; - - slider.min = value; - setValue(topic, slider.value); - }; - - var setUnit = function setUnit(topic, unit) { - var slider = sliders[topic]; - if (slider === undefined) - return; - - slider.unit = unit; - setValue(topic, slider.value); - }; - - var setStep = function setStep(topic, value) { - var slider = sliders[topic]; - if (slider === undefined) - return; - - slider.step = parseFloat(value); - setValue(topic, slider.value); - }; - - var setPrecision = function setPrecision(topic, value) { - var slider = sliders[topic]; - if (slider === undefined) - return; - - value = value | 0; - slider.precision = value; - - var step = parseFloat(slider.step.toFixed(value)); - if (step === 0) - slider.step = 1 / Math.pow(10, value); - - setValue(topic, slider.value); - }; - - var setSensitivity = function setSensitivity(topic, value) { - var slider = sliders[topic]; - if (slider === undefined) - return; - - value = value | 0; - - slider.sensitivity = value > 0 ? value : 5; - }; - - var getNode = function getNode(topic) { - return sliders[topic].node; - }; - - var getPrecision = function getPrecision(topic) { - return sliders[topic].precision; - }; - - var getStep = function getStep(topic) { - return sliders[topic].step; - }; - - var subscribe = function subscribe(topic, callback) { - if (subscribers[topic] === undefined) - subscribers[topic] = []; - subscribers[topic].push(callback); - }; - - var unsubscribe = function unsubscribe(topic, callback) { - subscribers[topic].indexOf(callback); - subscribers[topic].splice(index, 1); - }; - - var notify = function notify() { - if (subscribers[this.topic] === undefined) - return; - for (var i = 0; i < subscribers[this.topic].length; i++) - subscribers[this.topic][i](this.value); - }; - - var createSlider = function createSlider(topic, label) { - var slider = document.createElement('div'); - slider.className = 'ui-input-slider'; - slider.setAttribute('data-topic', topic); - - if (label !== undefined) - slider.setAttribute('data-info', label); - - new InputSlider(slider); - return slider; - }; - - var init = function init() { - var elem = document.querySelectorAll('.ui-input-slider'); - var size = elem.length; - for (var i = 0; i < size; i++) - new InputSlider(elem[i]); - }; - - return { - init : init, - setMax : setMax, - setMin : setMin, - setUnit : setUnit, - setStep : setStep, - getNode : getNode, - getStep : getStep, - setValue : setValue, - subscribe : subscribe, - unsubscribe : unsubscribe, - setPrecision : setPrecision, - setSensitivity : setSensitivity, - getPrecision : getPrecision, - createSlider : createSlider, - }; - + var subscribers = {}; + var sliders = []; + + var InputComponent = function InputComponent(obj) { + var input = document.createElement("input"); + input.setAttribute("type", "text"); + input.style.width = 50 + obj.precision * 10 + "px"; + + input.addEventListener("click", function (e) { + this.select(); + }); + + input.addEventListener("change", function (e) { + var value = parseFloat(e.target.value); + + if (isNaN(value) === true) setValue(obj.topic, obj.value); + else setValue(obj.topic, value); + }); + + return input; + }; + + var SliderComponent = function SliderComponent(obj, sign) { + var slider = document.createElement("div"); + var startX = null; + var start_value = 0; + + slider.addEventListener("click", function (e) { + document.removeEventListener("mousemove", sliderMotion); + setValue(obj.topic, obj.value + obj.step * sign); + }); + + slider.addEventListener("mousedown", function (e) { + startX = e.clientX; + start_value = obj.value; + document.body.style.cursor = "e-resize"; + + document.addEventListener("mouseup", slideEnd); + document.addEventListener("mousemove", sliderMotion); + }); + + var slideEnd = function slideEnd(e) { + document.removeEventListener("mousemove", sliderMotion); + document.body.style.cursor = "auto"; + slider.style.cursor = "pointer"; + }; + + var sliderMotion = function sliderMotion(e) { + slider.style.cursor = "e-resize"; + var delta = ((e.clientX - startX) / obj.sensitivity) | 0; + var value = delta * obj.step + start_value; + setValue(obj.topic, value); + }; + + return slider; + }; + + var InputSlider = function (node) { + var min = parseFloat(node.getAttribute("data-min")); + var max = parseFloat(node.getAttribute("data-max")); + var step = parseFloat(node.getAttribute("data-step")); + var value = parseFloat(node.getAttribute("data-value")); + var topic = node.getAttribute("data-topic"); + var unit = node.getAttribute("data-unit"); + var name = node.getAttribute("data-info"); + var sensitivity = node.getAttribute("data-sensitivity") | 0; + var precision = node.getAttribute("data-precision") | 0; + + this.min = isNaN(min) ? 0 : min; + this.max = isNaN(max) ? 100 : max; + this.precision = precision >= 0 ? precision : 0; + this.step = step < 0 || isNaN(step) ? 1 : step.toFixed(precision); + this.topic = topic; + this.node = node; + this.unit = unit === null ? "" : unit; + this.sensitivity = sensitivity > 0 ? sensitivity : 5; + value = isNaN(value) ? this.min : value; + + var input = new InputComponent(this); + var slider_left = new SliderComponent(this, -1); + var slider_right = new SliderComponent(this, 1); + + slider_left.className = "ui-input-slider-left"; + slider_right.className = "ui-input-slider-right"; + + if (name) { + var info = document.createElement("span"); + info.className = "ui-input-slider-info"; + info.textContent = name; + node.appendChild(info); + } + + node.appendChild(slider_left); + node.appendChild(input); + node.appendChild(slider_right); + + this.input = input; + sliders[topic] = this; + setValue(topic, value); + }; + + InputSlider.prototype.setInputValue = function setInputValue() { + this.input.value = this.value.toFixed(this.precision) + this.unit; + }; + + var setValue = function setValue(topic, value, send_notify) { + var slider = sliders[topic]; + if (slider === undefined) return; + + value = parseFloat(value.toFixed(slider.precision)); + + if (value > slider.max) value = slider.max; + if (value < slider.min) value = slider.min; + + slider.value = value; + slider.node.setAttribute("data-value", value); + + slider.setInputValue(); + + if (send_notify === false) return; + + notify.call(slider); + }; + + var setMax = function setMax(topic, value) { + var slider = sliders[topic]; + if (slider === undefined) return; + + slider.max = value; + setValue(topic, slider.value); + }; + + var setMin = function setMin(topic, value) { + var slider = sliders[topic]; + if (slider === undefined) return; + + slider.min = value; + setValue(topic, slider.value); + }; + + var setUnit = function setUnit(topic, unit) { + var slider = sliders[topic]; + if (slider === undefined) return; + + slider.unit = unit; + setValue(topic, slider.value); + }; + + var setStep = function setStep(topic, value) { + var slider = sliders[topic]; + if (slider === undefined) return; + + slider.step = parseFloat(value); + setValue(topic, slider.value); + }; + + var setPrecision = function setPrecision(topic, value) { + var slider = sliders[topic]; + if (slider === undefined) return; + + value = value | 0; + slider.precision = value; + + var step = parseFloat(slider.step.toFixed(value)); + if (step === 0) slider.step = 1 / Math.pow(10, value); + + setValue(topic, slider.value); + }; + + var setSensitivity = function setSensitivity(topic, value) { + var slider = sliders[topic]; + if (slider === undefined) return; + + value = value | 0; + + slider.sensitivity = value > 0 ? value : 5; + }; + + var getNode = function getNode(topic) { + return sliders[topic].node; + }; + + var getPrecision = function getPrecision(topic) { + return sliders[topic].precision; + }; + + var getStep = function getStep(topic) { + return sliders[topic].step; + }; + + var subscribe = function subscribe(topic, callback) { + if (subscribers[topic] === undefined) subscribers[topic] = []; + subscribers[topic].push(callback); + }; + + var unsubscribe = function unsubscribe(topic, callback) { + subscribers[topic].indexOf(callback); + subscribers[topic].splice(index, 1); + }; + + var notify = function notify() { + if (subscribers[this.topic] === undefined) return; + for (var i = 0; i < subscribers[this.topic].length; i++) + subscribers[this.topic][i](this.value); + }; + + var createSlider = function createSlider(topic, label) { + var slider = document.createElement("div"); + slider.className = "ui-input-slider"; + slider.setAttribute("data-topic", topic); + + if (label !== undefined) slider.setAttribute("data-info", label); + + new InputSlider(slider); + return slider; + }; + + var init = function init() { + var elem = document.querySelectorAll(".ui-input-slider"); + var size = elem.length; + for (var i = 0; i < size; i++) new InputSlider(elem[i]); + }; + + return { + init: init, + setMax: setMax, + setMin: setMin, + setUnit: setUnit, + setStep: setStep, + getNode: getNode, + getStep: getStep, + setValue: setValue, + subscribe: subscribe, + unsubscribe: unsubscribe, + setPrecision: setPrecision, + setSensitivity: setSensitivity, + getPrecision: getPrecision, + createSlider: createSlider, + }; })(); /** @@ -267,177 +249,162 @@ var InputSliderManager = (function InputSliderManager() { */ var DropDownManager = (function DropdownManager() { + var subscribers = {}; + var dropdowns = []; + var active = null; + + var visibility = ["hidden", "visible"]; + + var DropDown = function DropDown(node) { + var topic = node.getAttribute("data-topic"); + var label = node.getAttribute("data-label"); + var selected = node.getAttribute("data-selected") | 0; - var subscribers = {}; - var dropdowns = []; - var active = null; - - var visibility = ["hidden", "visible"]; - - var DropDown = function DropDown(node) { - var topic = node.getAttribute('data-topic'); - var label = node.getAttribute('data-label'); - var selected = node.getAttribute('data-selected') | 0; - - var select = document.createElement('div'); - var list = document.createElement('div'); - var uval = 0; - var option = null; - var option_value = null; - - list.className = 'ui-dropdown-list'; - select.className = 'ui-dropdown-select'; - - while (node.firstElementChild !== null) { - option = node.firstElementChild; - option_value = option.getAttribute('data-value'); - - if (option_value === null) - option.setAttribute('data-value', uval); - - list.appendChild(node.firstElementChild); - uval++; - } - - node.appendChild(select); - node.appendChild(list); - - select.onclick = this.toggle.bind(this); - list.onclick = this.updateValue.bind(this); - document.addEventListener('click', clickOut); - - this.state = 0; - this.time = 0; - this.dropmenu = list; - this.select = select; - this.toggle(false); - this.value = {}; - this.topic = topic; - - if (label) - select.textContent = label; - else - this.setNodeValue(list.children[selected]); - - dropdowns[topic] = this; - - }; - - DropDown.prototype.toggle = function toggle(state) { - if (typeof(state) === 'boolean') - this.state = state === false ? 0 : 1; - else - this.state = 1 ^ this.state; - - if (active !== this) { - if (active) - active.toggle(false); - active = this; - } - - if (this.state === 0) - this.dropmenu.setAttribute('data-hidden', 'true'); - else - this.dropmenu.removeAttribute('data-hidden'); - - }; - - var clickOut = function clickOut(e) { - if (active.state === 0 || - e.target === active.dropmenu || - e.target === active.select) - return; - - active.toggle(false); - }; - - DropDown.prototype.updateValue = function updateValue(e) { - - if (Date.now() - this.time < 500) - return; - - if (e.target.className !== "ui-dropdown-list") { - this.setNodeValue(e.target); - this.toggle(false); - } - - this.time = Date.now(); - }; - - DropDown.prototype.setNodeValue = function setNodeValue(node) { - this.value['name'] = node.textContent; - this.value['value'] = node.getAttribute('data-value'); - - this.select.textContent = node.textContent; - this.select.setAttribute('data-value', this.value['value']); - - notify.call(this); - }; - - var createDropDown = function createDropDown(topic, options) { - - var dropdown = document.createElement('div'); - dropdown.setAttribute('data-topic', topic); - dropdown.className = 'ui-dropdown'; - - for (var i in options) { - var x = document.createElement('div'); - x.setAttribute('data-value', i); - x.textContent = options[i]; - dropdown.appendChild(x); - } - - new DropDown(dropdown); - - return dropdown; - }; - - var setValue = function setValue(topic, index) { - if (dropdowns[topic] === undefined || - index >= dropdowns[topic].dropmenu.children.length) - return; - - dropdowns[topic].setNodeValue(dropdowns[topic].dropmenu.children[index]); - }; - - var subscribe = function subscribe(topic, callback) { - if (subscribers[topic] === undefined) - subscribers[topic] = []; - subscribers[topic].push(callback); - }; - - var unsubscribe = function unsubscribe(topic, callback) { - var index = subscribers[topic].indexOf(callback); - subscribers[topic].splice(index, 1); - }; - - var notify = function notify() { - if (subscribers[this.topic] === undefined) - return; - - for (var i in subscribers[this.topic]) { - subscribers[this.topic][i](this.value); - } - }; - - var init = function init() { - var elem, size; - - elem = document.querySelectorAll('.ui-dropdown'); - size = elem.length; - for (var i = 0; i < size; i++) - new DropDown(elem[i]); - - }; - - return { - init : init, - setValue : setValue, - subscribe : subscribe, - unsubscribe : unsubscribe, - createDropDown : createDropDown - }; - + var select = document.createElement("div"); + var list = document.createElement("div"); + var uval = 0; + var option = null; + var option_value = null; + + list.className = "ui-dropdown-list"; + select.className = "ui-dropdown-select"; + + while (node.firstElementChild !== null) { + option = node.firstElementChild; + option_value = option.getAttribute("data-value"); + + if (option_value === null) option.setAttribute("data-value", uval); + + list.appendChild(node.firstElementChild); + uval++; + } + + node.appendChild(select); + node.appendChild(list); + + select.onclick = this.toggle.bind(this); + list.onclick = this.updateValue.bind(this); + document.addEventListener("click", clickOut); + + this.state = 0; + this.time = 0; + this.dropmenu = list; + this.select = select; + this.toggle(false); + this.value = {}; + this.topic = topic; + + if (label) select.textContent = label; + else this.setNodeValue(list.children[selected]); + + dropdowns[topic] = this; + }; + + DropDown.prototype.toggle = function toggle(state) { + if (typeof state === "boolean") this.state = state === false ? 0 : 1; + else this.state = 1 ^ this.state; + + if (active !== this) { + if (active) active.toggle(false); + active = this; + } + + if (this.state === 0) this.dropmenu.setAttribute("data-hidden", "true"); + else this.dropmenu.removeAttribute("data-hidden"); + }; + + var clickOut = function clickOut(e) { + if ( + active.state === 0 || + e.target === active.dropmenu || + e.target === active.select + ) + return; + + active.toggle(false); + }; + + DropDown.prototype.updateValue = function updateValue(e) { + if (Date.now() - this.time < 500) return; + + if (e.target.className !== "ui-dropdown-list") { + this.setNodeValue(e.target); + this.toggle(false); + } + + this.time = Date.now(); + }; + + DropDown.prototype.setNodeValue = function setNodeValue(node) { + this.value["name"] = node.textContent; + this.value["value"] = node.getAttribute("data-value"); + + this.select.textContent = node.textContent; + this.select.setAttribute("data-value", this.value["value"]); + + notify.call(this); + }; + + var createDropDown = function createDropDown(topic, options) { + var dropdown = document.createElement("div"); + dropdown.setAttribute("data-topic", topic); + dropdown.className = "ui-dropdown"; + + for (var i in options) { + var x = document.createElement("div"); + x.setAttribute("data-value", i); + x.textContent = options[i]; + dropdown.appendChild(x); + } + + new DropDown(dropdown); + + return dropdown; + }; + + var setValue = function setValue(topic, index) { + if ( + dropdowns[topic] === undefined || + index >= dropdowns[topic].dropmenu.children.length + ) + return; + + dropdowns[topic].setNodeValue(dropdowns[topic].dropmenu.children[index]); + }; + + var subscribe = function subscribe(topic, callback) { + if (subscribers[topic] === undefined) subscribers[topic] = []; + subscribers[topic].push(callback); + }; + + var unsubscribe = function unsubscribe(topic, callback) { + var index = subscribers[topic].indexOf(callback); + subscribers[topic].splice(index, 1); + }; + + var notify = function notify() { + if (subscribers[this.topic] === undefined) return; + + for (var i in subscribers[this.topic]) { + subscribers[this.topic][i](this.value); + } + }; + + var init = function init() { + var elem, size; + + elem = document.querySelectorAll(".ui-dropdown"); + size = elem.length; + for (var i = 0; i < size; i++) new DropDown(elem[i]); + }; + + return { + init: init, + setValue: setValue, + subscribe: subscribe, + unsubscribe: unsubscribe, + createDropDown: createDropDown, + }; })(); /** @@ -445,949 +412,916 @@ var DropDownManager = (function DropdownManager() { */ var ButtonManager = (function CheckBoxManager() { - - var subscribers = []; - var buttons = []; - - var CheckBox = function CheckBox(node) { - var topic = node.getAttribute('data-topic'); - var state = node.getAttribute('data-state'); - var name = node.getAttribute('data-label'); - var align = node.getAttribute('data-text-on'); - - state = (state === "true"); - - var checkbox = document.createElement("input"); - var label = document.createElement("label"); - - var id = 'checkbox-' + topic; - checkbox.id = id; - checkbox.setAttribute('type', 'checkbox'); - checkbox.checked = state; - - label.setAttribute('for', id); - if (name) { - label.className = 'text'; - if (align) - label.className += ' ' + align; - label.textContent = name; - } - - node.appendChild(checkbox); - node.appendChild(label); - - this.node = node; - this.topic = topic; - this.checkbox = checkbox; - - checkbox.addEventListener('change', function(e) { - notify.call(this); - }.bind(this)); - - buttons[topic] = this; - }; - - var getNode = function getNode(topic) { - return buttons[topic].node; - }; - - var setValue = function setValue(topic, value) { - var obj = buttons[topic]; - if (obj === undefined) - return; - - obj.checkbox.checked = value; - notify.call(obj); - }; - - var subscribe = function subscribe(topic, callback) { - if (subscribers[topic] === undefined) - subscribers[topic] = []; - - subscribers[topic].push(callback); - }; - - var unsubscribe = function unsubscribe(topic, callback) { - subscribers[topic].indexOf(callback); - subscribers[topic].splice(index, 1); - }; - - var notify = function notify() { - if (subscribers[this.topic] === undefined) - return; - for (var i = 0; i < subscribers[this.topic].length; i++) - subscribers[this.topic][i](this.checkbox.checked); - }; - - var init = function init() { - var elem = document.querySelectorAll('.ui-checkbox'); - var size = elem.length; - for (var i = 0; i < size; i++) - new CheckBox(elem[i]); - }; - - return { - init : init, - setValue : setValue, - subscribe : subscribe, - unsubscribe : unsubscribe - }; - + var subscribers = []; + var buttons = []; + + var CheckBox = function CheckBox(node) { + var topic = node.getAttribute("data-topic"); + var state = node.getAttribute("data-state"); + var name = node.getAttribute("data-label"); + var align = node.getAttribute("data-text-on"); + + state = state === "true"; + + var checkbox = document.createElement("input"); + var label = document.createElement("label"); + + var id = "checkbox-" + topic; + checkbox.id = id; + checkbox.setAttribute("type", "checkbox"); + checkbox.checked = state; + + label.setAttribute("for", id); + if (name) { + label.className = "text"; + if (align) label.className += " " + align; + label.textContent = name; + } + + node.appendChild(checkbox); + node.appendChild(label); + + this.node = node; + this.topic = topic; + this.checkbox = checkbox; + + checkbox.addEventListener( + "change", + function (e) { + notify.call(this); + }.bind(this), + ); + + buttons[topic] = this; + }; + + var getNode = function getNode(topic) { + return buttons[topic].node; + }; + + var setValue = function setValue(topic, value) { + var obj = buttons[topic]; + if (obj === undefined) return; + + obj.checkbox.checked = value; + notify.call(obj); + }; + + var subscribe = function subscribe(topic, callback) { + if (subscribers[topic] === undefined) subscribers[topic] = []; + + subscribers[topic].push(callback); + }; + + var unsubscribe = function unsubscribe(topic, callback) { + subscribers[topic].indexOf(callback); + subscribers[topic].splice(index, 1); + }; + + var notify = function notify() { + if (subscribers[this.topic] === undefined) return; + for (var i = 0; i < subscribers[this.topic].length; i++) + subscribers[this.topic][i](this.checkbox.checked); + }; + + var init = function init() { + var elem = document.querySelectorAll(".ui-checkbox"); + var size = elem.length; + for (var i = 0; i < size; i++) new CheckBox(elem[i]); + }; + + return { + init: init, + setValue: setValue, + subscribe: subscribe, + unsubscribe: unsubscribe, + }; })(); -window.addEventListener("load", function() { - BorderImage.init(); +window.addEventListener("load", function () { + BorderImage.init(); }); var BorderImage = (function BorderImage() { + var getElemById = document.getElementById.bind(document); - var getElemById = document.getElementById.bind(document); - - var subject; - var preview; - var guidelines = []; - var positions = ['top', 'right', 'bottom', 'left']; - - var makeDraggable = function makeDraggable(elem) { - - var offsetTop; - var offsetLeft; - - elem.setAttribute('data-draggable', 'true'); - - var dragStart = function dragStart(e) { - if (e.target.getAttribute('data-draggable') !== 'true' || - e.target !== elem || e.button !== 0) - return; - - offsetLeft = e.clientX - elem.offsetLeft; - offsetTop = e.clientY - elem.offsetTop; - - document.addEventListener('mousemove', mouseDrag); - document.addEventListener('mouseup', dragEnd); - }; - - var dragEnd = function dragEnd(e) { - if (e.button !== 0) - return; - - document.removeEventListener('mousemove', mouseDrag); - document.removeEventListener('mouseup', dragEnd); - }; - - var mouseDrag = function mouseDrag(e) { - - elem.style.left = e.clientX - offsetLeft + 'px'; - elem.style.top = e.clientY - offsetTop + 'px'; - }; - - elem.addEventListener('mousedown', dragStart, false); - }; - - var PreviewControl = function PreviewControl() { - - var dragging = false; - var valueX = null; - var valueY = null; - - var dragStart = function dragStart(e) { - if (e.button !== 0) - return; - - valueX = e.clientX - preview.clientWidth; - valueY = e.clientY - preview.clientHeight; - dragging = true; + var subject; + var preview; + var guidelines = []; + var positions = ["top", "right", "bottom", "left"]; - document.addEventListener('mousemove', mouseDrag); - }; + var makeDraggable = function makeDraggable(elem) { + var offsetTop; + var offsetLeft; - var dragEnd = function dragEnd(e) { - if (e.button !== 0 || dragging === false) - return; + elem.setAttribute("data-draggable", "true"); - document.removeEventListener('mousemove', mouseDrag); - dragging = false; - }; + var dragStart = function dragStart(e) { + if ( + e.target.getAttribute("data-draggable") !== "true" || + e.target !== elem || + e.button !== 0 + ) + return; - var mouseDrag = function mouseDrag(e) { - InputSliderManager.setValue('preview-width', e.clientX - valueX); - InputSliderManager.setValue('preview-height', e.clientY - valueY); - }; + offsetLeft = e.clientX - elem.offsetLeft; + offsetTop = e.clientY - elem.offsetTop; - var init = function init() { + document.addEventListener("mousemove", mouseDrag); + document.addEventListener("mouseup", dragEnd); + }; - makeDraggable(preview); - makeDraggable(subject); + var dragEnd = function dragEnd(e) { + if (e.button !== 0) return; - var handle = document.createElement('div'); - handle.className = 'resize-handle'; + document.removeEventListener("mousemove", mouseDrag); + document.removeEventListener("mouseup", dragEnd); + }; - handle.addEventListener('mousedown', dragStart); - document.addEventListener('mouseup', dragEnd); + var mouseDrag = function mouseDrag(e) { + elem.style.left = e.clientX - offsetLeft + "px"; + elem.style.top = e.clientY - offsetTop + "px"; + }; - preview.appendChild(handle); + elem.addEventListener("mousedown", dragStart, false); + }; - }; + var PreviewControl = (function PreviewControl() { + var dragging = false; + var valueX = null; + var valueY = null; - return { - init: init - }; + var dragStart = function dragStart(e) { + if (e.button !== 0) return; - }(); + valueX = e.clientX - preview.clientWidth; + valueY = e.clientY - preview.clientHeight; + dragging = true; - var ImageReader = (function ImageReader() { + document.addEventListener("mousemove", mouseDrag); + }; - var fReader = new FileReader(); - var browse = document.createElement('input'); + var dragEnd = function dragEnd(e) { + if (e.button !== 0 || dragging === false) return; - var loadImage = function loadImage(e) { - if (browse.files.length === 0) - return; + document.removeEventListener("mousemove", mouseDrag); + dragging = false; + }; - var file = browse.files[0]; + var mouseDrag = function mouseDrag(e) { + InputSliderManager.setValue("preview-width", e.clientX - valueX); + InputSliderManager.setValue("preview-height", e.clientY - valueY); + }; - if (file.type.slice(0, 5) !== 'image') - return; + var init = function init() { + makeDraggable(preview); + makeDraggable(subject); - fReader.readAsDataURL(file); + var handle = document.createElement("div"); + handle.className = "resize-handle"; - return false; - }; + handle.addEventListener("mousedown", dragStart); + document.addEventListener("mouseup", dragEnd); - fReader.onload = function(e) { - ImageControl.loadRemoteImage(e.target.result); - }; + preview.appendChild(handle); + }; - var load = function load() { - browse.click(); - }; + return { + init: init, + }; + })(); - browse.setAttribute('type', 'file'); - browse.style.display = 'none'; - browse.onchange = loadImage; + var ImageReader = (function ImageReader() { + var fReader = new FileReader(); + var browse = document.createElement("input"); - return { - load: load - }; + var loadImage = function loadImage(e) { + if (browse.files.length === 0) return; - })(); + var file = browse.files[0]; - var ImageControl = (function ImageControl() { + if (file.type.slice(0, 5) !== "image") return; - var scale = 0.5; - var imgSource = new Image(); - var imgState = null; - var selected = null; + fReader.readAsDataURL(file); - var topics = ['slice', 'width', 'outset']; - var properties = {}; - properties['border1'] = { - fill : false, + return false; + }; - slice_values : [27, 27, 27, 27], - width_values : [20, 20, 20, 20], - outset_values : [0, 0, 0, 0], + fReader.onload = function (e) { + ImageControl.loadRemoteImage(e.target.result); + }; - slice_units : [0, 0, 0, 0], - width_units : [0, 0, 0, 0], - outset_units : [0, 0, 0, 0], + var load = function load() { + browse.click(); + }; - repeat : [0, 0], - size : [300, 200], - preview_area : 400 - }; + browse.setAttribute("type", "file"); + browse.style.display = "none"; + browse.onchange = loadImage; - properties['border2'] = { - fill : false, + return { + load: load, + }; + })(); - slice_values : [33, 33, 33, 33], - width_values : [1.5, 1.5, 1.5, 1.5], - outset_values : [0, 0, 0, 0], + var ImageControl = (function ImageControl() { + var scale = 0.5; + var imgSource = new Image(); + var imgState = null; + var selected = null; - slice_units : [1, 1, 1, 1], - width_units : [2, 2, 2, 2], - outset_units : [0, 0, 0, 0], + var topics = ["slice", "width", "outset"]; + var properties = {}; + properties["border1"] = { + fill: false, - repeat : [2, 2], - size : [300, 200], - preview_area : 400 - }; + slice_values: [27, 27, 27, 27], + width_values: [20, 20, 20, 20], + outset_values: [0, 0, 0, 0], - properties['border3'] = { - fill : true, + slice_units: [0, 0, 0, 0], + width_units: [0, 0, 0, 0], + outset_units: [0, 0, 0, 0], - slice_values : [15, 15, 15, 15], - width_values : [10, 10, 10, 10], - outset_values : [0, 0, 0, 0], + repeat: [0, 0], + size: [300, 200], + preview_area: 400, + }; - slice_units : [0, 0, 0, 0], - width_units : [0, 0, 0, 0], - outset_units : [0, 0, 0, 0], - - repeat : [2, 2], - size : [300, 200], - preview_area : 400 - }; - - properties['border4'] = { - fill : false, - - slice_values : [13, 13, 13, 13], - width_values : [13, 13, 13, 13], - outset_values : [13, 13, 13, 13], - - slice_units : [0, 0, 0, 0], - width_units : [0, 0, 0, 0], - outset_units : [0, 0, 0, 0], - - repeat : [1, 1], - size : [300, 200], - preview_area : 400 - }; - - properties['border5'] = { - fill : false, - - slice_values : [12, 12, 12, 12], - width_values : [12, 12, 12, 12], - outset_values : [0, 0, 0, 0], - - slice_units : [0, 0, 0, 0], - width_units : [0, 0, 0, 0], - outset_units : [0, 0, 0, 0], - - repeat : [1, 1], - size : [300, 200], - preview_area : 400, - }; - - properties['border6'] = { - fill : false, - - slice_values : [42, 42, 42, 42], - width_values : [42, 42, 42, 42], - outset_values : [0, 0, 0, 0], - - slice_units : [0, 0, 0, 0], - width_units : [0, 0, 0, 0], - outset_units : [0, 0, 0, 0], - - repeat : [2, 2], - size : [350, 350], - preview_area : 500, - }; - - var loadLocalImage = function loadLocalImage(source) { - var location = "images/" + source; - imgSource.src = location; - }; - - var loadRemoteImage = function loadRemoteImage(source) { - imgSource.src = source; - if (selected) - selected.removeAttribute('selected'); - Tool.setOutputCSS('source', 'url("' + source + '")'); - }; - - var pickImage = function pickImage(e) { - if (e.target.className === 'image') { - selected = e.target; - selected.setAttribute('selected', 'true'); - loadRemoteImage(e.target.src); - imgState = e.target.getAttribute('data-stateID'); - } - }; - - var loadImageState = function loadImageState(stateID) { - if (properties[stateID] === undefined) - return; - - var prop = properties[stateID]; - var topic; - var unit_array; - var value_array; - - for (var i in topics) { - for (var j=0; j<4; j++) { - topic = topics[i] + '-' + positions[j]; - unit_array = topics[i] + '_units'; - value_array = topics[i] + '_values'; - InputSliderManager.setValue(topic, prop[value_array][j]); - DropDownManager.setValue(topic, prop[unit_array][j]); - } - } - - ButtonManager.setValue('slice-fill', prop['fill']); - DropDownManager.setValue('image-repeat-X', prop['repeat'][0]); - DropDownManager.setValue('image-repeat-Y', prop['repeat'][1]); - InputSliderManager.setValue('preview-width', prop['size'][0]); - InputSliderManager.setValue('preview-height', prop['size'][1]); - InputSliderManager.setValue('preview-area-height', prop['preview_area']); - }; - - var update = function update() { - scale = Math.min(300, (30000 / this.width) | 0); - setScale(scale); - InputSliderManager.setValue('scale', scale, false); - - subject.style.backgroundImage = 'url("' + this.src + '")'; - preview.style.borderImageSource = 'url("' + this.src + '")'; - - guidelines['slice-top'].setMax(this.height); - guidelines['slice-right'].setMax(this.width); - guidelines['slice-bottom'].setMax(this.height); - guidelines['slice-left'].setMax(this.width); - - if (imgState) - loadImageState(imgState); - }; - - var setScale = function setScale(value) { - scale = value; - var w = imgSource.width * scale / 100 | 0; - var h = imgSource.height * scale / 100 | 0; - subject.style.width = w + 'px'; - subject.style.height = h + 'px'; - - for (var i = 0; i < positions.length; i++) - guidelines['slice-' + positions[i]].updateGuidelinePos(); - }; - - var getScale = function getScale() { - return scale/100; - }; - - var toggleGallery = function toggleGallery() { - var gallery = getElemById('image-gallery'); - var button = getElemById('toggle-gallery'); - var state = 1; - button.addEventListener('click', function() { - state = 1 ^ state; - if (state === 0) { - gallery.setAttribute('data-collapsed', 'true'); - button.setAttribute('data-action', 'show'); - } - else { - gallery.removeAttribute('data-collapsed'); - button.setAttribute('data-action', 'hide'); - } - }); - }; - - var init = function init() { - var gallery = getElemById('image-gallery'); - var browse = getElemById('load-image'); - var remote = getElemById('remote-url'); - var load_remote = getElemById('load-remote'); - - remote.addEventListener('change', function(){ - loadRemoteImage(this.value); - }); - - load_remote.addEventListener('click', function(){ - loadRemoteImage(remote.value); - }); - - browse.addEventListener('click', ImageReader.load); - gallery.addEventListener('click', pickImage); - imgSource.addEventListener('load', update); - - InputSliderManager.subscribe('scale', setScale); - InputSliderManager.setValue('scale', scale); - imgState = 'border1'; - loadRemoteImage('border-image-1.png'); - toggleGallery(); - }; - - return { - init: init, - getScale : getScale, - loadRemoteImage: loadRemoteImage - }; - - })(); - - var GuideLine = function GuideLine(node) { - var topic = node.getAttribute('data-topic'); - var axis = node.getAttribute('data-axis'); - - this.node = node; - this.topic = topic; - this.axis = axis; - this.info = topic.split('-')[1]; - - this.position = 0; - this.value = 0; - this.unit = 0; - this.max = 0; - this.pos = positions.indexOf(this.info); - - guidelines[topic] = this; - - var relative_container = document.createElement('div'); - var tooltip = document.createElement('div'); - var tooltip2 = document.createElement('div'); - - tooltip.className = 'tooltip'; - tooltip.setAttribute('data-info', this.info); - - tooltip2.className = 'tooltip2'; - tooltip2.textContent = this.info; - tooltip2.setAttribute('data-info', this.info); - - this.tooltip = tooltip; - - relative_container.appendChild(tooltip); - relative_container.appendChild(tooltip2); - node.appendChild(relative_container); - - var startX = 0; - var startY = 0; - var start = 0; - - var startDrag = function startDrag(e) { - startX = e.clientX; - startY = e.clientY; - start = guidelines[topic].position; - document.body.setAttribute('data-move', axis); - relative_container.setAttribute('data-active', ''); - node.setAttribute('data-active', ''); - - document.addEventListener('mousemove', updateGuideline); - document.addEventListener('mouseup', endDrag); - }; - - var endDrag = function endDrag() { - document.body.removeAttribute('data-move'); - relative_container.removeAttribute('data-active'); - node.removeAttribute('data-active'); - - document.removeEventListener('mousemove', updateGuideline); - }; - - var updateGuideline = function updateGuideline(e) { - var value; - if (topic === 'slice-top') - value = e.clientY - startY + start; - - if (topic === 'slice-right') - value = startX - e.clientX + start; - - if (topic === 'slice-bottom') - value = startY - e.clientY + start; - - if (topic === 'slice-left') - value = e.clientX - startX + start; - - if (this.unit === 0) - InputSliderManager.setValue(topic, value * 1 / ImageControl.getScale() | 0); - else { - InputSliderManager.setValue(topic, (value * 100 / (this.max * ImageControl.getScale())) | 0); - } - - }.bind(this); - - node.addEventListener("mousedown", startDrag); - - InputSliderManager.subscribe(topic, this.setPosition.bind(this)); - InputSliderManager.setValue(topic, this.position); - }; - - GuideLine.prototype.updateGuidelinePos = function updateGuidelinePos() { - if (this.unit === 0) - this.position = this.value * ImageControl.getScale() | 0; - else - this.position = this.value * this.max * ImageControl.getScale() / 100 | 0; - - this.node.style[this.info] = this.position + 'px'; - }; - - GuideLine.prototype.setPosition = function setPosition(value) { - this.value = value; - this.tooltip.textContent = value; - this.updateGuidelinePos(); - Tool.setBorderSlice(this.pos, value); - }; - - GuideLine.prototype.setMax = function setMax(max) { - this.max = max; - this.updateLimit(); - }; - - GuideLine.prototype.updateLimit = function updateLimit() { - if (this.unit === 1) - InputSliderManager.setMax(this.topic, 100); - else - InputSliderManager.setMax(this.topic, this.max); - }; - - GuideLine.prototype.setUnit = function setUnit(type) { - if (type === '%') this.unit = 1; - if (type === '') this.unit = 0; - this.updateLimit(); - }; - - /* - * Unit panel - */ - var UnitPanel = (function UnitPanel () { - - var panel; - var title; - var precision; - var step; - var unit_topic = null; // settings are made for this topic - var step_option = [1, 0.1, 0.01]; - - var updatePrecision = function updatePrecision(value) { - InputSliderManager.setPrecision('unit-step', value); - InputSliderManager.setStep('unit-step', step_option[value]); - InputSliderManager.setMin('unit-step', step_option[value]); - - if (unit_topic) - InputSliderManager.setPrecision(unit_topic, value); - }; - - var updateUnitSettings = function updateUnitSettings(value) { - if (unit_topic) - InputSliderManager.setStep(unit_topic, value); - }; - - var show = function show(e) { - var topic = e.target.getAttribute('data-topic'); - var precision = InputSliderManager.getPrecision(topic); - var step = InputSliderManager.getStep(topic); - - unit_topic = topic; - title.textContent = topic; - - panel.setAttribute('data-active', 'true'); - panel.style.top = e.target.offsetTop - 40 + 'px'; - panel.style.left = e.target.offsetLeft + 30 + 'px'; - - InputSliderManager.setValue('unit-precision', precision); - InputSliderManager.setValue('unit-step', step); - }; - - var init = function init() { - panel = document.createElement('div'); - title = document.createElement('div'); - var close = document.createElement('div'); - - step = InputSliderManager.createSlider('unit-step', 'step'); - precision = InputSliderManager.createSlider('unit-precision', 'precision'); - - InputSliderManager.setStep('unit-precision', 1); - InputSliderManager.setMax('unit-precision', 2); - InputSliderManager.setValue('unit-precision', 2); - InputSliderManager.setSensitivity('unit-precision', 20); - - InputSliderManager.setValue('unit-step', 1); - InputSliderManager.setStep('unit-step', 0.01); - InputSliderManager.setPrecision('unit-step', 2); - - InputSliderManager.subscribe('unit-precision', updatePrecision); - InputSliderManager.subscribe('unit-step', updateUnitSettings); - - close.addEventListener('click', function () { - panel.setAttribute('data-active', 'false'); - }); - - title.textContent = 'Properties'; - title.className = 'title'; - close.className = 'close'; - panel.id = 'unit-settings'; - panel.setAttribute('data-active', 'false'); - panel.appendChild(title); - panel.appendChild(precision); - panel.appendChild(step); - panel.appendChild(close); - document.body.appendChild(panel); - }; - - return { - init : init, - show : show - }; - - })(); - - /** - * Tool Manager - */ - var Tool = (function Tool() { - var preview_area; - var dropdown_unit_options = [ - { '' : '--', '%' : '%'}, - { 'px' : 'px', '%' : '%', 'em' : 'em'}, - { 'px' : 'px', 'em' : 'em'}, - ]; - - var border_slice = []; - var border_width = []; - var border_outset = []; - - var border_slice_values = []; - var border_width_values = []; - var border_outset_values = []; - - var border_slice_units = ['', '', '', '']; - var border_width_units = ['px', 'px', 'px', 'px']; - var border_outset_units = ['px', 'px', 'px', 'px']; - - var border_fill = false; - var border_repeat = ['round', 'round']; - var CSS_code = { - 'source' : null, - 'slice' : null, - 'width' : null, - 'outset' : null, - 'repeat' : null - }; - - var setBorderSlice = function setBorderSlice(positionID, value) { - border_slice[positionID] = value + border_slice_units[positionID]; - updateBorderSlice(); - }; - - var updateBorderSlice = function updateBorderSlice() { - var value = border_slice.join(' '); - if (border_fill === true) - value += ' fill'; - - preview.style.borderImageSlice = value; - setOutputCSS('slice', value); - }; - - var setBorderFill = function setBorderFill(value) { - border_fill = value; - var bimgslice = border_slice.join(' ');; - if (value === true) - bimgslice += ' fill'; - - preview.style.borderImageSlice = bimgslice; - }; - - var updateBorderWidth = function updateBorderWidth() { - var value = border_width.join(' '); - preview.style.borderImageWidth = value; - setOutputCSS('width', value); - }; - - var updateBorderOutset = function updateBorderOutset() { - var value = border_outset.join(' '); - preview.style.borderImageOutset = border_outset.join(' '); - setOutputCSS('outset', value); - }; - - var setBorderRepeat = function setBorderRepeat(obj) { - border_repeat[obj.value] = obj.name; - var value = border_repeat.join(' '); - preview.style.borderImageRepeat = value; - setOutputCSS('repeat', value); - }; - - var setOutputCSS = function setOutputCSS(topic, value) { - CSS_code[topic].textContent = value + ';'; - }; - - var setPreviewFontSize = function setPreviewFontSize(value) { - preview.style.fontSize = value + 'px'; - }; - - var setPreviewWidth = function setPreviewWidth(value) { - preview.style.width = value + 'px'; - }; - - var setPreviewHeight = function setPreviewHeight(value) { - preview.style.height = value + 'px'; - }; - - var setPreviewAreaHeight = function setPreviewAreaHeight(value) { - preview_area.style.height = value + 'px'; - }; - - var updateDragOption = function updateDragOption(value) { - if (value === true) - subject.setAttribute('data-draggable', 'true'); - else - subject.removeAttribute('data-draggable'); - }; - - var createProperty = function createProperty(topic, labelID, optionsID) { - - var slider = InputSliderManager.createSlider(topic, positions[labelID]); - var dropdown = DropDownManager.createDropDown(topic, dropdown_unit_options[optionsID]); - - InputSliderManager.setSensitivity(topic, 3); - InputSliderManager.setPrecision(topic, 1); - - var property = document.createElement('div'); - var config = document.createElement('div'); - - property.className = 'property'; - config.className = 'config'; - config.setAttribute('data-topic', topic); - config.addEventListener('click', UnitPanel.show); - - property.appendChild(slider); - property.appendChild(dropdown); - property.appendChild(config); - - return property; - }; - - var initBorderSliceControls = function initBorderSliceControls() { - var container = getElemById('border-slice-control'); - - var listenForChanges = function listenForChanges(topic, id) { - InputSliderManager.subscribe(topic, function(value) { - border_slice_values[id] = value; - border_slice[id] = value + border_slice_units[id]; - updateBorderSlice(); - }); - - DropDownManager.subscribe(topic, function(obj) { - guidelines[topic].setUnit(obj.value); - border_slice_units[id] = obj.value; - border_slice[id] = border_slice_values[id] + obj.value; - updateBorderSlice(); - }); - }; - - for (var i = 0; i < positions.length; i++) { - var topic = 'slice-' + positions[i]; - var property = createProperty(topic, i, 0); - listenForChanges(topic, i); - - container.appendChild(property); - } - - container.appendChild(container.children[1]); - - }; - - var initBorderWidthControls = function initBorderWidthControls() { - var container = getElemById('border-width-control'); - - var listenForChanges = function listenForChanges(topic, id) { - InputSliderManager.subscribe(topic, function(value) { - border_width_values[id] = value; - border_width[id] = value + border_width_units[id]; - updateBorderWidth(); - }); - - DropDownManager.subscribe(topic, function(obj) { - if (obj.value === '%') - InputSliderManager.setMax(topic, 100); - else - InputSliderManager.setMax(topic, 1000); - - border_width_units[id] = obj.value; - border_width[id] = border_width_values[id] + obj.value; - updateBorderWidth(); - }); - }; - - for (var i = 0; i < positions.length; i++) { - var topic = 'width-' + positions[i]; - var property = createProperty(topic, i, 1); - InputSliderManager.setMax(topic, 1000); - listenForChanges(topic, i); - - container.appendChild(property); - } - }; - - var initBorderOutsetControls = function initBorderOutsetControls() { - - var container = getElemById('border-outset-control'); - - var listenForChanges = function listenForChanges(topic, id) { - InputSliderManager.subscribe(topic, function(value) { - border_outset_values[id] = value; - border_outset[id] = value + border_outset_units[id]; - updateBorderOutset(); - }); - - DropDownManager.subscribe(topic, function(obj) { - border_outset_units[id] = obj.value; - border_outset[id] = border_outset_values[id] + obj.value; - updateBorderOutset(); - }); - }; - - for (var i = 0; i < positions.length; i++) { - var topic = 'outset-' + positions[i]; - var property = createProperty(topic, i, 2); - InputSliderManager.setMax(topic, 1000); - listenForChanges(topic, i); - - container.appendChild(property); - } - }; - - var init = function init() { - - var gallery = - subject = getElemById('subject'); - preview = getElemById("preview"); - preview_area = getElemById("preview_section"); - - CSS_code['source'] = getElemById("out-border-source"); - CSS_code['slice'] = getElemById("out-border-slice"); - CSS_code['width'] = getElemById("out-border-width"); - CSS_code['outset'] = getElemById("out-border-outset"); - CSS_code['repeat'] = getElemById("out-border-repeat"); - - initBorderSliceControls(); - initBorderWidthControls(); - initBorderOutsetControls(); - - var elem = document.querySelectorAll('.guideline'); - var size = elem.length; - for (var i = 0; i < size; i++) - new GuideLine(elem[i]); - - PreviewControl.init(); - - ButtonManager.subscribe('slice-fill',setBorderFill); - ButtonManager.subscribe('drag-subject', updateDragOption); - ButtonManager.setValue('drag-subject', false); - - DropDownManager.subscribe('image-repeat-X', setBorderRepeat); - DropDownManager.subscribe('image-repeat-Y', setBorderRepeat); - - InputSliderManager.subscribe('preview-area-height', setPreviewAreaHeight); - InputSliderManager.subscribe('preview-width', setPreviewWidth); - InputSliderManager.subscribe('preview-height', setPreviewHeight); - InputSliderManager.subscribe('font-size', setPreviewFontSize); - InputSliderManager.setValue('preview-width', 300); - InputSliderManager.setValue('preview-height', 200); - }; - - return { - init: init, - setOutputCSS: setOutputCSS, - setBorderSlice: setBorderSlice - }; - - })(); - - /** - * Init Tool - */ - var init = function init() { - InputSliderManager.init(); - DropDownManager.init(); - ButtonManager.init(); - UnitPanel.init(); - Tool.init(); - ImageControl.init(); - }; - - return { - init : init - }; + properties["border2"] = { + fill: false, + slice_values: [33, 33, 33, 33], + width_values: [1.5, 1.5, 1.5, 1.5], + outset_values: [0, 0, 0, 0], + + slice_units: [1, 1, 1, 1], + width_units: [2, 2, 2, 2], + outset_units: [0, 0, 0, 0], + + repeat: [2, 2], + size: [300, 200], + preview_area: 400, + }; + + properties["border3"] = { + fill: true, + + slice_values: [15, 15, 15, 15], + width_values: [10, 10, 10, 10], + outset_values: [0, 0, 0, 0], + + slice_units: [0, 0, 0, 0], + width_units: [0, 0, 0, 0], + outset_units: [0, 0, 0, 0], + + repeat: [2, 2], + size: [300, 200], + preview_area: 400, + }; + + properties["border4"] = { + fill: false, + + slice_values: [13, 13, 13, 13], + width_values: [13, 13, 13, 13], + outset_values: [13, 13, 13, 13], + + slice_units: [0, 0, 0, 0], + width_units: [0, 0, 0, 0], + outset_units: [0, 0, 0, 0], + + repeat: [1, 1], + size: [300, 200], + preview_area: 400, + }; + + properties["border5"] = { + fill: false, + + slice_values: [12, 12, 12, 12], + width_values: [12, 12, 12, 12], + outset_values: [0, 0, 0, 0], + + slice_units: [0, 0, 0, 0], + width_units: [0, 0, 0, 0], + outset_units: [0, 0, 0, 0], + + repeat: [1, 1], + size: [300, 200], + preview_area: 400, + }; + + properties["border6"] = { + fill: false, + + slice_values: [42, 42, 42, 42], + width_values: [42, 42, 42, 42], + outset_values: [0, 0, 0, 0], + + slice_units: [0, 0, 0, 0], + width_units: [0, 0, 0, 0], + outset_units: [0, 0, 0, 0], + + repeat: [2, 2], + size: [350, 350], + preview_area: 500, + }; + + var loadLocalImage = function loadLocalImage(source) { + var location = "images/" + source; + imgSource.src = location; + }; + + var loadRemoteImage = function loadRemoteImage(source) { + imgSource.src = source; + if (selected) selected.removeAttribute("selected"); + Tool.setOutputCSS("source", 'url("' + source + '")'); + }; + + var pickImage = function pickImage(e) { + if (e.target.className === "image") { + selected = e.target; + selected.setAttribute("selected", "true"); + loadRemoteImage(e.target.src); + imgState = e.target.getAttribute("data-stateID"); + } + }; + + var loadImageState = function loadImageState(stateID) { + if (properties[stateID] === undefined) return; + + var prop = properties[stateID]; + var topic; + var unit_array; + var value_array; + + for (var i in topics) { + for (var j = 0; j < 4; j++) { + topic = topics[i] + "-" + positions[j]; + unit_array = topics[i] + "_units"; + value_array = topics[i] + "_values"; + InputSliderManager.setValue(topic, prop[value_array][j]); + DropDownManager.setValue(topic, prop[unit_array][j]); + } + } + + ButtonManager.setValue("slice-fill", prop["fill"]); + DropDownManager.setValue("image-repeat-X", prop["repeat"][0]); + DropDownManager.setValue("image-repeat-Y", prop["repeat"][1]); + InputSliderManager.setValue("preview-width", prop["size"][0]); + InputSliderManager.setValue("preview-height", prop["size"][1]); + InputSliderManager.setValue("preview-area-height", prop["preview_area"]); + }; + + var update = function update() { + scale = Math.min(300, (30000 / this.width) | 0); + setScale(scale); + InputSliderManager.setValue("scale", scale, false); + + subject.style.backgroundImage = 'url("' + this.src + '")'; + preview.style.borderImageSource = 'url("' + this.src + '")'; + + guidelines["slice-top"].setMax(this.height); + guidelines["slice-right"].setMax(this.width); + guidelines["slice-bottom"].setMax(this.height); + guidelines["slice-left"].setMax(this.width); + + if (imgState) loadImageState(imgState); + }; + + var setScale = function setScale(value) { + scale = value; + var w = ((imgSource.width * scale) / 100) | 0; + var h = ((imgSource.height * scale) / 100) | 0; + subject.style.width = w + "px"; + subject.style.height = h + "px"; + + for (var i = 0; i < positions.length; i++) + guidelines["slice-" + positions[i]].updateGuidelinePos(); + }; + + var getScale = function getScale() { + return scale / 100; + }; + + var toggleGallery = function toggleGallery() { + var gallery = getElemById("image-gallery"); + var button = getElemById("toggle-gallery"); + var state = 1; + button.addEventListener("click", function () { + state = 1 ^ state; + if (state === 0) { + gallery.setAttribute("data-collapsed", "true"); + button.setAttribute("data-action", "show"); + } else { + gallery.removeAttribute("data-collapsed"); + button.setAttribute("data-action", "hide"); + } + }); + }; + + var init = function init() { + var gallery = getElemById("image-gallery"); + var browse = getElemById("load-image"); + var remote = getElemById("remote-url"); + var load_remote = getElemById("load-remote"); + + remote.addEventListener("change", function () { + loadRemoteImage(this.value); + }); + + load_remote.addEventListener("click", function () { + loadRemoteImage(remote.value); + }); + + browse.addEventListener("click", ImageReader.load); + gallery.addEventListener("click", pickImage); + imgSource.addEventListener("load", update); + + InputSliderManager.subscribe("scale", setScale); + InputSliderManager.setValue("scale", scale); + imgState = "border1"; + loadRemoteImage("border-image-1.png"); + toggleGallery(); + }; + + return { + init: init, + getScale: getScale, + loadRemoteImage: loadRemoteImage, + }; + })(); + + var GuideLine = function GuideLine(node) { + var topic = node.getAttribute("data-topic"); + var axis = node.getAttribute("data-axis"); + + this.node = node; + this.topic = topic; + this.axis = axis; + this.info = topic.split("-")[1]; + + this.position = 0; + this.value = 0; + this.unit = 0; + this.max = 0; + this.pos = positions.indexOf(this.info); + + guidelines[topic] = this; + + var relative_container = document.createElement("div"); + var tooltip = document.createElement("div"); + var tooltip2 = document.createElement("div"); + + tooltip.className = "tooltip"; + tooltip.setAttribute("data-info", this.info); + + tooltip2.className = "tooltip2"; + tooltip2.textContent = this.info; + tooltip2.setAttribute("data-info", this.info); + + this.tooltip = tooltip; + + relative_container.appendChild(tooltip); + relative_container.appendChild(tooltip2); + node.appendChild(relative_container); + + var startX = 0; + var startY = 0; + var start = 0; + + var startDrag = function startDrag(e) { + startX = e.clientX; + startY = e.clientY; + start = guidelines[topic].position; + document.body.setAttribute("data-move", axis); + relative_container.setAttribute("data-active", ""); + node.setAttribute("data-active", ""); + + document.addEventListener("mousemove", updateGuideline); + document.addEventListener("mouseup", endDrag); + }; + + var endDrag = function endDrag() { + document.body.removeAttribute("data-move"); + relative_container.removeAttribute("data-active"); + node.removeAttribute("data-active"); + + document.removeEventListener("mousemove", updateGuideline); + }; + + var updateGuideline = function updateGuideline(e) { + var value; + if (topic === "slice-top") value = e.clientY - startY + start; + + if (topic === "slice-right") value = startX - e.clientX + start; + + if (topic === "slice-bottom") value = startY - e.clientY + start; + + if (topic === "slice-left") value = e.clientX - startX + start; + + if (this.unit === 0) + InputSliderManager.setValue( + topic, + ((value * 1) / ImageControl.getScale()) | 0, + ); + else { + InputSliderManager.setValue( + topic, + ((value * 100) / (this.max * ImageControl.getScale())) | 0, + ); + } + }.bind(this); + + node.addEventListener("mousedown", startDrag); + + InputSliderManager.subscribe(topic, this.setPosition.bind(this)); + InputSliderManager.setValue(topic, this.position); + }; + + GuideLine.prototype.updateGuidelinePos = function updateGuidelinePos() { + if (this.unit === 0) + this.position = (this.value * ImageControl.getScale()) | 0; + else + this.position = + ((this.value * this.max * ImageControl.getScale()) / 100) | 0; + + this.node.style[this.info] = this.position + "px"; + }; + + GuideLine.prototype.setPosition = function setPosition(value) { + this.value = value; + this.tooltip.textContent = value; + this.updateGuidelinePos(); + Tool.setBorderSlice(this.pos, value); + }; + + GuideLine.prototype.setMax = function setMax(max) { + this.max = max; + this.updateLimit(); + }; + + GuideLine.prototype.updateLimit = function updateLimit() { + if (this.unit === 1) InputSliderManager.setMax(this.topic, 100); + else InputSliderManager.setMax(this.topic, this.max); + }; + + GuideLine.prototype.setUnit = function setUnit(type) { + if (type === "%") this.unit = 1; + if (type === "") this.unit = 0; + this.updateLimit(); + }; + + /* + * Unit panel + */ + var UnitPanel = (function UnitPanel() { + var panel; + var title; + var precision; + var step; + var unit_topic = null; // settings are made for this topic + var step_option = [1, 0.1, 0.01]; + + var updatePrecision = function updatePrecision(value) { + InputSliderManager.setPrecision("unit-step", value); + InputSliderManager.setStep("unit-step", step_option[value]); + InputSliderManager.setMin("unit-step", step_option[value]); + + if (unit_topic) InputSliderManager.setPrecision(unit_topic, value); + }; + + var updateUnitSettings = function updateUnitSettings(value) { + if (unit_topic) InputSliderManager.setStep(unit_topic, value); + }; + + var show = function show(e) { + var topic = e.target.getAttribute("data-topic"); + var precision = InputSliderManager.getPrecision(topic); + var step = InputSliderManager.getStep(topic); + + unit_topic = topic; + title.textContent = topic; + + panel.setAttribute("data-active", "true"); + panel.style.top = e.target.offsetTop - 40 + "px"; + panel.style.left = e.target.offsetLeft + 30 + "px"; + + InputSliderManager.setValue("unit-precision", precision); + InputSliderManager.setValue("unit-step", step); + }; + + var init = function init() { + panel = document.createElement("div"); + title = document.createElement("div"); + var close = document.createElement("div"); + + step = InputSliderManager.createSlider("unit-step", "step"); + precision = InputSliderManager.createSlider( + "unit-precision", + "precision", + ); + + InputSliderManager.setStep("unit-precision", 1); + InputSliderManager.setMax("unit-precision", 2); + InputSliderManager.setValue("unit-precision", 2); + InputSliderManager.setSensitivity("unit-precision", 20); + + InputSliderManager.setValue("unit-step", 1); + InputSliderManager.setStep("unit-step", 0.01); + InputSliderManager.setPrecision("unit-step", 2); + + InputSliderManager.subscribe("unit-precision", updatePrecision); + InputSliderManager.subscribe("unit-step", updateUnitSettings); + + close.addEventListener("click", function () { + panel.setAttribute("data-active", "false"); + }); + + title.textContent = "Properties"; + title.className = "title"; + close.className = "close"; + panel.id = "unit-settings"; + panel.setAttribute("data-active", "false"); + panel.appendChild(title); + panel.appendChild(precision); + panel.appendChild(step); + panel.appendChild(close); + document.body.appendChild(panel); + }; + + return { + init: init, + show: show, + }; + })(); + + /** + * Tool Manager + */ + var Tool = (function Tool() { + var preview_area; + var dropdown_unit_options = [ + { "": "--", "%": "%" }, + { px: "px", "%": "%", em: "em" }, + { px: "px", em: "em" }, + ]; + + var border_slice = []; + var border_width = []; + var border_outset = []; + + var border_slice_values = []; + var border_width_values = []; + var border_outset_values = []; + + var border_slice_units = ["", "", "", ""]; + var border_width_units = ["px", "px", "px", "px"]; + var border_outset_units = ["px", "px", "px", "px"]; + + var border_fill = false; + var border_repeat = ["round", "round"]; + var CSS_code = { + source: null, + slice: null, + width: null, + outset: null, + repeat: null, + }; + + var setBorderSlice = function setBorderSlice(positionID, value) { + border_slice[positionID] = value + border_slice_units[positionID]; + updateBorderSlice(); + }; + + var updateBorderSlice = function updateBorderSlice() { + var value = border_slice.join(" "); + if (border_fill === true) value += " fill"; + + preview.style.borderImageSlice = value; + setOutputCSS("slice", value); + }; + + var setBorderFill = function setBorderFill(value) { + border_fill = value; + var bimgslice = border_slice.join(" "); + if (value === true) bimgslice += " fill"; + + preview.style.borderImageSlice = bimgslice; + }; + + var updateBorderWidth = function updateBorderWidth() { + var value = border_width.join(" "); + preview.style.borderImageWidth = value; + setOutputCSS("width", value); + }; + + var updateBorderOutset = function updateBorderOutset() { + var value = border_outset.join(" "); + preview.style.borderImageOutset = border_outset.join(" "); + setOutputCSS("outset", value); + }; + + var setBorderRepeat = function setBorderRepeat(obj) { + border_repeat[obj.value] = obj.name; + var value = border_repeat.join(" "); + preview.style.borderImageRepeat = value; + setOutputCSS("repeat", value); + }; + + var setOutputCSS = function setOutputCSS(topic, value) { + CSS_code[topic].textContent = value + ";"; + }; + + var setPreviewFontSize = function setPreviewFontSize(value) { + preview.style.fontSize = value + "px"; + }; + + var setPreviewWidth = function setPreviewWidth(value) { + preview.style.width = value + "px"; + }; + + var setPreviewHeight = function setPreviewHeight(value) { + preview.style.height = value + "px"; + }; + + var setPreviewAreaHeight = function setPreviewAreaHeight(value) { + preview_area.style.height = value + "px"; + }; + + var updateDragOption = function updateDragOption(value) { + if (value === true) subject.setAttribute("data-draggable", "true"); + else subject.removeAttribute("data-draggable"); + }; + + var createProperty = function createProperty(topic, labelID, optionsID) { + var slider = InputSliderManager.createSlider(topic, positions[labelID]); + var dropdown = DropDownManager.createDropDown( + topic, + dropdown_unit_options[optionsID], + ); + + InputSliderManager.setSensitivity(topic, 3); + InputSliderManager.setPrecision(topic, 1); + + var property = document.createElement("div"); + var config = document.createElement("div"); + + property.className = "property"; + config.className = "config"; + config.setAttribute("data-topic", topic); + config.addEventListener("click", UnitPanel.show); + + property.appendChild(slider); + property.appendChild(dropdown); + property.appendChild(config); + + return property; + }; + + var initBorderSliceControls = function initBorderSliceControls() { + var container = getElemById("border-slice-control"); + + var listenForChanges = function listenForChanges(topic, id) { + InputSliderManager.subscribe(topic, function (value) { + border_slice_values[id] = value; + border_slice[id] = value + border_slice_units[id]; + updateBorderSlice(); + }); + + DropDownManager.subscribe(topic, function (obj) { + guidelines[topic].setUnit(obj.value); + border_slice_units[id] = obj.value; + border_slice[id] = border_slice_values[id] + obj.value; + updateBorderSlice(); + }); + }; + + for (var i = 0; i < positions.length; i++) { + var topic = "slice-" + positions[i]; + var property = createProperty(topic, i, 0); + listenForChanges(topic, i); + + container.appendChild(property); + } + + container.appendChild(container.children[1]); + }; + + var initBorderWidthControls = function initBorderWidthControls() { + var container = getElemById("border-width-control"); + + var listenForChanges = function listenForChanges(topic, id) { + InputSliderManager.subscribe(topic, function (value) { + border_width_values[id] = value; + border_width[id] = value + border_width_units[id]; + updateBorderWidth(); + }); + + DropDownManager.subscribe(topic, function (obj) { + if (obj.value === "%") InputSliderManager.setMax(topic, 100); + else InputSliderManager.setMax(topic, 1000); + + border_width_units[id] = obj.value; + border_width[id] = border_width_values[id] + obj.value; + updateBorderWidth(); + }); + }; + + for (var i = 0; i < positions.length; i++) { + var topic = "width-" + positions[i]; + var property = createProperty(topic, i, 1); + InputSliderManager.setMax(topic, 1000); + listenForChanges(topic, i); + + container.appendChild(property); + } + }; + + var initBorderOutsetControls = function initBorderOutsetControls() { + var container = getElemById("border-outset-control"); + + var listenForChanges = function listenForChanges(topic, id) { + InputSliderManager.subscribe(topic, function (value) { + border_outset_values[id] = value; + border_outset[id] = value + border_outset_units[id]; + updateBorderOutset(); + }); + + DropDownManager.subscribe(topic, function (obj) { + border_outset_units[id] = obj.value; + border_outset[id] = border_outset_values[id] + obj.value; + updateBorderOutset(); + }); + }; + + for (var i = 0; i < positions.length; i++) { + var topic = "outset-" + positions[i]; + var property = createProperty(topic, i, 2); + InputSliderManager.setMax(topic, 1000); + listenForChanges(topic, i); + + container.appendChild(property); + } + }; + + var init = function init() { + var gallery = (subject = getElemById("subject")); + preview = getElemById("preview"); + preview_area = getElemById("preview_section"); + + CSS_code["source"] = getElemById("out-border-source"); + CSS_code["slice"] = getElemById("out-border-slice"); + CSS_code["width"] = getElemById("out-border-width"); + CSS_code["outset"] = getElemById("out-border-outset"); + CSS_code["repeat"] = getElemById("out-border-repeat"); + + initBorderSliceControls(); + initBorderWidthControls(); + initBorderOutsetControls(); + + var elem = document.querySelectorAll(".guideline"); + var size = elem.length; + for (var i = 0; i < size; i++) new GuideLine(elem[i]); + + PreviewControl.init(); + + ButtonManager.subscribe("slice-fill", setBorderFill); + ButtonManager.subscribe("drag-subject", updateDragOption); + ButtonManager.setValue("drag-subject", false); + + DropDownManager.subscribe("image-repeat-X", setBorderRepeat); + DropDownManager.subscribe("image-repeat-Y", setBorderRepeat); + + InputSliderManager.subscribe("preview-area-height", setPreviewAreaHeight); + InputSliderManager.subscribe("preview-width", setPreviewWidth); + InputSliderManager.subscribe("preview-height", setPreviewHeight); + InputSliderManager.subscribe("font-size", setPreviewFontSize); + InputSliderManager.setValue("preview-width", 300); + InputSliderManager.setValue("preview-height", 200); + }; + + return { + init: init, + setOutputCSS: setOutputCSS, + setBorderSlice: setBorderSlice, + }; + })(); + + /** + * Init Tool + */ + var init = function init() { + InputSliderManager.init(); + DropDownManager.init(); + ButtonManager.init(); + UnitPanel.init(); + Tool.init(); + ImageControl.init(); + }; + + return { + init: init, + }; })(); diff --git a/tools/border-image-generator/styles.css b/tools/border-image-generator/styles.css index 16b0c0cc..d3f78bc0 100644 --- a/tools/border-image-generator/styles.css +++ b/tools/border-image-generator/styles.css @@ -2,71 +2,71 @@ * ========================================================================== */ .span_12 { - width: 100%; + width: 100%; } .span_11 { - width: 91.46%; + width: 91.46%; } .span_10 { - width: 83%; + width: 83%; } .span_9 { - width: 74.54%; + width: 74.54%; } .span_8 { - width: 66.08%; + width: 66.08%; } .span_7 { - width: 57.62%; + width: 57.62%; } .span_6 { - width: 49.16%; + width: 49.16%; } .span_5 { - width: 40.7%; + width: 40.7%; } .span_4 { - width: 32.24%; + width: 32.24%; } .span_3 { - width: 23.78%; + width: 23.78%; } .span_2 { - width: 15.32%; + width: 15.32%; } .span_1 { - width: 6.86%; + width: 6.86%; } /* SECTIONS * ========================================================================== */ .section { - padding: 0px; - margin: 0px; + padding: 0px; + margin: 0px; } /* GRID COLUMN SETUP * ========================================================================== */ .col { - display: block; - margin: 1% 0 1% 1.6%; + display: block; + margin: 1% 0 1% 1.6%; } .col:first-child { - margin-left: 0; + margin-left: 0; } /* all browsers except IE6 and lower */ /* @@ -74,68 +74,69 @@ */ .ui-input-slider { - height: 20px; - font-family: "Segoe UI", Arial, Helvetica, sans-serif; - -moz-user-select: none; - user-select: none; - display: flex; + height: 20px; + font-family: "Segoe UI", Arial, Helvetica, sans-serif; + -moz-user-select: none; + user-select: none; + display: flex; } .ui-input-slider * { - height: 100%; - line-height: 100%; + height: 100%; + line-height: 100%; } /* Input Slider */ .ui-input-slider > input { - margin: 0; - padding: 0; - width: 50px; - text-align: center; + margin: 0; + padding: 0; + width: 50px; + text-align: center; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; } .ui-input-slider-info { - width: 90px; - padding: 0px 10px 0px 0px; - text-align: right; - text-transform: lowercase; + width: 90px; + padding: 0px 10px 0px 0px; + text-align: right; + text-transform: lowercase; } -.ui-input-slider-left, .ui-input-slider-right { - width: 16px; - cursor: pointer; - background: url("arrows.png") center left no-repeat; +.ui-input-slider-left, +.ui-input-slider-right { + width: 16px; + cursor: pointer; + background: url("arrows.png") center left no-repeat; } .ui-input-slider-right { - background: url("arrows.png") center right no-repeat; + background: url("arrows.png") center right no-repeat; } .ui-input-slider-name { - width: 90px; - padding: 0 10px 0 0; - text-align: right; - text-transform: lowercase; + width: 90px; + padding: 0 10px 0 0; + text-align: right; + text-transform: lowercase; } .ui-input-slider-btn-set { - width: 25px; - background-color: #2C9FC9; - border-radius: 5px; - color: #FFF; - font-weight: bold; - line-height: 14px; - text-align: center; + width: 25px; + background-color: #2c9fc9; + border-radius: 5px; + color: #fff; + font-weight: bold; + line-height: 14px; + text-align: center; } .ui-input-slider-btn-set:hover { - background-color: #379B4A; - cursor: pointer; + background-color: #379b4a; + cursor: pointer; } /*************************************************************************************/ @@ -148,107 +149,107 @@ /* Dropdown */ .ui-dropdown { - height: 2em; - width: 120px; - font-family: "Segoe UI", Arial, Helvetica, sans-serif; - font-size: 12px; + height: 2em; + width: 120px; + font-family: "Segoe UI", Arial, Helvetica, sans-serif; + font-size: 12px; - background-image: url("drop_arrow_icon.png"); - background-position: right center; - background-repeat: no-repeat; - background-color: #359740; + background-image: url("drop_arrow_icon.png"); + background-position: right center; + background-repeat: no-repeat; + background-color: #359740; - position: relative; + position: relative; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; - -moz-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; - user-select: none; + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; } .ui-dropdown:hover { - cursor: pointer; - background-color: #208B20; + cursor: pointer; + background-color: #208b20; } /* Dropdown Select Button */ .ui-dropdown-select { - height: inherit; - padding: 0 0.75em; - color: #FFF; - line-height: 2em; + height: inherit; + padding: 0 0.75em; + color: #fff; + line-height: 2em; } /* Dropdown List */ .ui-dropdown-list { - width: 100%; - height: 150px; - max-height: 150px; - margin: 0; - padding: 0 0.3em; + width: 100%; + height: 150px; + max-height: 150px; + margin: 0; + padding: 0 0.3em; - border: 3px solid #3490D2; - border-color: #208B20; - background: #666; - background-color: #EEF1F5; - color: #000; + border: 3px solid #3490d2; + border-color: #208b20; + background: #666; + background-color: #eef1f5; + color: #000; - position: absolute; - top: 2em; - left: 0; - z-index: 100; + position: absolute; + top: 2em; + left: 0; + z-index: 100; - overflow: hidden; - transition: all 0.3s; + overflow: hidden; + transition: all 0.3s; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; } .ui-dropdown-list:hover { - overflow: auto; + overflow: auto; } -.ui-dropdown-list[data-hidden='true'] { - height: 0 !important; - opacity: 0; - visibility: hidden; +.ui-dropdown-list[data-hidden="true"] { + height: 0 !important; + opacity: 0; + visibility: hidden; } -.ui-dropdown[data-position='left'] .ui-dropdown-list { - left: -100%; - top: 0; +.ui-dropdown[data-position="left"] .ui-dropdown-list { + left: -100%; + top: 0; } -.ui-dropdown[data-position='right'] .ui-dropdown-list { - left: 100%; - top: 0; +.ui-dropdown[data-position="right"] .ui-dropdown-list { + left: 100%; + top: 0; } .ui-dropdown-list > div { - width: 100%; - height: 1.6em; - margin: 0.3em 0; - padding: 0.3em; - line-height: 1em; + width: 100%; + height: 1.6em; + margin: 0.3em 0; + padding: 0.3em; + line-height: 1em; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; } .ui-dropdown-list > div:hover { - background: #3490D2; - color:#FFF; - border-radius: 2px; - cursor: pointer; + background: #3490d2; + color: #fff; + border-radius: 2px; + cursor: pointer; } /*************************************************************************************/ @@ -261,56 +262,56 @@ /* Checkbox */ .ui-checkbox { - text-align: center; - font-size: 16px; - font-family: "Segoe UI", Arial, Helvetica, sans-serif; - line-height: 1.5em; - color: #FFF; + text-align: center; + font-size: 16px; + font-family: "Segoe UI", Arial, Helvetica, sans-serif; + line-height: 1.5em; + color: #fff; - -moz-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; - user-select: none; + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; } .ui-checkbox > input { - display: none; + display: none; } .ui-checkbox > label { - font-size: 12px; - padding: 0.333em 1.666em 0.5em; - height: 1em; - line-height: 1em; + font-size: 12px; + padding: 0.333em 1.666em 0.5em; + height: 1em; + line-height: 1em; - background-color: #888; - background-image: url("disabled.png"); - background-position: center center; - background-repeat: no-repeat; + background-color: #888; + background-image: url("disabled.png"); + background-position: center center; + background-repeat: no-repeat; - color: #FFF; - border-radius: 2px; - font-weight: bold; + color: #fff; + border-radius: 2px; + font-weight: bold; } .ui-checkbox .text { - padding-left: 34px; - background-position: center left 10px; + padding-left: 34px; + background-position: center left 10px; } .ui-checkbox .left { - padding-right: 34px; - padding-left: 1.666em; - background-position: center right 10px; + padding-right: 34px; + padding-left: 1.666em; + background-position: center right 10px; } .ui-checkbox > label:hover { - cursor: pointer; + cursor: pointer; } .ui-checkbox > input:checked + label { - background-image: url("checked.png"); - background-color: #379B4A; + background-image: url("checked.png"); + background-color: #379b4a; } /*************************************************************************************/ @@ -321,47 +322,47 @@ */ body { - width: 100%; - margin: 0 auto; - padding: 0 0 20px 0; + width: 100%; + margin: 0 auto; + padding: 0 0 20px 0; - font-family: "Segoe UI", Arial, Helvetica, sans-serif; + font-family: "Segoe UI", Arial, Helvetica, sans-serif; - /*background: url("grain.png");*/ - border: 1px solid #EEE; + /*background: url("grain.png");*/ + border: 1px solid #eee; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; - -moz-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; - user-select: none; + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; } -body[data-move='X'] { - cursor: w-resize !important; +body[data-move="X"] { + cursor: w-resize !important; } -body[data-move='Y'] { - cursor: s-resize !important; +body[data-move="Y"] { + cursor: s-resize !important; } #container { - width: 100%; + width: 100%; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; } -[data-draggable='true']:hover { - cursor: move; +[data-draggable="true"]:hover { + cursor: move; } -[data-draggable='true']:hover > * { - cursor: default; +[data-draggable="true"]:hover > * { + cursor: default; } /******************************************************************************/ @@ -372,116 +373,115 @@ body[data-move='Y'] { */ #gallery { - box-shadow: 0 0 3px 0 #BABABA; + box-shadow: 0 0 3px 0 #bababa; } #image-gallery { - display: flex; - flex-wrap: wrap; - justify-content: center; - transition: margin 0.4s; + display: flex; + flex-wrap: wrap; + justify-content: center; + transition: margin 0.4s; } #image-gallery .image { - height: 80px; - margin: 10px; - opacity: 0.5; - background-color: #FFF; - box-shadow: 0px 0px 3px 1px #BABABA; + height: 80px; + margin: 10px; + opacity: 0.5; + background-color: #fff; + box-shadow: 0px 0px 3px 1px #bababa; } #image-gallery .image[selected="true"] { - box-shadow: 0px 0px 3px 1px #3BBA52; - opacity: 1; + box-shadow: 0px 0px 3px 1px #3bba52; + opacity: 1; } #image-gallery .image:hover { - cursor: pointer; - box-shadow: 0px 0px 3px 1px #30ACE5; - opacity: 1; + cursor: pointer; + box-shadow: 0px 0px 3px 1px #30ace5; + opacity: 1; } -#image-gallery[data-collapsed='true'] { - margin-top: -100px; +#image-gallery[data-collapsed="true"] { + margin-top: -100px; } /* Load Menu */ #load-actions { - margin: 10px 0; - display: flex; + margin: 10px 0; + display: flex; } #toggle-gallery { - width: 30px; - height: 25px; - margin: 10px; - color: #FFF; + width: 30px; + height: 25px; + margin: 10px; + color: #fff; - background-image: url('arrow-up-white.png'); - background-repeat: no-repeat; - background-position: top 4px center; - background-color: #888888 !important; + background-image: url("arrow-up-white.png"); + background-repeat: no-repeat; + background-position: top 4px center; + background-color: #888888 !important; - border-radius: 2px; + border-radius: 2px; } #toggle-gallery:hover { - cursor: pointer; + cursor: pointer; } -#toggle-gallery[data-action='show'] { - background-image: url('arrow-down-white.png'); - background-color: #888888 !important; +#toggle-gallery[data-action="show"] { + background-image: url("arrow-down-white.png"); + background-color: #888888 !important; } -#toggle-gallery[data-action='hide'] { - background-image: url('arrow-up-white.png'); +#toggle-gallery[data-action="hide"] { + background-image: url("arrow-up-white.png"); } .button { - width: 100px; - height: 25px; - margin: 10px; - color: #FFF; - text-align: center; - font-size: 12px; - line-height: 25px; - background-color: #379B4A; - border-radius: 2px; + width: 100px; + height: 25px; + margin: 10px; + color: #fff; + text-align: center; + font-size: 12px; + line-height: 25px; + background-color: #379b4a; + border-radius: 2px; } .button:hover { - cursor: pointer; - background-color: #3380C4; + cursor: pointer; + background-color: #3380c4; } #load-image { - } #load-remote { - width: 30px; - background-image: url('arrow-right-white.png'); - background-repeat: no-repeat; - background-position: center center; + width: 30px; + background-image: url("arrow-right-white.png"); + background-repeat: no-repeat; + background-position: center center; } #remote-url { - width: 200px; - height: 23px; - margin: 10px; - padding: 0 5px; - border: 1px solid #379B4A; - border-radius: 2px; + width: 200px; + height: 23px; + margin: 10px; + padding: 0 5px; + border: 1px solid #379b4a; + border-radius: 2px; - transition: width 0.5s; + transition: width 0.5s; } #remote-url:focus { - box-shadow: 0px 0px 3px -1px #379B4A; /*#68ACE8; */ - border-color: rgba(55, 155, 74, 0.5); - width: 450px; + box-shadow: 0px 0px 3px -1px #379b4a; /*#68ACE8; */ + border-color: rgba(55, 155, 74, 0.5); + width: 450px; } /* @@ -489,168 +489,169 @@ body[data-move='Y'] { */ #preview_section { - position: relative; - min-height: 400px; + position: relative; + min-height: 400px; } /* Image Control */ #subject { - width: 300px; - height: 300px; - background-repeat: no-repeat; - background-size: 100%; - background-color: #FFF; - border: 1px solid #CCC; + width: 300px; + height: 300px; + background-repeat: no-repeat; + background-size: 100%; + background-color: #fff; + border: 1px solid #ccc; - position: absolute; - z-index: 10; - top: 15%; - left: 10%; + position: absolute; + z-index: 10; + top: 15%; + left: 10%; - box-shadow: 0 0 3px 0 #BABABA; - transition-property: width, height; - transition-duration: 0.1s; + box-shadow: 0 0 3px 0 #bababa; + transition-property: width, height; + transition-duration: 0.1s; } #subject .guideline { - background-color: rgba(255, 255, 255, 0.7); - border: 1px solid rgba(0, 0, 0, 0.3); - position: absolute; + background-color: rgba(255, 255, 255, 0.7); + border: 1px solid rgba(0, 0, 0, 0.3); + position: absolute; } #subject .guideline:hover { - background-color: #F00; + background-color: #f00; } #subject .guideline[data-active] { - background-color: #F00; - z-index: 10; + background-color: #f00; + z-index: 10; } -#subject .guideline[data-axis='X'] { - width: 1px; - height: 100%; - top: -1px; +#subject .guideline[data-axis="X"] { + width: 1px; + height: 100%; + top: -1px; } -#subject .guideline[data-axis='Y'] { - width: 100%; - height: 1px; - left: -1px; +#subject .guideline[data-axis="Y"] { + width: 100%; + height: 1px; + left: -1px; } -#subject .guideline[data-axis='X']:hover { - cursor: w-resize; +#subject .guideline[data-axis="X"]:hover { + cursor: w-resize; } -#subject .guideline[data-axis='Y']:hover { - cursor: s-resize; +#subject .guideline[data-axis="Y"]:hover { + cursor: s-resize; } #subject .relative { - position: relative; - font-size: 12px; + position: relative; + font-size: 12px; } -#subject .tooltip, #subject .tooltip2 { - width: 40px; - height: 20px; - line-height: 20px; - font-size: 12px; - text-align: center; +#subject .tooltip, +#subject .tooltip2 { + width: 40px; + height: 20px; + line-height: 20px; + font-size: 12px; + text-align: center; - position: absolute; - opacity: 0.5; - transition: opacity 0.25s; + position: absolute; + opacity: 0.5; + transition: opacity 0.25s; } #subject .tooltip { - background: #EEE; - border-radius: 2px; - border: 1px solid #CCC; + background: #eee; + border-radius: 2px; + border: 1px solid #ccc; } -#subject .tooltip2{ - color: #555; +#subject .tooltip2 { + color: #555; } #subject [data-active] > * { - opacity: 1; + opacity: 1; } -#subject .tooltip[data-info='top'] { - top: -10px; - right: -50px; +#subject .tooltip[data-info="top"] { + top: -10px; + right: -50px; } -#subject .tooltip[data-info='right'] { - bottom: -30px; - right: -20px; +#subject .tooltip[data-info="right"] { + bottom: -30px; + right: -20px; } -#subject .tooltip[data-info='bottom'] { - top: -10px; - left: -50px; +#subject .tooltip[data-info="bottom"] { + top: -10px; + left: -50px; } -#subject .tooltip[data-info='left'] { - top: -30px; - right: -20px; +#subject .tooltip[data-info="left"] { + top: -30px; + right: -20px; } -#subject .tooltip2[data-info='top'] { - top: -10px; - left: -50px; +#subject .tooltip2[data-info="top"] { + top: -10px; + left: -50px; } -#subject .tooltip2[data-info='right'] { - top: -30px; - right: -20px; +#subject .tooltip2[data-info="right"] { + top: -30px; + right: -20px; } -#subject .tooltip2[data-info='bottom'] { - top: -10px; - right: -50px; +#subject .tooltip2[data-info="bottom"] { + top: -10px; + right: -50px; } -#subject .tooltip2[data-info='left'] { - bottom: -30px; - right: -20px; +#subject .tooltip2[data-info="left"] { + bottom: -30px; + right: -20px; } /* Preview */ #preview { - width: 30%; - height: 50%; - background-color: #FFF; - text-align: center; - overflow: hidden; - position: absolute; - z-index: 10; + width: 30%; + height: 50%; + background-color: #fff; + text-align: center; + overflow: hidden; + position: absolute; + z-index: 10; - left: 60%; - top: 15%; + left: 60%; + top: 15%; - border-radius: 2px; - border-image-width: 20px; - border-image-repeat: round; - border-style: solid; - box-shadow: 0 0 3px 0 #BABABA; + border-radius: 2px; + border-image-width: 20px; + border-image-repeat: round; + border-style: solid; + box-shadow: 0 0 3px 0 #bababa; } #preview .resize-handle { - width: 10px; - height: 10px; - background: url("resize.png") center center no-repeat; - position: absolute; - bottom: 0; - right: 0; + width: 10px; + height: 10px; + background: url("resize.png") center center no-repeat; + position: absolute; + bottom: 0; + right: 0; } #preview .resize-handle:hover { - cursor: nw-resize; + cursor: nw-resize; } /* @@ -658,44 +659,44 @@ body[data-move='Y'] { */ #general-controls { - padding: 10px 30px; - background-color: #FFF; - opacity: 0.95; - color: #888; - /*border-radius: 2px;*/ - box-shadow: 0 0 3px 0 #BABABA; - display: flex; - flex-wrap: wrap; - row-gap: 10px; + padding: 10px 30px; + background-color: #fff; + opacity: 0.95; + color: #888; + /*border-radius: 2px;*/ + box-shadow: 0 0 3px 0 #bababa; + display: flex; + flex-wrap: wrap; + row-gap: 10px; } #general-controls .property { - width: 130px; - display: flex; + width: 130px; + display: flex; } #general-controls .name { - height: 20px; - margin: 0 10px 0 0; - line-height: 100%; - text-align: right; + height: 20px; + margin: 0 10px 0 0; + line-height: 100%; + text-align: right; } #general-controls .right { - width: 200px; - margin-left: auto; + width: 200px; + margin-left: auto; } #general-controls .ui-checkbox label { - height: 10px; - display: block; + height: 10px; + display: block; } #general-controls .separator { - height: 40px; - width: 1px; - margin: -10px 15px; - background-color: #EEE; + height: 40px; + width: 1px; + margin: -10px 15px; + background-color: #eee; } /* @@ -703,247 +704,247 @@ body[data-move='Y'] { */ #controls { - color: #444; - margin: 0 auto; - display: grid; - grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); - gap: 20px; - padding: 20px; - justify-content: space-between; + color: #444; + margin: 0 auto; + display: grid; + grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); + gap: 20px; + padding: 20px; + justify-content: space-between; } #controls .category { - padding: 10px; - border: 1px solid #CCC; - border-radius: 3px; + padding: 10px; + border: 1px solid #ccc; + border-radius: 3px; - box-shadow: 0 0 3px 0 #BABABA; - transition: all 0.25s; + box-shadow: 0 0 3px 0 #bababa; + transition: all 0.25s; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; } #controls .category .title { - width: 100%; - height: 30px; - margin: 0 0 10px 0; - line-height: 25px; + width: 100%; + height: 30px; + margin: 0 0 10px 0; + line-height: 25px; - text-align: center; - color: #AAA; + text-align: center; + color: #aaa; } #controls .category:hover .title { - color: #777; + color: #777; } #controls .category > .group { - border: 1px solid #CCC; - border-radius: 2px; + border: 1px solid #ccc; + border-radius: 2px; } /* property */ #controls .property { - width: 250px; - height: 20px; - margin: 5px auto; - display: flex; + width: 250px; + height: 20px; + margin: 5px auto; + display: flex; } #controls .property .ui-input-slider { - margin: 0; + margin: 0; } #controls .property .ui-input-slider-info { - width: 60px; + width: 60px; } #controls .property .ui-input-slider-left { - transition: opacity 0.15s; - opacity: 0; + transition: opacity 0.15s; + opacity: 0; } #controls .property .ui-input-slider-right { - transition: opacity 0.15s; - opacity: 0; + transition: opacity 0.15s; + opacity: 0; } #controls .property .name { - width: 60px; - height: 20px; - padding: 0px 10px 0px 0px; - text-align: right; - line-height: 100%; + width: 60px; + height: 20px; + padding: 0px 10px 0px 0px; + text-align: right; + line-height: 100%; } #controls .property .config { - width: 20px; - height: 20px; - background: url("config.png") center center no-repeat; - opacity: 0.5; + width: 20px; + height: 20px; + background: url("config.png") center center no-repeat; + opacity: 0.5; } #controls .property .config:hover { - cursor: pointer; - opacity: 1; + cursor: pointer; + opacity: 1; } #controls .ui-input-slider:hover .ui-input-slider-right { - opacity: 1; + opacity: 1; } #controls .ui-input-slider:hover .ui-input-slider-left { - opacity: 1; + opacity: 1; } #controls .property .ui-dropdown { - margin: 0 10px; + margin: 0 10px; } #controls .property .ui-checkbox { - margin: 0 0 0 16px; + margin: 0 0 0 16px; } #controls .property .ui-checkbox label { - display: block; - height: 0.85em; - width: 10px; + display: block; + height: 0.85em; + width: 10px; } /* dropdowns */ #controls .ui-dropdown { - width: 50px; - height: 1.7em; - border-radius: 2px; + width: 50px; + height: 1.7em; + border-radius: 2px; } #controls .ui-dropdown-select { - line-height: 1.6em; + line-height: 1.6em; } #controls .ui-dropdown-list { - top: 20px; + top: 20px; } #controls .ui-dropdown-list { - border-width: 1px; - text-align: center; + border-width: 1px; + text-align: center; } #controls .ui-dropdown-list:hover { - overflow: hidden; + overflow: hidden; } #controls .border-repeat { - margin: 0 0 0 16px !important; - width: 80px; + margin: 0 0 0 16px !important; + width: 80px; } #controls .border-repeat .ui-dropdown-list { - height: 8.2em; - border-width: 1px; - text-align: center; + height: 8.2em; + border-width: 1px; + text-align: center; } /* border-image-slice */ #border-slice-control .ui-dropdown-list { - height: 4.3em; + height: 4.3em; } /* border-image-width */ #border-width-control .ui-dropdown-list { - height: 6.2em; + height: 6.2em; } /* border-image-outset */ #border-outset-control .ui-dropdown-list { - height: 4.3em; + height: 4.3em; } #additional-properties .property { - width: 200px; + width: 200px; } #additional-properties .ui-input-slider > input { - width: 80px !important; + width: 80px !important; } /* unit settings panel */ #unit-settings { - padding: 10px; - position: absolute; + padding: 10px; + position: absolute; - background: #FFF; + background: #fff; - font-size: 12px; - border-radius: 3px; - border: 1px solid #CCC; - text-align: center; - color: #555; + font-size: 12px; + border-radius: 3px; + border: 1px solid #ccc; + text-align: center; + color: #555; - position: absolute; - z-index: 1000; + position: absolute; + z-index: 1000; - box-shadow: 0 0 3px 0 #BABABA; - transition: all 0.25s; + box-shadow: 0 0 3px 0 #bababa; + transition: all 0.25s; } #unit-settings .title { - width: 100%; - margin: -5px auto 0; + width: 100%; + margin: -5px auto 0; - color: #666; - font-size: 14px; - font-weight: bold; - line-height: 25px; - border-bottom: 1px solid #E5E5E5; + color: #666; + font-size: 14px; + font-weight: bold; + line-height: 25px; + border-bottom: 1px solid #e5e5e5; } #unit-settings .ui-input-slider { - margin: 10px 0 0 0; + margin: 10px 0 0 0; } #unit-settings .ui-input-slider-info { - width: 50px; - line-height: 1.5em; + width: 50px; + line-height: 1.5em; } #unit-settings input { - font-size: 12px; - width: 40px !important; + font-size: 12px; + width: 40px !important; } #unit-settings .close { - width: 16px; - height: 16px; - background: url('close.png') no-repeat center center; - background-size: 75%; + width: 16px; + height: 16px; + background: url("close.png") no-repeat center center; + background-size: 75%; - position: absolute; - top: 4px; - right: 4px; - opacity: 0.5; + position: absolute; + top: 4px; + right: 4px; + opacity: 0.5; } #unit-settings .close:hover { - cursor: pointer; - opacity: 1; + cursor: pointer; + opacity: 1; } -#unit-settings[data-active='true'] { - opacity: 1; +#unit-settings[data-active="true"] { + opacity: 1; } -#unit-settings[data-active='false'] { - opacity: 0; - top: -100px !important; +#unit-settings[data-active="false"] { + opacity: 0; + top: -100px !important; } /* @@ -951,46 +952,46 @@ body[data-move='Y'] { */ #output { - padding: 10px; - border: 2px dashed #888 !important; - box-shadow: none !important; - border-radius: 3px; - overflow: hidden; - grid-column: span 2; + padding: 10px; + border: 2px dashed #888 !important; + box-shadow: none !important; + border-radius: 3px; + overflow: hidden; + grid-column: span 2; - -moz-user-select: text; - -webkit-user-select: text; - -ms-user-select: text; - user-select: text; + -moz-user-select: text; + -webkit-user-select: text; + -ms-user-select: text; + user-select: text; } #output .title { - width: 100%; - height: 30px; - margin: 0 0 10px 0; - line-height: 25px; + width: 100%; + height: 30px; + margin: 0 0 10px 0; + line-height: 25px; - text-align: center; - color: #AAA; + text-align: center; + color: #aaa; } #output .css-property { - width: 100%; - margin: 0; - color: #555; - font-size: 14px; - line-height: 18px; - display: flex; + width: 100%; + margin: 0; + color: #555; + font-size: 14px; + line-height: 18px; + display: flex; } #output .css-property .name { - width: 30%; - font-weight: bold; - text-align: right; + width: 30%; + font-weight: bold; + text-align: right; } #output .css-property .value { - width: 65%; - padding: 0 2.5%; - word-break: break-all; + width: 65%; + padding: 0 2.5%; + word-break: break-all; } diff --git a/tools/border-radius-generator/index.html b/tools/border-radius-generator/index.html index 90d87879..1d028c6f 100644 --- a/tools/border-radius-generator/index.html +++ b/tools/border-radius-generator/index.html @@ -1,103 +1,185 @@ - + - + Border-radius generator - + -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - -
    -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    -
    -
    +
    +
    +
    +
    +
    +
    + +
    +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    +
    +
    +
    +
    +
    + +
    +
    -
    -
    -
    - -
    -
    +
    +
    -
    +
    +
    +
    rounded corner
    +
    +
    +
    +
    -
    -
    -
    rounded corner
    -
    -
    -
    -
    -
    - -
    -
    select border units
    -
    +
    +
    select border units
    +
    - - + - diff --git a/tools/border-radius-generator/script.js b/tools/border-radius-generator/script.js index a8d73b0f..d62fb704 100644 --- a/tools/border-radius-generator/script.js +++ b/tools/border-radius-generator/script.js @@ -1,197 +1,187 @@ -'use strict'; +"use strict"; /** * UI-InputSliderManager */ var InputSliderManager = (function InputSliderManager() { - - var subscribers = {}; - var sliders = []; - - var InputComponent = function InputComponent(obj) { - var input = document.createElement('input'); - input.setAttribute('type', 'text'); - - input.addEventListener('click', function(e) { - this.select(); - }); - - input.addEventListener('change', function(e) { - var value = parseInt(e.target.value); - - if (isNaN(value) === true) - setValue(obj.topic, obj.value); - else - setValue(obj.topic, value); - }); - - subscribe(obj.topic, function(value) { - input.value = value + obj.unit; - }); - - return input; - } - - var SliderComponent = function SliderComponent(obj, sign) { - var slider = document.createElement('div'); - var startX = null; - var start_value = 0; - - slider.addEventListener("click", function(e) { - setValue(obj.topic, obj.value + obj.step * sign); - }); - - slider.addEventListener("mousedown", function(e) { - startX = e.clientX; - start_value = obj.value; - document.body.style.cursor = "e-resize"; - document.addEventListener("mousemove", sliderMotion); - }); - - document.addEventListener("mouseup", function(e) { - document.removeEventListener("mousemove", sliderMotion); - document.body.style.cursor = "auto"; - slider.style.cursor = "pointer"; - }); - - var sliderMotion = function sliderMotion(e) { - slider.style.cursor = "e-resize"; - var delta = (e.clientX - startX) / obj.sensitivity | 0; - var value = delta * obj.step + start_value; - setValue(obj.topic, value); - } - - return slider; - } - - var InputSlider = function(node) { - var min = node.getAttribute('data-min') | 0; - var max = node.getAttribute('data-max') | 0; - var step = node.getAttribute('data-step') | 0; - var value = node.getAttribute('data-value') | 0; - var topic = node.getAttribute('data-topic'); - var unit = node.getAttribute('data-unit'); - var name = node.getAttribute('data-info'); - var sensitivity = node.getAttribute('data-sensitivity') | 0; - - this.min = min; - this.max = max > 0 ? max : 100; - this.step = step === 0 ? 1 : step; - this.topic = topic; - this.node = node; - this.unit = unit; - this.sensitivity = sensitivity > 0 ? sensitivity : 5; - - var input = new InputComponent(this); - var slider_left = new SliderComponent(this, -1); - var slider_right = new SliderComponent(this, 1); - - slider_left.className = 'ui-input-slider-left'; - slider_right.className = 'ui-input-slider-right'; - - if (name) { - var info = document.createElement('span'); - info.className = 'ui-input-slider-info'; - info.textContent = name; - node.appendChild(info); - } - - node.appendChild(slider_left); - node.appendChild(input); - node.appendChild(slider_right); - node.className = 'ui-input-slider ui-input-slider-container'; - - this.input = input; - sliders[topic] = this; - setValue(topic, value); - } - - var setValue = function setValue(topic, value, send_notify) { - var slider = sliders[topic]; - if (slider === undefined) - return; - - if (value > slider.max) value = slider.max; - if (value < slider.min) value = slider.min; - - slider.value = value; - slider.node.setAttribute('data-value', value); - - if (send_notify !== undefined && send_notify === false) { - slider.input.value = value + slider.unit; - return; - } - - notify.call(slider); - } - - var setMax = function setMax(topic, value) { - var slider = sliders[topic]; - if (slider === undefined) - return; - - slider.max = value; - setValue(topic, slider.value); - } - - var setMin = function setMin(topic, value) { - var slider = sliders[topic]; - if (slider === undefined) - return; - - slider.min = value; - setValue(topic, slider.value); - } - - var setUnit = function setUnit(topic, unit) { - var slider = sliders[topic]; - if (slider === undefined) - return; - - slider.unit = unit; - setValue(topic, slider.value); - } - - var getNode = function getNode(topic) { - return sliders[topic].node; - } - - var subscribe = function subscribe(topic, callback) { - if (subscribers[topic] === undefined) - subscribers[topic] = []; - subscribers[topic].push(callback); - } - - var unsubscribe = function unsubscribe(topic, callback) { - subscribers[topic].indexOf(callback); - subscribers[topic].splice(index, 1); - } - - var notify = function notify() { - for (var i in subscribers[this.topic]) { - subscribers[this.topic][i](this.value); - } - } - - var init = function init() { - var elem = document.querySelectorAll('.ui-input-slider'); - var size = elem.length; - for (var i = 0; i < size; i++) - new InputSlider(elem[i]); - } - - return { - init : init, - setMax : setMax, - setMin : setMin, - setUnit : setUnit, - getNode : getNode, - setValue : setValue, - subscribe : subscribe, - unsubscribe : unsubscribe - } - + var subscribers = {}; + var sliders = []; + + var InputComponent = function InputComponent(obj) { + var input = document.createElement("input"); + input.setAttribute("type", "text"); + + input.addEventListener("click", function (e) { + this.select(); + }); + + input.addEventListener("change", function (e) { + var value = parseInt(e.target.value); + + if (isNaN(value) === true) setValue(obj.topic, obj.value); + else setValue(obj.topic, value); + }); + + subscribe(obj.topic, function (value) { + input.value = value + obj.unit; + }); + + return input; + }; + + var SliderComponent = function SliderComponent(obj, sign) { + var slider = document.createElement("div"); + var startX = null; + var start_value = 0; + + slider.addEventListener("click", function (e) { + setValue(obj.topic, obj.value + obj.step * sign); + }); + + slider.addEventListener("mousedown", function (e) { + startX = e.clientX; + start_value = obj.value; + document.body.style.cursor = "e-resize"; + document.addEventListener("mousemove", sliderMotion); + }); + + document.addEventListener("mouseup", function (e) { + document.removeEventListener("mousemove", sliderMotion); + document.body.style.cursor = "auto"; + slider.style.cursor = "pointer"; + }); + + var sliderMotion = function sliderMotion(e) { + slider.style.cursor = "e-resize"; + var delta = ((e.clientX - startX) / obj.sensitivity) | 0; + var value = delta * obj.step + start_value; + setValue(obj.topic, value); + }; + + return slider; + }; + + var InputSlider = function (node) { + var min = node.getAttribute("data-min") | 0; + var max = node.getAttribute("data-max") | 0; + var step = node.getAttribute("data-step") | 0; + var value = node.getAttribute("data-value") | 0; + var topic = node.getAttribute("data-topic"); + var unit = node.getAttribute("data-unit"); + var name = node.getAttribute("data-info"); + var sensitivity = node.getAttribute("data-sensitivity") | 0; + + this.min = min; + this.max = max > 0 ? max : 100; + this.step = step === 0 ? 1 : step; + this.topic = topic; + this.node = node; + this.unit = unit; + this.sensitivity = sensitivity > 0 ? sensitivity : 5; + + var input = new InputComponent(this); + var slider_left = new SliderComponent(this, -1); + var slider_right = new SliderComponent(this, 1); + + slider_left.className = "ui-input-slider-left"; + slider_right.className = "ui-input-slider-right"; + + if (name) { + var info = document.createElement("span"); + info.className = "ui-input-slider-info"; + info.textContent = name; + node.appendChild(info); + } + + node.appendChild(slider_left); + node.appendChild(input); + node.appendChild(slider_right); + node.className = "ui-input-slider ui-input-slider-container"; + + this.input = input; + sliders[topic] = this; + setValue(topic, value); + }; + + var setValue = function setValue(topic, value, send_notify) { + var slider = sliders[topic]; + if (slider === undefined) return; + + if (value > slider.max) value = slider.max; + if (value < slider.min) value = slider.min; + + slider.value = value; + slider.node.setAttribute("data-value", value); + + if (send_notify !== undefined && send_notify === false) { + slider.input.value = value + slider.unit; + return; + } + + notify.call(slider); + }; + + var setMax = function setMax(topic, value) { + var slider = sliders[topic]; + if (slider === undefined) return; + + slider.max = value; + setValue(topic, slider.value); + }; + + var setMin = function setMin(topic, value) { + var slider = sliders[topic]; + if (slider === undefined) return; + + slider.min = value; + setValue(topic, slider.value); + }; + + var setUnit = function setUnit(topic, unit) { + var slider = sliders[topic]; + if (slider === undefined) return; + + slider.unit = unit; + setValue(topic, slider.value); + }; + + var getNode = function getNode(topic) { + return sliders[topic].node; + }; + + var subscribe = function subscribe(topic, callback) { + if (subscribers[topic] === undefined) subscribers[topic] = []; + subscribers[topic].push(callback); + }; + + var unsubscribe = function unsubscribe(topic, callback) { + subscribers[topic].indexOf(callback); + subscribers[topic].splice(index, 1); + }; + + var notify = function notify() { + for (var i in subscribers[this.topic]) { + subscribers[this.topic][i](this.value); + } + }; + + var init = function init() { + var elem = document.querySelectorAll(".ui-input-slider"); + var size = elem.length; + for (var i = 0; i < size; i++) new InputSlider(elem[i]); + }; + + return { + init: init, + setMax: setMax, + setMin: setMin, + setUnit: setUnit, + getNode: getNode, + setValue: setValue, + subscribe: subscribe, + unsubscribe: unsubscribe, + }; })(); /** @@ -199,571 +189,574 @@ var InputSliderManager = (function InputSliderManager() { */ var ButtonManager = (function CheckBoxManager() { - - var subscribers = []; - var buttons = []; - - var CheckBox = function CheckBox(node) { - var topic = node.getAttribute('data-topic'); - var state = node.getAttribute('data-state'); - var name = node.getAttribute('data-label'); - var align = node.getAttribute('data-text-on'); - - state = (state === "true"); - - var checkbox = document.createElement("input"); - var label = document.createElement("label"); - - var id = 'checkbox-' + topic; - checkbox.id = id; - checkbox.setAttribute('type', 'checkbox'); - checkbox.checked = state; - - label.setAttribute('for', id); - if (name) { - label.className = 'text'; - if (align) - label.className += ' ' + align; - label.textContent = name; - } - - node.appendChild(checkbox); - node.appendChild(label); - - this.node = node; - this.topic = topic; - this.checkbox = checkbox; - - checkbox.addEventListener('change', function(e) { - notify.call(this); - }.bind(this)); - - buttons[topic] = this; - } - - var getNode = function getNode(topic) { - return buttons[topic].node; - } - - var setValue = function setValue(topic, value) { - try { - buttons[topic].checkbox.checked = value; - } - catch(error) { - console.log(error); - } - } - - var subscribe = function subscribe(topic, callback) { - if (subscribers[topic] === undefined) - subscribers[topic] = []; - - subscribers[topic].push(callback); - } - - var unsubscribe = function unsubscribe(topic, callback) { - subscribers[topic].indexOf(callback); - subscribers[topic].splice(index, 1); - } - - var notify = function notify() { - for (var i = 0; i < subscribers[this.topic].length; i++) - subscribers[this.topic][i](this.checkbox.checked); - } - - var init = function init() { - var elem = document.querySelectorAll('.ui-checkbox'); - var size = elem.length; - for (var i = 0; i < size; i++) - new CheckBox(elem[i]); - } - - return { - init : init, - setValue : setValue, - subscribe : subscribe, - unsubscribe : unsubscribe - } - + var subscribers = []; + var buttons = []; + + var CheckBox = function CheckBox(node) { + var topic = node.getAttribute("data-topic"); + var state = node.getAttribute("data-state"); + var name = node.getAttribute("data-label"); + var align = node.getAttribute("data-text-on"); + + state = state === "true"; + + var checkbox = document.createElement("input"); + var label = document.createElement("label"); + + var id = "checkbox-" + topic; + checkbox.id = id; + checkbox.setAttribute("type", "checkbox"); + checkbox.checked = state; + + label.setAttribute("for", id); + if (name) { + label.className = "text"; + if (align) label.className += " " + align; + label.textContent = name; + } + + node.appendChild(checkbox); + node.appendChild(label); + + this.node = node; + this.topic = topic; + this.checkbox = checkbox; + + checkbox.addEventListener( + "change", + function (e) { + notify.call(this); + }.bind(this), + ); + + buttons[topic] = this; + }; + + var getNode = function getNode(topic) { + return buttons[topic].node; + }; + + var setValue = function setValue(topic, value) { + try { + buttons[topic].checkbox.checked = value; + } catch (error) { + console.log(error); + } + }; + + var subscribe = function subscribe(topic, callback) { + if (subscribers[topic] === undefined) subscribers[topic] = []; + + subscribers[topic].push(callback); + }; + + var unsubscribe = function unsubscribe(topic, callback) { + subscribers[topic].indexOf(callback); + subscribers[topic].splice(index, 1); + }; + + var notify = function notify() { + for (var i = 0; i < subscribers[this.topic].length; i++) + subscribers[this.topic][i](this.checkbox.checked); + }; + + var init = function init() { + var elem = document.querySelectorAll(".ui-checkbox"); + var size = elem.length; + for (var i = 0; i < size; i++) new CheckBox(elem[i]); + }; + + return { + init: init, + setValue: setValue, + subscribe: subscribe, + unsubscribe: unsubscribe, + }; })(); -window.addEventListener("load", function() { - BorderRadius.init(); +window.addEventListener("load", function () { + BorderRadius.init(); }); var BorderRadius = (function BorderRadius() { - - function getElemById(id) { - return document.getElementById(id); - } - - /** - * Shadow dragging - */ - var PreviewMouseTracking = (function Drag() { - var active = false; - var lastX = 0; - var lastY = 0; - var subscribers = []; - - var init = function init(id) { - var elem = getElemById(id); - elem.addEventListener('mousedown', dragStart, false); - document.addEventListener('mouseup', dragEnd, false); - } - - var dragStart = function dragStart(e) { - if (e.button !== 0) - return; - - active = true; - lastX = e.clientX; - lastY = e.clientY; - document.addEventListener('mousemove', mouseDrag, false); - } - - var dragEnd = function dragEnd(e) { - if (e.button !== 0) - return; - - if (active === true) { - active = false; - document.removeEventListener('mousemove', mouseDrag, false); - } - } - - var mouseDrag = function mouseDrag(e) { - notify(e.clientX - lastX, e.clientY - lastY); - lastX = e.clientX; - lastY = e.clientY; - } - - var subscribe = function subscribe(callback) { - subscribers.push(callback); - } - - var unsubscribe = function unsubscribe(callback) { - var index = subscribers.indexOf(callback); - subscribers.splice(index, 1); - } - - var notify = function notify(deltaX, deltaY) { - for (var i in subscribers) - subscribers[i](deltaX, deltaY); - } - - return { - init : init, - subscribe : subscribe, - unsubscribe : unsubscribe - } - - })(); - - var subject; - var units = ['px', '%']; - var output = null; - - var UnitSelector = function UnitSelector(topic) { - - this.container = document.createElement("div"); - this.select = document.createElement("select"); - for (var i in units) { - var option = document.createElement("option"); - option.value = i; - option.textContent = units[i]; - this.select.appendChild(option); - } - - this.container.className = 'dropdown ' + 'unit-' + topic; - this.container.appendChild(this.select); - } - - UnitSelector.prototype.setValue = function setValue(value) { - this.select.value = value; - } - - var RadiusContainer = function RadiusContainer(node) { - var radius = document.createElement('div'); - var handle = document.createElement('div'); - var x = node.getAttribute('data-x'); - var y = node.getAttribute('data-y'); - var active = false; - - this.id = node.id; - this.node = node; - this.radius = radius; - this.handle = handle; - this.width = 100; - this.height = 50; - this.size = 0; - this.rounded = false; - - this.unitX = 0; - this.unitY = 0; - this.unitR = 0; - - this.maxW = 100; - this.maxH = 100; - this.maxR = 100; - - this.topic = y + '-' + x; - - var sliderW = InputSliderManager.getNode(this.topic + '-w'); - var sliderH = InputSliderManager.getNode(this.topic + '-h'); - var sliderR = InputSliderManager.getNode(this.topic); - - this.setUnitX(this.unitX); - this.setUnitY(this.unitY); - this.setUnitR(this.unitR); - - this.updateWidth(); - this.updateHeight(); - this.updateRadius(); - - if (x === 'left') this.resizeX = 1; - if (x === 'right') this.resizeX = -1; - if (y === 'top') this.resizeY = 1; - if (y === 'bottom') this.resizeY = -1; - - radius.className = 'radius'; - - var unit_selector = document.getElementById("unit-selection"); - var unitW = new UnitSelector(this.topic + '-w'); - var unitH = new UnitSelector(this.topic + '-h'); - var unitR = new UnitSelector(this.topic); - - unit_selector.appendChild(unitW.container); - unit_selector.appendChild(unitH.container); - unit_selector.appendChild(unitR.container); - node.appendChild(radius); - subject.appendChild(handle); - - unitW.select.addEventListener('change', function(e) { - this.setUnitX(e.target.value | 0); - }.bind(this)); - - unitH.select.addEventListener('change', function(e) { - this.setUnitY(e.target.value | 0); - }.bind(this)); - - unitR.select.addEventListener('change', function(e) { - this.setUnitR(e.target.value | 0); - }.bind(this)); - - if (x === 'left' && y == 'top') handle.className = 'handle handle-top-left' - if (x === 'right' && y == 'top') handle.className = 'handle handle-top-right'; - if (x === 'right' && y == 'bottom') handle.className = 'handle handle-bottom-right'; - if (x === 'left' && y == 'bottom') handle.className = 'handle handle-bottom-left'; - - handle.addEventListener("mousedown", function(e) { - active = true; - this.radius.style.display = 'block'; - PreviewMouseTracking.subscribe(this.updateContainer.bind(this)); - }.bind(this)); - - document.addEventListener("mouseup", function(e) { - this.radius.style.display = 'none'; - if (active === true) - PreviewMouseTracking.unsubscribe(this.updateContainer.bind(this)); - }.bind(this)); - - InputSliderManager.subscribe(this.topic + '-w', this.setWidth.bind(this)); - InputSliderManager.subscribe(this.topic + '-h', this.setHeight.bind(this)); - InputSliderManager.subscribe(this.topic, this.setRadius.bind(this)); - - ButtonManager.subscribe(this.topic, function(value) { - this.rounded = value; - if (value === true) { - unitW.container.style.display = 'none'; - unitH.container.style.display = 'none'; - unitR.container.style.display = 'block'; - sliderW.style.display = 'none'; - sliderH.style.display = 'none'; - sliderR.style.display = 'block'; - this.setUnitR(this.unitR); - this.updateRadius(); - } - - if (value === false) { - unitW.container.style.display = 'block'; - unitH.container.style.display = 'block'; - unitR.container.style.display = 'none'; - sliderW.style.display = 'block'; - sliderH.style.display = 'block'; - sliderR.style.display = 'none'; - this.setUnitX(this.unitX); - this.setUnitY(this.unitY); - this.updateWidth(); - this.updateHeight(); - } - - this.updateBorderRadius(); - - }.bind(this)); - - this.updateBorderRadius(); - } - - RadiusContainer.prototype.updateWidth = function updateWidth() { - this.node.style.width = this.width + units[this.unitX]; - var value = Math.round(this.width / 2); - InputSliderManager.setValue(this.topic + '-w', value, false); - } - - RadiusContainer.prototype.updateHeight = function updateHeight() { - this.node.style.height = this.height + units[this.unitY]; - var value = Math.round(this.height / 2); - InputSliderManager.setValue(this.topic + '-h', value, false); - } - - RadiusContainer.prototype.updateRadius = function updateRadius() { - var value = Math.round(this.size / 2); - this.node.style.width = this.size + units[this.unitR]; - this.node.style.height = this.size + units[this.unitR]; - InputSliderManager.setValue(this.topic, value, false); - } - - RadiusContainer.prototype.setWidth = function setWidth(value) { - this.radius.style.display = 'block'; - this.width = 2 * value; - this.node.style.width = this.width + units[this.unitX]; - this.updateBorderRadius(); - } - - RadiusContainer.prototype.setHeight = function setHeight(value) { - this.radius.style.display = 'block'; - this.height = 2 * value; - this.node.style.height = this.height + units[this.unitY]; - this.updateBorderRadius(); - } - - RadiusContainer.prototype.setRadius = function setRadius(value) { - this.radius.style.display = 'block'; - this.size = 2 * value; - this.node.style.width = this.size + units[this.unitR]; - this.node.style.height = this.size + units[this.unitR]; - this.updateBorderRadius(); - } - - RadiusContainer.prototype.setUnitX = function setUnitX(value) { - this.unitX = value; - if (this.unitX === 0) this.maxW = 2 * subject.clientWidth; - if (this.unitX === 1) this.maxW = 200; - InputSliderManager.setUnit(this.topic + '-w', units[this.unitX]); - InputSliderManager.setMax(this.topic + '-w', this.maxW / 2); - } - - RadiusContainer.prototype.setUnitY = function setUnitY(value) { - this.unitY = value; - if (this.unitY === 0) this.maxH = 2 * subject.clientHeight; - if (this.unitY === 1) this.maxH = 200; - InputSliderManager.setUnit(this.topic + '-h', units[this.unitY]); - InputSliderManager.setMax(this.topic + '-h', this.maxH / 2); - } - - RadiusContainer.prototype.setUnitR = function setUnitR(value) { - this.unitR = value; - - if (this.unitR === 0) - this.maxR = 2 * Math.min(subject.clientHeight , subject.clientWidth); - - if (this.unitR === 1) - this.maxR = 200; - - InputSliderManager.setUnit(this.topic, units[this.unitR]); - InputSliderManager.setMax(this.topic, this.maxR / 2); - } - - RadiusContainer.prototype.updateUnits = function updateUnits(unit) { - if (this.rounded) { - this.setUnitR(this.unitR); - return; - } - - if (unit === 0) - this.setUnitX(this.unitX); - - if (unit === 1) - this.setUnitY(this.unitY); - } - - RadiusContainer.prototype.composeBorderRadius = function composeBorderRadius () { - - if (this.rounded === true) { - var unit = units[this.unitR]; - var value = Math.round(this.size / 2); - return value + unit; - } - - var unitX = units[this.unitX]; - var unitY = units[this.unitY]; - var valueX = Math.round(this.width / 2); - var valueY = Math.round(this.height / 2); - - if (valueX === valueY && this.unitX === this.unitY) - return valueX + unitX; - - return valueX + unitX + ' ' + valueY + unitY; - } - - RadiusContainer.prototype.updateBorderRadius = function updateBorderRadius () { - var radius = this.composeBorderRadius(); - var corner = 0; - - if (this.topic === 'top-left') { - subject.style.borderTopLeftRadius = radius; - corner = 0; - } - - if (this.topic === 'top-right') { - subject.style.borderTopRightRadius = radius; - corner = 1; - } - - if (this.topic === 'bottom-right') { - subject.style.borderBottomRightRadius = radius; - corner = 2; - } - - if (this.topic === 'bottom-left') { - subject.style.borderBottomLeftRadius = radius; - corner = 3; - } - - Tool.updateOutput(corner, radius); - } - - RadiusContainer.prototype.updateContainer = function updateContainer(deltaX, deltaY) { - - if (this.rounded === true) { - this.size += this.resizeX * deltaX + this.resizeY * deltaY; - if (this.size < 0) this.size = 0; - if (this.size > this.maxR) this.size = this.maxR; - this.updateRadius(); - this.updateBorderRadius(); - return; - } - - if (deltaX) { - this.width += this.resizeX * deltaX; - if (this.width < 0) this.width = 0; - if (this.width > this.maxW) this.width = this.maxW; - this.updateWidth(); - } - - if (deltaY) { - this.height += this.resizeY * deltaY; - if (this.height < 0) this.height = 0; - if (this.height > this.maxH) this.height = this.maxH; - this.updateHeight(); - } - - if (deltaX || deltaY) - this.updateBorderRadius(); - } - - /** - * Tool Manager - */ - var Tool = (function Tool() { - var preview; - var preview_ui; - var radius_containers = []; - var border_width = 3; - var borders1 = [null, null, null, null]; - var borders2 = [0, 0, 0, 0]; - - var updateUIWidth = function updateUIWidth(value) { - var pwidth = subject.parentElement.clientWidth; - var left = (pwidth - value) / 2; - subject.style.width = value + "px"; - - for (var i = 0; i < 4; i++) - radius_containers[i].updateUnits(0); - } - - var updateUIHeight = function updateUIHeight(value) { - var pheight = subject.parentElement.clientHeight; - var top = (pheight - value) / 2; - subject.style.height = value + "px"; - subject.style.top = top - border_width + "px"; - - for (var i = 0; i < 4; i++) - radius_containers[i].updateUnits(1); - } - - var updatePreviewUIWidth = function updatePreviewUIWidth() { - var p = subject.parentElement.clientWidth; - var v = preview_ui.clientWidth; - console.log(p, v, (p - v ) / 2); - preview_ui.style.left = (p - v) / 2 + "px" ; - } - - var updatePreviewUIHeight = function updatePreviewUIHeight() { - var p = subject.parentElement.clientHeight; - var v = preview_ui.clientHeight; - console.log(p, v, (p - v ) / 2); - preview_ui.style.top = (p - v) / 2 + "px" ; - } - - var updateOutput = function updateOutput(corner, radius) { - var values = radius.split(" "); - - borders1[corner] = values[0]; - borders2[corner] = values[0]; - - if (values.length === 2) - borders2[corner] = values[1]; - - var border_1_value = borders1.join(" "); - var border_2_value = borders2.join(" "); - var border_radius = 'border-radius: ' + border_1_value; - - if (border_2_value !== border_1_value) - border_radius += ' / ' + border_2_value; - - border_radius += ';'; - output.textContent = border_radius; - } - - var init = function init() { - preview = getElemById("preview"); - subject = getElemById("subject"); - output = getElemById("output"); - preview_ui = getElemById("radius-ui-sliders"); - - var elem = document.querySelectorAll('.radius-container'); - var size = elem.length; - for (var i = 0; i < size; i++) - radius_containers[i] = new RadiusContainer(elem[i]); - - InputSliderManager.subscribe("width", updateUIWidth); - InputSliderManager.subscribe("height", updateUIHeight); - - InputSliderManager.setValue("width", subject.clientWidth); - InputSliderManager.setValue("height", subject.clientHeight); - } - - return { - init : init, - updateOutput : updateOutput - } - - })(); - - /** - * Init Tool - */ - var init = function init() { - ButtonManager.init(); - InputSliderManager.init(); - PreviewMouseTracking.init("preview"); - Tool.init(); - } - - return { - init : init - } - + function getElemById(id) { + return document.getElementById(id); + } + + /** + * Shadow dragging + */ + var PreviewMouseTracking = (function Drag() { + var active = false; + var lastX = 0; + var lastY = 0; + var subscribers = []; + + var init = function init(id) { + var elem = getElemById(id); + elem.addEventListener("mousedown", dragStart, false); + document.addEventListener("mouseup", dragEnd, false); + }; + + var dragStart = function dragStart(e) { + if (e.button !== 0) return; + + active = true; + lastX = e.clientX; + lastY = e.clientY; + document.addEventListener("mousemove", mouseDrag, false); + }; + + var dragEnd = function dragEnd(e) { + if (e.button !== 0) return; + + if (active === true) { + active = false; + document.removeEventListener("mousemove", mouseDrag, false); + } + }; + + var mouseDrag = function mouseDrag(e) { + notify(e.clientX - lastX, e.clientY - lastY); + lastX = e.clientX; + lastY = e.clientY; + }; + + var subscribe = function subscribe(callback) { + subscribers.push(callback); + }; + + var unsubscribe = function unsubscribe(callback) { + var index = subscribers.indexOf(callback); + subscribers.splice(index, 1); + }; + + var notify = function notify(deltaX, deltaY) { + for (var i in subscribers) subscribers[i](deltaX, deltaY); + }; + + return { + init: init, + subscribe: subscribe, + unsubscribe: unsubscribe, + }; + })(); + + var subject; + var units = ["px", "%"]; + var output = null; + + var UnitSelector = function UnitSelector(topic) { + this.container = document.createElement("div"); + this.select = document.createElement("select"); + for (var i in units) { + var option = document.createElement("option"); + option.value = i; + option.textContent = units[i]; + this.select.appendChild(option); + } + + this.container.className = "dropdown " + "unit-" + topic; + this.container.appendChild(this.select); + }; + + UnitSelector.prototype.setValue = function setValue(value) { + this.select.value = value; + }; + + var RadiusContainer = function RadiusContainer(node) { + var radius = document.createElement("div"); + var handle = document.createElement("div"); + var x = node.getAttribute("data-x"); + var y = node.getAttribute("data-y"); + var active = false; + + this.id = node.id; + this.node = node; + this.radius = radius; + this.handle = handle; + this.width = 100; + this.height = 50; + this.size = 0; + this.rounded = false; + + this.unitX = 0; + this.unitY = 0; + this.unitR = 0; + + this.maxW = 100; + this.maxH = 100; + this.maxR = 100; + + this.topic = y + "-" + x; + + var sliderW = InputSliderManager.getNode(this.topic + "-w"); + var sliderH = InputSliderManager.getNode(this.topic + "-h"); + var sliderR = InputSliderManager.getNode(this.topic); + + this.setUnitX(this.unitX); + this.setUnitY(this.unitY); + this.setUnitR(this.unitR); + + this.updateWidth(); + this.updateHeight(); + this.updateRadius(); + + if (x === "left") this.resizeX = 1; + if (x === "right") this.resizeX = -1; + if (y === "top") this.resizeY = 1; + if (y === "bottom") this.resizeY = -1; + + radius.className = "radius"; + + var unit_selector = document.getElementById("unit-selection"); + var unitW = new UnitSelector(this.topic + "-w"); + var unitH = new UnitSelector(this.topic + "-h"); + var unitR = new UnitSelector(this.topic); + + unit_selector.appendChild(unitW.container); + unit_selector.appendChild(unitH.container); + unit_selector.appendChild(unitR.container); + node.appendChild(radius); + subject.appendChild(handle); + + unitW.select.addEventListener( + "change", + function (e) { + this.setUnitX(e.target.value | 0); + }.bind(this), + ); + + unitH.select.addEventListener( + "change", + function (e) { + this.setUnitY(e.target.value | 0); + }.bind(this), + ); + + unitR.select.addEventListener( + "change", + function (e) { + this.setUnitR(e.target.value | 0); + }.bind(this), + ); + + if (x === "left" && y == "top") handle.className = "handle handle-top-left"; + if (x === "right" && y == "top") + handle.className = "handle handle-top-right"; + if (x === "right" && y == "bottom") + handle.className = "handle handle-bottom-right"; + if (x === "left" && y == "bottom") + handle.className = "handle handle-bottom-left"; + + handle.addEventListener( + "mousedown", + function (e) { + active = true; + this.radius.style.display = "block"; + PreviewMouseTracking.subscribe(this.updateContainer.bind(this)); + }.bind(this), + ); + + document.addEventListener( + "mouseup", + function (e) { + this.radius.style.display = "none"; + if (active === true) + PreviewMouseTracking.unsubscribe(this.updateContainer.bind(this)); + }.bind(this), + ); + + InputSliderManager.subscribe(this.topic + "-w", this.setWidth.bind(this)); + InputSliderManager.subscribe(this.topic + "-h", this.setHeight.bind(this)); + InputSliderManager.subscribe(this.topic, this.setRadius.bind(this)); + + ButtonManager.subscribe( + this.topic, + function (value) { + this.rounded = value; + if (value === true) { + unitW.container.style.display = "none"; + unitH.container.style.display = "none"; + unitR.container.style.display = "block"; + sliderW.style.display = "none"; + sliderH.style.display = "none"; + sliderR.style.display = "block"; + this.setUnitR(this.unitR); + this.updateRadius(); + } + + if (value === false) { + unitW.container.style.display = "block"; + unitH.container.style.display = "block"; + unitR.container.style.display = "none"; + sliderW.style.display = "block"; + sliderH.style.display = "block"; + sliderR.style.display = "none"; + this.setUnitX(this.unitX); + this.setUnitY(this.unitY); + this.updateWidth(); + this.updateHeight(); + } + + this.updateBorderRadius(); + }.bind(this), + ); + + this.updateBorderRadius(); + }; + + RadiusContainer.prototype.updateWidth = function updateWidth() { + this.node.style.width = this.width + units[this.unitX]; + var value = Math.round(this.width / 2); + InputSliderManager.setValue(this.topic + "-w", value, false); + }; + + RadiusContainer.prototype.updateHeight = function updateHeight() { + this.node.style.height = this.height + units[this.unitY]; + var value = Math.round(this.height / 2); + InputSliderManager.setValue(this.topic + "-h", value, false); + }; + + RadiusContainer.prototype.updateRadius = function updateRadius() { + var value = Math.round(this.size / 2); + this.node.style.width = this.size + units[this.unitR]; + this.node.style.height = this.size + units[this.unitR]; + InputSliderManager.setValue(this.topic, value, false); + }; + + RadiusContainer.prototype.setWidth = function setWidth(value) { + this.radius.style.display = "block"; + this.width = 2 * value; + this.node.style.width = this.width + units[this.unitX]; + this.updateBorderRadius(); + }; + + RadiusContainer.prototype.setHeight = function setHeight(value) { + this.radius.style.display = "block"; + this.height = 2 * value; + this.node.style.height = this.height + units[this.unitY]; + this.updateBorderRadius(); + }; + + RadiusContainer.prototype.setRadius = function setRadius(value) { + this.radius.style.display = "block"; + this.size = 2 * value; + this.node.style.width = this.size + units[this.unitR]; + this.node.style.height = this.size + units[this.unitR]; + this.updateBorderRadius(); + }; + + RadiusContainer.prototype.setUnitX = function setUnitX(value) { + this.unitX = value; + if (this.unitX === 0) this.maxW = 2 * subject.clientWidth; + if (this.unitX === 1) this.maxW = 200; + InputSliderManager.setUnit(this.topic + "-w", units[this.unitX]); + InputSliderManager.setMax(this.topic + "-w", this.maxW / 2); + }; + + RadiusContainer.prototype.setUnitY = function setUnitY(value) { + this.unitY = value; + if (this.unitY === 0) this.maxH = 2 * subject.clientHeight; + if (this.unitY === 1) this.maxH = 200; + InputSliderManager.setUnit(this.topic + "-h", units[this.unitY]); + InputSliderManager.setMax(this.topic + "-h", this.maxH / 2); + }; + + RadiusContainer.prototype.setUnitR = function setUnitR(value) { + this.unitR = value; + + if (this.unitR === 0) + this.maxR = 2 * Math.min(subject.clientHeight, subject.clientWidth); + + if (this.unitR === 1) this.maxR = 200; + + InputSliderManager.setUnit(this.topic, units[this.unitR]); + InputSliderManager.setMax(this.topic, this.maxR / 2); + }; + + RadiusContainer.prototype.updateUnits = function updateUnits(unit) { + if (this.rounded) { + this.setUnitR(this.unitR); + return; + } + + if (unit === 0) this.setUnitX(this.unitX); + + if (unit === 1) this.setUnitY(this.unitY); + }; + + RadiusContainer.prototype.composeBorderRadius = + function composeBorderRadius() { + if (this.rounded === true) { + var unit = units[this.unitR]; + var value = Math.round(this.size / 2); + return value + unit; + } + + var unitX = units[this.unitX]; + var unitY = units[this.unitY]; + var valueX = Math.round(this.width / 2); + var valueY = Math.round(this.height / 2); + + if (valueX === valueY && this.unitX === this.unitY) return valueX + unitX; + + return valueX + unitX + " " + valueY + unitY; + }; + + RadiusContainer.prototype.updateBorderRadius = function updateBorderRadius() { + var radius = this.composeBorderRadius(); + var corner = 0; + + if (this.topic === "top-left") { + subject.style.borderTopLeftRadius = radius; + corner = 0; + } + + if (this.topic === "top-right") { + subject.style.borderTopRightRadius = radius; + corner = 1; + } + + if (this.topic === "bottom-right") { + subject.style.borderBottomRightRadius = radius; + corner = 2; + } + + if (this.topic === "bottom-left") { + subject.style.borderBottomLeftRadius = radius; + corner = 3; + } + + Tool.updateOutput(corner, radius); + }; + + RadiusContainer.prototype.updateContainer = function updateContainer( + deltaX, + deltaY, + ) { + if (this.rounded === true) { + this.size += this.resizeX * deltaX + this.resizeY * deltaY; + if (this.size < 0) this.size = 0; + if (this.size > this.maxR) this.size = this.maxR; + this.updateRadius(); + this.updateBorderRadius(); + return; + } + + if (deltaX) { + this.width += this.resizeX * deltaX; + if (this.width < 0) this.width = 0; + if (this.width > this.maxW) this.width = this.maxW; + this.updateWidth(); + } + + if (deltaY) { + this.height += this.resizeY * deltaY; + if (this.height < 0) this.height = 0; + if (this.height > this.maxH) this.height = this.maxH; + this.updateHeight(); + } + + if (deltaX || deltaY) this.updateBorderRadius(); + }; + + /** + * Tool Manager + */ + var Tool = (function Tool() { + var preview; + var preview_ui; + var radius_containers = []; + var border_width = 3; + var borders1 = [null, null, null, null]; + var borders2 = [0, 0, 0, 0]; + + var updateUIWidth = function updateUIWidth(value) { + var pwidth = subject.parentElement.clientWidth; + var left = (pwidth - value) / 2; + subject.style.width = value + "px"; + + for (var i = 0; i < 4; i++) radius_containers[i].updateUnits(0); + }; + + var updateUIHeight = function updateUIHeight(value) { + var pheight = subject.parentElement.clientHeight; + var top = (pheight - value) / 2; + subject.style.height = value + "px"; + subject.style.top = top - border_width + "px"; + + for (var i = 0; i < 4; i++) radius_containers[i].updateUnits(1); + }; + + var updatePreviewUIWidth = function updatePreviewUIWidth() { + var p = subject.parentElement.clientWidth; + var v = preview_ui.clientWidth; + console.log(p, v, (p - v) / 2); + preview_ui.style.left = (p - v) / 2 + "px"; + }; + + var updatePreviewUIHeight = function updatePreviewUIHeight() { + var p = subject.parentElement.clientHeight; + var v = preview_ui.clientHeight; + console.log(p, v, (p - v) / 2); + preview_ui.style.top = (p - v) / 2 + "px"; + }; + + var updateOutput = function updateOutput(corner, radius) { + var values = radius.split(" "); + + borders1[corner] = values[0]; + borders2[corner] = values[0]; + + if (values.length === 2) borders2[corner] = values[1]; + + var border_1_value = borders1.join(" "); + var border_2_value = borders2.join(" "); + var border_radius = "border-radius: " + border_1_value; + + if (border_2_value !== border_1_value) + border_radius += " / " + border_2_value; + + border_radius += ";"; + output.textContent = border_radius; + }; + + var init = function init() { + preview = getElemById("preview"); + subject = getElemById("subject"); + output = getElemById("output"); + preview_ui = getElemById("radius-ui-sliders"); + + var elem = document.querySelectorAll(".radius-container"); + var size = elem.length; + for (var i = 0; i < size; i++) + radius_containers[i] = new RadiusContainer(elem[i]); + + InputSliderManager.subscribe("width", updateUIWidth); + InputSliderManager.subscribe("height", updateUIHeight); + + InputSliderManager.setValue("width", subject.clientWidth); + InputSliderManager.setValue("height", subject.clientHeight); + }; + + return { + init: init, + updateOutput: updateOutput, + }; + })(); + + /** + * Init Tool + */ + var init = function init() { + ButtonManager.init(); + InputSliderManager.init(); + PreviewMouseTracking.init("preview"); + Tool.init(); + }; + + return { + init: init, + }; })(); diff --git a/tools/border-radius-generator/styles.css b/tools/border-radius-generator/styles.css index 9bdb4228..e041d085 100644 --- a/tools/border-radius-generator/styles.css +++ b/tools/border-radius-generator/styles.css @@ -2,89 +2,90 @@ * ========================================================================== */ .span_12 { - width: 100%; + width: 100%; } .span_11 { - width: 91.46%; + width: 91.46%; } .span_10 { - width: 83%; + width: 83%; } .span_9 { - width: 74.54%; + width: 74.54%; } .span_8 { - width: 66.08%; + width: 66.08%; } .span_7 { - width: 57.62%; + width: 57.62%; } .span_6 { - width: 49.16%; + width: 49.16%; } .span_5 { - width: 40.7%; + width: 40.7%; } .span_4 { - width: 32.24%; + width: 32.24%; } .span_3 { - width: 23.78%; + width: 23.78%; } .span_2 { - width: 15.32%; + width: 15.32%; } .span_1 { - width: 6.86%; + width: 6.86%; } /* SECTIONS * ========================================================================== */ .section { - clear: both; - padding: 0px; - margin: 0px; + clear: both; + padding: 0px; + margin: 0px; } /* GROUPING * ========================================================================== */ -.group:before, .group:after { - content: ""; - display: table; +.group:before, +.group:after { + content: ""; + display: table; } .group:after { - clear:both; + clear: both; } .group { - zoom: 1; /* For IE 6/7 (trigger hasLayout) */ + zoom: 1; /* For IE 6/7 (trigger hasLayout) */ } /* GRID COLUMN SETUP * ========================================================================== */ .col { - display: block; - float:left; - margin: 1% 0 1% 1.6%; + display: block; + float: left; + margin: 1% 0 1% 1.6%; } .col:first-child { - margin-left: 0; + margin-left: 0; } /* all browsers except IE6 and lower */ /* @@ -92,69 +93,70 @@ */ .ui-input-slider-container { - height: 20px; - margin: 10px 0; - font-family: "Segoe UI", Arial, Helvetica, sans-serif; - -moz-user-select: none; - user-select: none; + height: 20px; + margin: 10px 0; + font-family: "Segoe UI", Arial, Helvetica, sans-serif; + -moz-user-select: none; + user-select: none; } .ui-input-slider-container * { - float: left; - height: 100%; - line-height: 100%; + float: left; + height: 100%; + line-height: 100%; } /* Input Slider */ .ui-input-slider > input { - margin: 0; - padding: 0; - width: 50px; - text-align: center; + margin: 0; + padding: 0; + width: 50px; + text-align: center; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; } .ui-input-slider-info { - width: 90px; - padding: 0px 10px 0px 0px; - text-align: right; - text-transform: lowercase; + width: 90px; + padding: 0px 10px 0px 0px; + text-align: right; + text-transform: lowercase; } -.ui-input-slider-left, .ui-input-slider-right { - width: 16px; - cursor: pointer; - background: url("arrows.png") center left no-repeat; +.ui-input-slider-left, +.ui-input-slider-right { + width: 16px; + cursor: pointer; + background: url("arrows.png") center left no-repeat; } .ui-input-slider-right { - background: url("arrows.png") center right no-repeat; + background: url("arrows.png") center right no-repeat; } .ui-input-slider-name { - width: 90px; - padding: 0 10px 0 0; - text-align: right; - text-transform: lowercase; + width: 90px; + padding: 0 10px 0 0; + text-align: right; + text-transform: lowercase; } .ui-input-slider-btn-set { - width: 25px; - background-color: #2C9FC9; - border-radius: 5px; - color: #FFF; - font-weight: bold; - line-height: 14px; - text-align: center; + width: 25px; + background-color: #2c9fc9; + border-radius: 5px; + color: #fff; + font-weight: bold; + line-height: 14px; + text-align: center; } .ui-input-slider-btn-set:hover { - background-color: #379B4A; - cursor: pointer; + background-color: #379b4a; + cursor: pointer; } /* @@ -164,81 +166,81 @@ /* Checkbox */ .ui-checkbox { - text-align: center; - font-size: 16px; - font-family: "Segoe UI", Arial, Helvetica, sans-serif; - line-height: 1.5em; - color: #FFF; + text-align: center; + font-size: 16px; + font-family: "Segoe UI", Arial, Helvetica, sans-serif; + line-height: 1.5em; + color: #fff; - -moz-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; - user-select: none; + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; } .ui-checkbox > input { - display: none; + display: none; } .ui-checkbox > label { - font-size: 12px; - padding: 0.333em 1.666em 0.5em; - height: 1em; - line-height: 1em; + font-size: 12px; + padding: 0.333em 1.666em 0.5em; + height: 1em; + line-height: 1em; - background-color: #888; - background-image: url("disabled.png"); - background-position: center center; - background-repeat: no-repeat; + background-color: #888; + background-image: url("disabled.png"); + background-position: center center; + background-repeat: no-repeat; - color: #FFF; - border-radius: 3px; - font-weight: bold; - float: left; + color: #fff; + border-radius: 3px; + font-weight: bold; + float: left; } .ui-checkbox .text { - padding-left: 34px; - background-position: center left 10px; + padding-left: 34px; + background-position: center left 10px; } .ui-checkbox .left { - padding-right: 34px; - padding-left: 1.666em; - background-position: center right 10px; + padding-right: 34px; + padding-left: 1.666em; + background-position: center right 10px; } .ui-checkbox > label:hover { - cursor: pointer; + cursor: pointer; } .ui-checkbox > input:checked + label { - background-image: url("checked.png"); - background-color: #379B4A; + background-image: url("checked.png"); + background-color: #379b4a; } body { - max-width: 1000px; - margin: 0 auto; + max-width: 1000px; + margin: 0 auto; - font-family: "Segoe UI", Arial, Helvetica, sans-serif; + font-family: "Segoe UI", Arial, Helvetica, sans-serif; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; - -moz-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; - user-select: none; + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; } #container { - width: 100%; + width: 100%; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; } /******************************************************************************/ @@ -248,232 +250,233 @@ body { */ #preview { - height: 500px; - border: 1px solid #CCC; - border-radius: 3px; - text-align: center; - overflow: hidden; - position: relative; + height: 500px; + border: 1px solid #ccc; + border-radius: 3px; + text-align: center; + overflow: hidden; + position: relative; } #preview .content { - width: 100%; - height: 100%; - display: block; + width: 100%; + height: 100%; + display: block; } #preview input { - color: #333; - border: 1px solid #CCC; - border-radius: 3px; + color: #333; + border: 1px solid #ccc; + border-radius: 3px; } #subject { - width: 400px; - height: 150px; - margin: 0 auto; - border: 3px solid #C60; - background: #FFF; - position: relative; + width: 400px; + height: 150px; + margin: 0 auto; + border: 3px solid #c60; + background: #fff; + position: relative; } .radius { - width: 50%; - height: 50%; - border: 1px solid #CCC; - display: none; - position: absolute; - z-index: 1; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; + width: 50%; + height: 50%; + border: 1px solid #ccc; + display: none; + position: absolute; + z-index: 1; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; } .handle { - width: 16px; - height: 16px; - position: absolute; - z-index: 2; + width: 16px; + height: 16px; + position: absolute; + z-index: 2; } .handle-top-left { - top: -12px; - left: -12px; - cursor: se-resize; - background: url("resize-handle.png") top left no-repeat; + top: -12px; + left: -12px; + cursor: se-resize; + background: url("resize-handle.png") top left no-repeat; } .handle-top-right { - top: -12px; - right: -12px; - cursor: sw-resize; - background: url("resize-handle.png") top right no-repeat; + top: -12px; + right: -12px; + cursor: sw-resize; + background: url("resize-handle.png") top right no-repeat; } .handle-bottom-right { - bottom: -12px; - right: -12px; - cursor: nw-resize; - background: url("resize-handle.png") bottom right no-repeat; + bottom: -12px; + right: -12px; + cursor: nw-resize; + background: url("resize-handle.png") bottom right no-repeat; } .handle-bottom-left { - bottom: -12px; - left: -12px; - cursor: ne-resize; - background: url("resize-handle.png") bottom left no-repeat; + bottom: -12px; + left: -12px; + cursor: ne-resize; + background: url("resize-handle.png") bottom left no-repeat; } .radius-container { - position: absolute; - display : block; - z-index: 1; + position: absolute; + display: block; + z-index: 1; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; } /* TOP LEFT */ #top-left { - top: 0; - left: 0; + top: 0; + left: 0; } #top-left .radius { - border-top-left-radius: 100%; - top: 0; - left: 0; + border-top-left-radius: 100%; + top: 0; + left: 0; } /* TOP RIGHT */ #top-right { - top: 0; - right: 0; + top: 0; + right: 0; } #top-right .radius { - border-top-right-radius: 100%; - top: 0; - right: 0; + border-top-right-radius: 100%; + top: 0; + right: 0; } /* BOTTOM RIGHT */ #bottom-right { - bottom: 0; - right: 0; + bottom: 0; + right: 0; } #bottom-right .radius { - border-bottom-right-radius: 100%; - bottom: 0; - right: 0; + border-bottom-right-radius: 100%; + bottom: 0; + right: 0; } /* BOTTOM lEFT */ #bottom-left { - bottom: 0; - left: 0; + bottom: 0; + left: 0; } #bottom-left .radius { - border-bottom-left-radius: 100%; - bottom: 0; + border-bottom-left-radius: 100%; + bottom: 0; } /* INPUT SLIDERS */ #preview .ui-input-slider { - margin: 10px; - position: absolute; - z-index: 10; + margin: 10px; + position: absolute; + z-index: 10; } #radius-ui-sliders { - width: 100%; - height: 100%; - min-height: 75px; - min-width: 150px; - padding: 20px 50px; - top: -20px; - left: -50px; - position: relative; + width: 100%; + height: 100%; + min-height: 75px; + min-width: 150px; + padding: 20px 50px; + top: -20px; + left: -50px; + position: relative; } #tlr { - top: -30px; - left: -50px; - display: none; + top: -30px; + left: -50px; + display: none; } #tlw { - top: -30px; - left: 30px; + top: -30px; + left: 30px; } #tlh { - top: 20px; - left: -50px; + top: 20px; + left: -50px; } #trr { - top: -30px; - right: -50px; - display: none; + top: -30px; + right: -50px; + display: none; } #trw { - top: -30px; - right: 30px; + top: -30px; + right: 30px; } #trh { - top: 20px; - right: -50px; + top: 20px; + right: -50px; } #brr { - bottom: -30px; - right: -50px; - display: none; + bottom: -30px; + right: -50px; + display: none; } #brw { - bottom: -30px; - right: 30px; + bottom: -30px; + right: 30px; } #brh { - bottom: 20px; - right: -50px; + bottom: 20px; + right: -50px; } #blr { - bottom: -30px; - left: -50px; - display: none; + bottom: -30px; + left: -50px; + display: none; } #blw { - bottom: -30px; - left: 30px; + bottom: -30px; + left: 30px; } #blh { - bottom: 20px; - left: -50px; + bottom: 20px; + left: -50px; } -#preview .ui-input-slider-left, #preview .ui-input-slider-right { - visibility: hidden; +#preview .ui-input-slider-left, +#preview .ui-input-slider-right { + visibility: hidden; } #preview .ui-input-slider-container:hover .ui-input-slider-left { - visibility: visible; + visibility: visible; } #preview .ui-input-slider-container:hover .ui-input-slider-right { - visibility: visible; + visibility: visible; } /* @@ -481,190 +484,190 @@ body { */ #unit-selection { - width: 200px; - height: 75px; - margin: 30px 30px 0 0; - padding: 30px; - border: 3px solid #555; - border-radius: 10px; - position: relative; - float: right; + width: 200px; + height: 75px; + margin: 30px 30px 0 0; + padding: 30px; + border: 3px solid #555; + border-radius: 10px; + position: relative; + float: right; } #unit-selection .info { - height: 20%; - width: 100%; - line-height: 20%; - font-size: 20px; - text-align: center; - position: relative; - top: 40%; + height: 20%; + width: 100%; + line-height: 20%; + font-size: 20px; + text-align: center; + position: relative; + top: 40%; } #unit-selection .dropdown { - width: 50px; - height: 20px; - margin: 10px; - padding: 0; - border-radius: 3px; - position: absolute; - overflow: hidden; + width: 50px; + height: 20px; + margin: 10px; + padding: 0; + border-radius: 3px; + position: absolute; + overflow: hidden; } #unit-selection select { - width: 50px; - height: 20px; - margin: 0; - padding: 0 0 0 10px; - background: #555; - border: 1px solid #555; - border: none; - color: #FFF; - float: left; + width: 50px; + height: 20px; + margin: 0; + padding: 0 0 0 10px; + background: #555; + border: 1px solid #555; + border: none; + color: #fff; + float: left; } #unit-selection select option { - background: #FFF; - color: #333; + background: #fff; + color: #333; } #unit-selection select:hover { - cursor: pointer; + cursor: pointer; } #unit-selection .dropdown:before { - content: ""; - width: 18px; - height: 20px; - display: block; - background-color: #555; - background-image: url("dropdown.png"); - background-position: center center; - background-repeat: no-repeat; - top: 0px; - right: 0px; - position: absolute; - z-index: 1; - pointer-events: none; + content: ""; + width: 18px; + height: 20px; + display: block; + background-color: #555; + background-image: url("dropdown.png"); + background-position: center center; + background-repeat: no-repeat; + top: 0px; + right: 0px; + position: absolute; + z-index: 1; + pointer-events: none; } #unit-selection .unit-top-left { - top: 0; - left: 0; - display: none; + top: 0; + left: 0; + display: none; } #unit-selection .unit-top-left-w { - top: -22px; - left: 30px; + top: -22px; + left: 30px; } #unit-selection .unit-top-left-h { - top: 20px; - left: -37px; + top: 20px; + left: -37px; } #unit-selection .unit-top-right { - top: 0; - right: 0; - display: none; + top: 0; + right: 0; + display: none; } #unit-selection .unit-top-right-w { - top: -22px; - right: 30px; + top: -22px; + right: 30px; } #unit-selection .unit-top-right-h { - top: 20px; - right: -37px; + top: 20px; + right: -37px; } #unit-selection .unit-bottom-right { - bottom: 0; - right: 0; - display: none; + bottom: 0; + right: 0; + display: none; } #unit-selection .unit-bottom-right-w { - bottom: -22px; - right: 30px; + bottom: -22px; + right: 30px; } #unit-selection .unit-bottom-right-h { - bottom: 20px; - right: -37px; + bottom: 20px; + right: -37px; } #unit-selection .unit-bottom-left { - bottom: 0; - left: 0; - display: none; + bottom: 0; + left: 0; + display: none; } #unit-selection .unit-bottom-left-w { - bottom: -22px; - left: 30px; + bottom: -22px; + left: 30px; } #unit-selection .unit-bottom-left-h { - bottom: 20px; - left: -37px; + bottom: 20px; + left: -37px; } /******************************************************************************/ /******************************************************************************/ #radius-lock { - width: 200px; - height: 75px; - margin: 30px 0 0 30px; - padding: 30px; - border: 3px solid #555; - border-radius: 10px; - position: relative; - float: left; + width: 200px; + height: 75px; + margin: 30px 0 0 30px; + padding: 30px; + border: 3px solid #555; + border-radius: 10px; + position: relative; + float: left; } #radius-lock .ui-checkbox { - color: #FFF; - position: absolute; + color: #fff; + position: absolute; } #radius-lock .ui-checkbox > label { - height: 20px; - width: 34px; - padding: 0; + height: 20px; + width: 34px; + padding: 0; } #radius-lock .info { - height: 20%; - width: 100%; - line-height: 20%; - font-size: 20px; - text-align: center; - position: relative; - top: 40%; + height: 20%; + width: 100%; + line-height: 20%; + font-size: 20px; + text-align: center; + position: relative; + top: 40%; } #radius-lock [data-topic="top-left"] { - top: 10px; - left: 10px; + top: 10px; + left: 10px; } #radius-lock [data-topic="top-right"] { - top: 10px; - right: 10px; + top: 10px; + right: 10px; } #radius-lock [data-topic="bottom-right"] { - bottom: 10px; - right: 10px; + bottom: 10px; + right: 10px; } #radius-lock [data-topic="bottom-left"] { - bottom: 10px; - left: 10px; + bottom: 10px; + left: 10px; } /** @@ -672,30 +675,30 @@ body { */ #dimensions { - width: 200px; - color: #444; - float:left; + width: 200px; + color: #444; + float: left; } #dimensions input { - background: #555; - color: #FFF; - border: none; - border-radius: 3px; + background: #555; + color: #fff; + border: none; + border-radius: 3px; } #output { - width: 500px; - padding: 10px 0; - margin: 10px 0; - color: #555; - text-align: center; - border: 1px dashed #999; - border-radius: 3px; - -moz-user-select: text; - -webkit-user-select: text; - -ms-user-select: text; - user-select: text; - - float: right; + width: 500px; + padding: 10px 0; + margin: 10px 0; + color: #555; + text-align: center; + border: 1px dashed #999; + border-radius: 3px; + -moz-user-select: text; + -webkit-user-select: text; + -ms-user-select: text; + user-select: text; + + float: right; } diff --git a/tools/box-shadow-generator/index.html b/tools/box-shadow-generator/index.html index a4e35d7e..903fc0ec 100644 --- a/tools/box-shadow-generator/index.html +++ b/tools/box-shadow-generator/index.html @@ -1,214 +1,454 @@ - + - + Box-shadow generator - + -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    +
    +
    +
    +
    +
    +
    +
    +
    +
    -
    -
    -
    element
    -
    - :before - -
    -
    - :after - -
    -
    -
    -
    +
    +
    +
    + element +
    +
    + :before + +
    +
    + :after + +
    +
    +
    +
    -
    -
    -
    -
    -
    -
    -
    +
    +
    +
    +
    +
    +
    +
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    -
    - -
    -
    Shadow properties
    -
    -
    -
    inset
    -
    -
    -
    -
    Position x
    -
    -
    -
    -
    -
    -
    -
    Position y
    -
    -
    -
    -
    -
    -
    -
    Blur
    -
    -
    -
    -
    -
    -
    -
    Spread
    -
    -
    -
    -
    -
    -
    -
    -
    +
    +
    +
    Shadow properties
    +
    +
    +
    inset
    +
    +
    +
    +
    Position x
    +
    +
    +
    +
    +
    +
    +
    Position y
    +
    +
    +
    +
    +
    +
    +
    Blur
    +
    +
    +
    +
    +
    +
    +
    Spread
    +
    +
    +
    +
    +
    +
    +
    -
    -
    Class element properties
    -
    -
    -
    border
    -
    -
    -
    -
    z-index
    -
    -
    -
    -
    -
    -
    -
    top
    -
    -
    -
    -
    -
    -
    -
    left
    -
    -
    -
    -
    -
    -
    -
    Rotate
    -
    -
    -
    -
    -
    -
    -
    -
    Width
    -
    -
    -
    -
    -
    -
    -
    -
    Height
    -
    -
    -
    -
    -
    -
    -
    -
    +
    +
    Class element properties
    +
    +
    +
    border
    +
    +
    +
    +
    z-index
    +
    +
    +
    +
    +
    +
    +
    top
    +
    +
    +
    +
    +
    +
    +
    left
    +
    +
    +
    +
    +
    +
    +
    Rotate
    +
    +
    +
    +
    +
    +
    +
    Width
    +
    +
    +
    +
    +
    +
    +
    Height
    +
    +
    +
    +
    +
    +
    +
    -
    - -
    CSS Code
    -
    -
    -
    -
    -
    -
    -
    -
    -
    +
    + +
    CSS Code
    +
    +
    +
    +
    +
    +
    - - + - diff --git a/tools/box-shadow-generator/script.js b/tools/box-shadow-generator/script.js index cc1727eb..ee9caddd 100644 --- a/tools/box-shadow-generator/script.js +++ b/tools/box-shadow-generator/script.js @@ -1,206 +1,194 @@ -'use strict'; +"use strict"; /** * UI-SlidersManager */ var SliderManager = (function SliderManager() { - - var subscribers = {}; - var sliders = []; - - var Slider = function(node) { - var min = node.getAttribute('data-min') | 0; - var max = node.getAttribute('data-max') | 0; - var step = node.getAttribute('data-step') | 0; - var value = node.getAttribute('data-value') | 0; - var snap = node.getAttribute('data-snap'); - var topic = node.getAttribute('data-topic'); - - this.min = min; - this.max = max > 0 ? max : 100; - this.step = step === 0 ? 1 : step; - this.value = value <= max && value >= min ? value : (min + max) / 2 | 0; - this.snap = snap === "true" ? true : false; - this.topic = topic; - this.node = node; - - var pointer = document.createElement('div'); - pointer.className = 'ui-slider-pointer'; - node.appendChild(pointer); - this.pointer = pointer; - - setMouseTracking(node, updateSlider.bind(this)); - - sliders[topic] = this; - setValue(topic, this.value); - } - - var setButtonComponent = function setButtonComponent(node) { - var type = node.getAttribute('data-type'); - var topic = node.getAttribute('data-topic'); - if (type === "sub") { - node.textContent = '-'; - node.addEventListener("click", function() { - decrement(topic); - }); - } - if (type === "add") { - node.textContent = '+'; - node.addEventListener("click", function() { - increment(topic); - }); - } - } - - var setInputComponent = function setInputComponent(node) { - var topic = node.getAttribute('data-topic'); - var unit_type = node.getAttribute('data-unit'); - - var input = document.createElement('input'); - var unit = document.createElement('span'); - unit.textContent = unit_type; - - input.setAttribute('type', 'text'); - node.appendChild(input); - node.appendChild(unit); - - input.addEventListener('click', function(e) { - this.select(); - }); - - input.addEventListener('change', function(e) { - setValue(topic, e.target.value | 0); - }); - - subscribe(topic, function(value) { - node.children[0].value = value; - }); - } - - var increment = function increment(topic) { - var slider = sliders[topic]; - if (slider === null || slider === undefined) - return; - - if (slider.value + slider.step <= slider.max) { - slider.value += slider.step; - setValue(slider.topic, slider.value) - notify.call(slider); - } - }; - - var decrement = function decrement(topic) { - var slider = sliders[topic]; - if (slider === null || slider === undefined) - return; - - if (slider.value - slider.step >= slider.min) { - slider.value -= slider.step; - setValue(topic, slider.value) - notify.call(slider); - } - } - - // this = Slider object - var updateSlider = function updateSlider(e) { - var node = this.node; - var pos = e.pageX - node.offsetLeft; - var width = node.clientWidth; - var delta = this.max - this.min; - var offset = this.pointer.clientWidth + 4; // border width * 2 - - if (pos < 0) pos = 0; - if (pos > width) pos = width; - - var value = pos * delta / width | 0; - var precision = value % this.step; - value = value - precision + this.min; - if (precision > this.step / 2) - value = value + this.step; - - if (this.snap) - pos = (value - this.min) * width / delta; - - this.pointer.style.left = pos - offset/2 + "px"; - this.value = value; - node.setAttribute('data-value', value); - notify.call(this); - } - - var setValue = function setValue(topic, value) { - var slider = sliders[topic]; - - if (value > slider.max || value < slider.min) - return; - - var delta = slider.max - slider.min; - var width = slider.node.clientWidth; - var offset = slider.pointer.clientWidth; - var pos = (value - slider.min) * width / delta; - slider.value = value; - slider.pointer.style.left = pos - offset / 2 + "px"; - slider.node.setAttribute('data-value', value); - notify.call(slider); - } - - var setMouseTracking = function setMouseTracking(elem, callback) { - elem.addEventListener("mousedown", function(e) { - callback(e); - document.addEventListener("mousemove", callback); - }); - - document.addEventListener("mouseup", function(e) { - document.removeEventListener("mousemove", callback); - }); - } - - var subscribe = function subscribe(topic, callback) { - if (subscribers[topic] === undefined) - subscribers[topic] = []; - subscribers[topic].push(callback); - } - - var unsubscribe = function unsubscribe(topic, callback) { - subscribers[topic].indexOf(callback); - subscribers[topic].splice(index, 1); - } - - var notify = function notify() { - if (subscribers[this.topic] === undefined) - return; - - for (var i in subscribers[this.topic]) { - subscribers[this.topic][i](this.value); - } - } - - var init = function init() { - var elem, size; - - elem = document.querySelectorAll('.ui-slider-btn-set'); - size = elem.length; - for (var i = 0; i < size; i++) - setButtonComponent(elem[i]); - - elem = document.querySelectorAll('.ui-slider-input'); - size = elem.length; - for (var i = 0; i < size; i++) - setInputComponent(elem[i]); - - elem = document.querySelectorAll('.ui-slider'); - size = elem.length; - for (var i = 0; i < size; i++) - new Slider(elem[i]); - } - - return { - init : init, - setValue : setValue, - subscribe : subscribe, - unsubscribe : unsubscribe - } - + var subscribers = {}; + var sliders = []; + + var Slider = function (node) { + var min = node.getAttribute("data-min") | 0; + var max = node.getAttribute("data-max") | 0; + var step = node.getAttribute("data-step") | 0; + var value = node.getAttribute("data-value") | 0; + var snap = node.getAttribute("data-snap"); + var topic = node.getAttribute("data-topic"); + + this.min = min; + this.max = max > 0 ? max : 100; + this.step = step === 0 ? 1 : step; + this.value = value <= max && value >= min ? value : ((min + max) / 2) | 0; + this.snap = snap === "true" ? true : false; + this.topic = topic; + this.node = node; + + var pointer = document.createElement("div"); + pointer.className = "ui-slider-pointer"; + node.appendChild(pointer); + this.pointer = pointer; + + setMouseTracking(node, updateSlider.bind(this)); + + sliders[topic] = this; + setValue(topic, this.value); + }; + + var setButtonComponent = function setButtonComponent(node) { + var type = node.getAttribute("data-type"); + var topic = node.getAttribute("data-topic"); + if (type === "sub") { + node.textContent = "-"; + node.addEventListener("click", function () { + decrement(topic); + }); + } + if (type === "add") { + node.textContent = "+"; + node.addEventListener("click", function () { + increment(topic); + }); + } + }; + + var setInputComponent = function setInputComponent(node) { + var topic = node.getAttribute("data-topic"); + var unit_type = node.getAttribute("data-unit"); + + var input = document.createElement("input"); + var unit = document.createElement("span"); + unit.textContent = unit_type; + + input.setAttribute("type", "text"); + node.appendChild(input); + node.appendChild(unit); + + input.addEventListener("click", function (e) { + this.select(); + }); + + input.addEventListener("change", function (e) { + setValue(topic, e.target.value | 0); + }); + + subscribe(topic, function (value) { + node.children[0].value = value; + }); + }; + + var increment = function increment(topic) { + var slider = sliders[topic]; + if (slider === null || slider === undefined) return; + + if (slider.value + slider.step <= slider.max) { + slider.value += slider.step; + setValue(slider.topic, slider.value); + notify.call(slider); + } + }; + + var decrement = function decrement(topic) { + var slider = sliders[topic]; + if (slider === null || slider === undefined) return; + + if (slider.value - slider.step >= slider.min) { + slider.value -= slider.step; + setValue(topic, slider.value); + notify.call(slider); + } + }; + + // this = Slider object + var updateSlider = function updateSlider(e) { + var node = this.node; + var pos = e.pageX - node.offsetLeft; + var width = node.clientWidth; + var delta = this.max - this.min; + var offset = this.pointer.clientWidth + 4; // border width * 2 + + if (pos < 0) pos = 0; + if (pos > width) pos = width; + + var value = ((pos * delta) / width) | 0; + var precision = value % this.step; + value = value - precision + this.min; + if (precision > this.step / 2) value = value + this.step; + + if (this.snap) pos = ((value - this.min) * width) / delta; + + this.pointer.style.left = pos - offset / 2 + "px"; + this.value = value; + node.setAttribute("data-value", value); + notify.call(this); + }; + + var setValue = function setValue(topic, value) { + var slider = sliders[topic]; + + if (value > slider.max || value < slider.min) return; + + var delta = slider.max - slider.min; + var width = slider.node.clientWidth; + var offset = slider.pointer.clientWidth; + var pos = ((value - slider.min) * width) / delta; + slider.value = value; + slider.pointer.style.left = pos - offset / 2 + "px"; + slider.node.setAttribute("data-value", value); + notify.call(slider); + }; + + var setMouseTracking = function setMouseTracking(elem, callback) { + elem.addEventListener("mousedown", function (e) { + callback(e); + document.addEventListener("mousemove", callback); + }); + + document.addEventListener("mouseup", function (e) { + document.removeEventListener("mousemove", callback); + }); + }; + + var subscribe = function subscribe(topic, callback) { + if (subscribers[topic] === undefined) subscribers[topic] = []; + subscribers[topic].push(callback); + }; + + var unsubscribe = function unsubscribe(topic, callback) { + subscribers[topic].indexOf(callback); + subscribers[topic].splice(index, 1); + }; + + var notify = function notify() { + if (subscribers[this.topic] === undefined) return; + + for (var i in subscribers[this.topic]) { + subscribers[this.topic][i](this.value); + } + }; + + var init = function init() { + var elem, size; + + elem = document.querySelectorAll(".ui-slider-btn-set"); + size = elem.length; + for (var i = 0; i < size; i++) setButtonComponent(elem[i]); + + elem = document.querySelectorAll(".ui-slider-input"); + size = elem.length; + for (var i = 0; i < size; i++) setInputComponent(elem[i]); + + elem = document.querySelectorAll(".ui-slider"); + size = elem.length; + for (var i = 0; i < size; i++) new Slider(elem[i]); + }; + + return { + init: init, + setValue: setValue, + subscribe: subscribe, + unsubscribe: unsubscribe, + }; })(); /** @@ -208,1485 +196,1456 @@ var SliderManager = (function SliderManager() { */ var ButtonManager = (function CheckBoxManager() { - - var subscribers = []; - var buttons = []; - - var CheckBox = function CheckBox(node) { - var topic = node.getAttribute('data-topic'); - var state = node.getAttribute('data-state'); - var name = node.getAttribute('data-label'); - var align = node.getAttribute('data-text-on'); - - state = (state === "true"); - - var checkbox = document.createElement("input"); - var label = document.createElement("label"); - - var id = 'checkbox-' + topic; - checkbox.id = id; - checkbox.setAttribute('type', 'checkbox'); - checkbox.checked = state; - - label.setAttribute('for', id); - if (name) { - label.className = 'text'; - if (align) - label.className += ' ' + align; - label.textContent = name; - } - - node.appendChild(checkbox); - node.appendChild(label); - - this.node = node; - this.topic = topic; - this.checkbox = checkbox; - - checkbox.addEventListener('change', function(e) { - notify.call(this); - }.bind(this)); - - buttons[topic] = this; - } - - var getNode = function getNode(topic) { - return buttons[topic].node; - } - - var setValue = function setValue(topic, value) { - try { - buttons[topic].checkbox.checked = value; - notify.call(buttons[topic]); - } - catch(error) { - console.log(error, topic, value); - } - } - - var subscribe = function subscribe(topic, callback) { - if (subscribers[topic] === undefined) - subscribers[topic] = []; - - subscribers[topic].push(callback); - } - - var unsubscribe = function unsubscribe(topic, callback) { - subscribers[topic].indexOf(callback); - subscribers[topic].splice(index, 1); - } - - var notify = function notify() { - if (subscribers[this.topic] === undefined) - return; - for (var i = 0; i < subscribers[this.topic].length; i++) - subscribers[this.topic][i](this.checkbox.checked); - } - - var init = function init() { - var elem = document.querySelectorAll('.ui-checkbox'); - var size = elem.length; - for (var i = 0; i < size; i++) - new CheckBox(elem[i]); - } - - return { - init : init, - setValue : setValue, - subscribe : subscribe, - unsubscribe : unsubscribe - } - + var subscribers = []; + var buttons = []; + + var CheckBox = function CheckBox(node) { + var topic = node.getAttribute("data-topic"); + var state = node.getAttribute("data-state"); + var name = node.getAttribute("data-label"); + var align = node.getAttribute("data-text-on"); + + state = state === "true"; + + var checkbox = document.createElement("input"); + var label = document.createElement("label"); + + var id = "checkbox-" + topic; + checkbox.id = id; + checkbox.setAttribute("type", "checkbox"); + checkbox.checked = state; + + label.setAttribute("for", id); + if (name) { + label.className = "text"; + if (align) label.className += " " + align; + label.textContent = name; + } + + node.appendChild(checkbox); + node.appendChild(label); + + this.node = node; + this.topic = topic; + this.checkbox = checkbox; + + checkbox.addEventListener( + "change", + function (e) { + notify.call(this); + }.bind(this), + ); + + buttons[topic] = this; + }; + + var getNode = function getNode(topic) { + return buttons[topic].node; + }; + + var setValue = function setValue(topic, value) { + try { + buttons[topic].checkbox.checked = value; + notify.call(buttons[topic]); + } catch (error) { + console.log(error, topic, value); + } + }; + + var subscribe = function subscribe(topic, callback) { + if (subscribers[topic] === undefined) subscribers[topic] = []; + + subscribers[topic].push(callback); + }; + + var unsubscribe = function unsubscribe(topic, callback) { + subscribers[topic].indexOf(callback); + subscribers[topic].splice(index, 1); + }; + + var notify = function notify() { + if (subscribers[this.topic] === undefined) return; + for (var i = 0; i < subscribers[this.topic].length; i++) + subscribers[this.topic][i](this.checkbox.checked); + }; + + var init = function init() { + var elem = document.querySelectorAll(".ui-checkbox"); + var size = elem.length; + for (var i = 0; i < size; i++) new CheckBox(elem[i]); + }; + + return { + init: init, + setValue: setValue, + subscribe: subscribe, + unsubscribe: unsubscribe, + }; })(); -window.addEventListener("load", function(){ - BoxShadow.init(); +window.addEventListener("load", function () { + BoxShadow.init(); }); var BoxShadow = (function BoxShadow() { - - function getElemById(id) { - return document.getElementById(id); - } - - /** - * RGBA Color class - */ - - function Color() { - this.r = 0; - this.g = 0; - this.b = 0; - this.a = 1; - this.hue = 0; - this.saturation = 0; - this.value = 0; - } - - Color.prototype.copy = function copy(obj) { - if(obj instanceof Color !== true) { - console.log("Typeof instance not Color"); - return; - } - - this.r = obj.r; - this.g = obj.g; - this.b = obj.b; - this.a = obj.a; - this.hue = obj.hue; - this.saturation = obj.saturation; - this.value = obj.value; - } - - Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) { - if (red != undefined) - this.r = red | 0; - if (green != undefined) - this.g = green | 0; - if (blue != undefined) - this.b = blue | 0; - if (alpha != undefined) - this.a = alpha | 0; - } - - /** - * HSV/HSB (hue, saturation, value / brightness) - * @param hue 0-360 - * @param saturation 0-100 - * @param value 0-100 - */ - Color.prototype.setHSV = function setHSV(hue, saturation, value) { - this.hue = hue; - this.saturation = saturation; - this.value = value; - this.updateRGB(); - } - - Color.prototype.updateRGB = function updateRGB() { - var sat = this.saturation / 100; - var value = this.value / 100; - var C = sat * value; - var H = this.hue / 60; - var X = C * (1 - Math.abs(H % 2 - 1)); - var m = value - C; - var precision = 255; - - C = (C + m) * precision; - X = (X + m) * precision; - m = m * precision; - - if (H >= 0 && H < 1) { this.setRGBA(C, X, m); return; } - if (H >= 1 && H < 2) { this.setRGBA(X, C, m); return; } - if (H >= 2 && H < 3) { this.setRGBA(m, C, X); return; } - if (H >= 3 && H < 4) { this.setRGBA(m, X, C); return; } - if (H >= 4 && H < 5) { this.setRGBA(X, m, C); return; } - if (H >= 5 && H < 6) { this.setRGBA(C, m, X); return; } - } - - Color.prototype.updateHSV = function updateHSV() { - var red = this.r / 255; - var green = this.g / 255; - var blue = this.b / 255; - - var cmax = Math.max(red, green, blue); - var cmin = Math.min(red, green, blue); - var delta = cmax - cmin; - var hue = 0; - var saturation = 0; - - if (delta) { - if (cmax === red ) { hue = ((green - blue) / delta); } - if (cmax === green ) { hue = 2 + (blue - red) / delta; } - if (cmax === blue ) { hue = 4 + (red - green) / delta; } - if (cmax) saturation = delta / cmax; - } - - this.hue = 60 * hue | 0; - if (this.hue < 0) this.hue += 360; - this.saturation = (saturation * 100) | 0; - this.value = (cmax * 100) | 0; - } - - Color.prototype.setHexa = function setHexa(value) { - var valid = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value) - if (valid !== true) - return; - - if (value[0] === '#') - value = value.slice(1, value.length); - - if (value.length === 3) - value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,"$1$1$2$2$3$3"); - - this.r = parseInt(value.substr(0, 2), 16); - this.g = parseInt(value.substr(2, 2), 16); - this.b = parseInt(value.substr(4, 2), 16); - - this.alpha = 1; - } - - Color.prototype.getHexa = function getHexa() { - var r = this.r.toString(16); - var g = this.g.toString(16); - var b = this.b.toString(16); - if (this.r < 16) r = '0' + r; - if (this.g < 16) g = '0' + g; - if (this.b < 16) b = '0' + b; - var value = '#' + r + g + b; - return value.toUpperCase(); - } - - Color.prototype.getRGBA = function getRGBA() { - - var rgb = "(" + this.r + ", " + this.g + ", " + this.b; - var a = ''; - var v = ''; - if (this.a !== 1) { - a = 'a'; - v = ', ' + this.a; - } - - var value = "rgb" + a + rgb + v + ")"; - return value; - } - - Color.prototype.getColor = function getColor() { - if (this.a | 0 === 1) - return this.getHexa(); - return this.getRGBA(); - } - - /** - * Shadow Object - */ - function Shadow() { - this.inset = false; - this.posX = 5; - this.posY = -5; - this.blur = 5; - this.spread = 0; - this.color = new Color(); - - var hue = (Math.random() * 360) | 0; - var saturation = (Math.random() * 75) | 0; - var value = (Math.random() * 50 + 50) | 0; - this.color.setHSV(hue, saturation, value, 1); - } - - Shadow.prototype.computeCSS = function computeCSS() { - var value = ""; - if (this.inset === true) - value += "inset "; - value += this.posX + "px "; - value += this.posY + "px "; - value += this.blur + "px "; - value += this.spread + "px "; - value += this.color.getColor(); - - return value; - } - - Shadow.prototype.toggleInset = function toggleInset(value) { - if (value !== undefined || typeof value === "boolean") - this.inset = value; - else - this.inset = this.inset === true ? false : true; - } - - Shadow.prototype.copy = function copy(obj) { - if(obj instanceof Shadow !== true) { - console.log("Typeof instance not Shadow"); - return; - } - - this.inset = obj.inset; - this.posX = obj.posX; - this.posY = obj.posY; - this.blur = obj.blur; - this.spread = obj.spread; - this.color.copy(obj.color); - } - - /** - * Color Picker - */ - var ColoPicker = (function ColoPicker() { - - var colorpicker; - var hue_area; - var gradient_area; - var alpha_area; - var gradient_picker; - var hue_selector; - var alpha_selector; - var pick_object; - var info_rgb; - var info_hsv; - var info_hexa; - var output_color; - var color = new Color(); - var subscribers = []; - - var updateColor = function updateColor(e) { - var x = e.pageX - gradient_area.offsetLeft; - var y = e.pageY - gradient_area.offsetTop; - - // width and height should be the same - var size = gradient_area.clientWidth; - - if (x > size) - x = size; - if (y > size) - y = size; - - if (x < 0) x = 0; - if (y < 0) y = 0; - - var value = 100 - (y * 100 / size) | 0; - var saturation = x * 100 / size | 0; - - color.setHSV(color.hue, saturation, value); - // should update just - // color pointer location - updateUI(); - notify("color", color); - } - - var updateHue = function updateHue(e) { - var x = e.pageX - hue_area.offsetLeft; - var width = hue_area.clientWidth; - - if (x < 0) x = 0; - if (x > width) x = width; - - var hue = ((360 * x) / width) | 0; - if (hue === 360) hue = 359; - - color.setHSV(hue, color.saturation, color.value); - - // should update just - // hue pointer location - // picker area background - // alpha area background - updateUI(); - notify("color", color); - } - - var updateAlpha = function updateAlpha(e) { - var x = e.pageX - alpha_area.offsetLeft; - var width = alpha_area.clientWidth; - - if (x < 0) x = 0; - if (x > width) x = width; - - color.a = (x / width).toFixed(2); - - // should update just - // alpha pointer location - updateUI(); - notify("color", color); - } - - var setHueGfx = function setHueGfx(hue) { - var sat = color.saturation; - var val = color.value; - var alpha = color.a; - - color.setHSV(hue, 100, 100); - gradient_area.style.backgroundColor = color.getHexa(); - - color.a = 0; - var start = color.getRGBA(); - color.a = 1; - var end = color.getRGBA(); - color.a = alpha; - - var gradient = '-moz-linear-gradient(left, ' + start + '0%, ' + end + ' 100%)'; - alpha_area.style.background = gradient; - } - - var updateUI = function updateUI() { - var x, y; // coordinates - var size; // size of the area - var offset; // pointer graphic selector offset - - // Set color pointer location - size = gradient_area.clientWidth; - offset = gradient_picker.clientWidth / 2 + 2; - - x = (color.saturation * size / 100) | 0; - y = size - (color.value * size / 100) | 0; - - gradient_picker.style.left = x - offset + "px"; - gradient_picker.style.top = y - offset + "px"; - - // Set hue pointer location - size = hue_area.clientWidth; - offset = hue_selector.clientWidth/2; - x = (color.hue * size / 360 ) | 0; - hue_selector.style.left = x - offset + "px"; - - // Set alpha pointer location - size = alpha_area.clientWidth; - offset = alpha_selector.clientWidth/2; - x = (color.a * size) | 0; - alpha_selector.style.left = x - offset + "px"; - - // Set picker area background - var nc = new Color(); - nc.copy(color); - if (nc.hue === 360) nc.hue = 0; - nc.setHSV(nc.hue, 100, 100); - gradient_area.style.backgroundColor = nc.getHexa(); - - // Set alpha area background - nc.copy(color); - nc.a = 0; - var start = nc.getRGBA(); - nc.a = 1; - var end = nc.getRGBA(); - var gradient = '-moz-linear-gradient(left, ' + start + '0%, ' + end + ' 100%)'; - alpha_area.style.background = gradient; - - // Update color info - notify("color", color); - notify("hue", color.hue); - notify("saturation", color.saturation); - notify("value", color.value); - notify("r", color.r); - notify("g", color.g); - notify("b", color.b); - notify("a", color.a); - notify("hexa", color.getHexa()); - output_color.style.backgroundColor = color.getRGBA(); - } - - var setInputComponent = function setInputComponent(node) { - var topic = node.getAttribute('data-topic'); - var title = node.getAttribute('data-title'); - var action = node.getAttribute('data-action'); - title = title === null ? '' : title; - - var input = document.createElement('input'); - var info = document.createElement('span'); - info.textContent = title; - - input.setAttribute('type', 'text'); - input.setAttribute('data-action', 'set-' + action + '-' + topic); - node.appendChild(info); - node.appendChild(input); - - input.addEventListener('click', function(e) { - this.select(); - }); - - input.addEventListener('change', function(e) { - if (action === 'HSV') - inputChangeHSV(topic); - if (action === 'RGB') - inputChangeRGB(topic); - if (action === 'alpha') - inputChangeAlpha(topic); - if (action === 'hexa') - inputChangeHexa(topic); - }); - - subscribe(topic, function(value) { - node.children[1].value = value; - }); - } - - var inputChangeHSV = function actionHSV(topic) { - var selector = "[data-action='set-HSV-" + topic + "']"; - var node = document.querySelector("#colorpicker " + selector); - var value = parseInt(node.value); - - if (typeof value === 'number' && isNaN(value) === false && - value >= 0 && value < 360) - color[topic] = value; - - color.updateRGB(); - updateUI(); - } - - var inputChangeRGB = function inputChangeRGB(topic) { - var selector = "[data-action='set-RGB-" + topic + "']"; - var node = document.querySelector("#colorpicker " + selector); - var value = parseInt(node.value); - - if (typeof value === 'number' && isNaN(value) === false && - value >= 0 && value <= 255) - color[topic] = value; - - color.updateHSV(); - updateUI(); - } - - var inputChangeAlpha = function inputChangeAlpha(topic) { - var selector = "[data-action='set-alpha-" + topic + "']"; - var node = document.querySelector("#colorpicker " + selector); - var value = parseFloat(node.value); - - if (typeof value === 'number' && isNaN(value) === false && - value >= 0 && value <= 1) - color.a = value.toFixed(2); - - updateUI(); - } - - var inputChangeHexa = function inputChangeHexa(topic) { - var selector = "[data-action='set-hexa-" + topic + "']"; - var node = document.querySelector("#colorpicker " + selector); - var value = node.value; - color.setHexa(value); - color.updateHSV(); - updateUI(); - } - - var setMouseTracking = function setMouseTracking(elem, callback) { - - elem.addEventListener("mousedown", function(e) { - callback(e); - document.addEventListener("mousemove", callback); - }); - - document.addEventListener("mouseup", function(e) { - document.removeEventListener("mousemove", callback); - }); - } - - /* - * Observer - */ - var setColor = function setColor(obj) { - if(obj instanceof Color !== true) { - console.log("Typeof instance not Color"); - return; - } - color.copy(obj); - updateUI(); - } - - var subscribe = function subscribe(topic, callback) { - if (subscribers[topic] === undefined) - subscribers[topic] = []; - - subscribers[topic].push(callback); - } - - var unsubscribe = function unsubscribe(callback) { - subscribers.indexOf(callback); - subscribers.splice(index, 1); - } - - var notify = function notify(topic, value) { - for (var i in subscribers[topic]) - subscribers[topic][i](value); - } - - var init = function init() { - colorpicker = getElemById("colorpicker"); - hue_area = getElemById("hue"); - gradient_area = getElemById("gradient"); - alpha_area = getElemById("alpha"); - gradient_picker = getElemById("gradient_picker"); - hue_selector = getElemById("hue_selector"); - alpha_selector = getElemById("alpha_selector"); - output_color = getElemById("output_color"); - - var elem = document.querySelectorAll('#colorpicker .input'); - var size = elem.length; - for (var i = 0; i < size; i++) - setInputComponent(elem[i]); - - setMouseTracking(gradient_area, updateColor); - setMouseTracking(hue_area, updateHue); - setMouseTracking(alpha_area, updateAlpha); - - } - - return { - init : init, - setColor : setColor, - subscribe : subscribe, - unsubscribe : unsubscribe - } - - })(); - - /** - * Shadow dragging - */ - var PreviewMouseTracking = (function Drag() { - var active = false; - var lastX = 0; - var lastY = 0; - var subscribers = []; - - var init = function init(id) { - var elem = getElemById(id); - elem.addEventListener('mousedown', dragStart, false); - document.addEventListener('mouseup', dragEnd, false); - } - - var dragStart = function dragStart(e) { - if (e.button !== 0) - return; - - active = true; - lastX = e.clientX; - lastY = e.clientY; - document.addEventListener('mousemove', mouseDrag, false); - } - - var dragEnd = function dragEnd(e) { - if (e.button !== 0) - return; - - if (active === true) { - active = false; - document.removeEventListener('mousemove', mouseDrag, false); - } - } - - var mouseDrag = function mouseDrag(e) { - notify(e.clientX - lastX, e.clientY - lastY); - lastX = e.clientX; - lastY = e.clientY; - } - - var subscribe = function subscribe(callback) { - subscribers.push(callback); - } - - var unsubscribe = function unsubscribe(callback) { - var index = subscribers.indexOf(callback); - subscribers.splice(index, 1); - } - - var notify = function notify(deltaX, deltaY) { - for (var i in subscribers) - subscribers[i](deltaX, deltaY); - } - - return { - init : init, - subscribe : subscribe, - unsubscribe : unsubscribe - } - - })(); - - /* - * Element Class - */ - var CssClass = function CssClass(id) { - this.left = 0; - this.top = 0; - this.rotate = 0; - this.width = 300; - this.height = 100; - this.display = true; - this.border = true; - this.zIndex = -1; - this.bgcolor = new Color(); - this.id = id; - this.node = getElemById('obj-' + id); - this.object = getElemById(id); - this.shadowID = null; - this.shadows = [] - this.render = []; - this.init(); - } - - CssClass.prototype.init = function init() { - this.left = ((this.node.parentNode.clientWidth - this.node.clientWidth) / 2) | 0; - this.top = ((this.node.parentNode.clientHeight - this.node.clientHeight) / 2) | 0; - - this.setTop(this.top); - this.setLeft(this.left); - this.setHeight(this.height); - this.setWidth(this.width); - this.bgcolor.setHSV(0, 0, 100); - this.updateBgColor(this.bgcolor); - } - - CssClass.prototype.updatePos = function updatePos(deltaX, deltaY) { - this.left += deltaX; - this.top += deltaY; - this.node.style.top = this.top + "px"; - this.node.style.left = this.left + "px"; - SliderManager.setValue("left", this.left); - SliderManager.setValue("top", this.top); - } - - CssClass.prototype.setLeft = function setLeft(value) { - this.left = value; - this.node.style.left = this.left + "px"; - OutputManager.updateProperty(this.id, 'left', this.left + 'px'); - } - - CssClass.prototype.setTop = function setTop(value) { - this.top = value; - this.node.style.top = this.top + 'px'; - OutputManager.updateProperty(this.id, 'top', this.top + 'px'); - } - - CssClass.prototype.setWidth = function setWidth(value) { - this.width = value; - this.node.style.width = this.width + 'px'; - OutputManager.updateProperty(this.id, 'width', this.width + 'px'); - } - - CssClass.prototype.setHeight = function setHeight(value) { - this.height = value; - this.node.style.height = this.height + 'px'; - OutputManager.updateProperty(this.id, 'height', this.height + 'px'); - } - - // Browser support - CssClass.prototype.setRotate = function setRotate(value) { - var cssvalue = 'rotate(' + value +'deg)'; - - this.node.style.transform = cssvalue; - this.node.style.webkitTransform = cssvalue; - this.node.style.msTransform = cssvalue; - - if (value !== 0) { - if (this.rotate === 0) { - OutputManager.toggleProperty(this.id, 'transform', true); - OutputManager.toggleProperty(this.id, '-webkit-transform', true); - OutputManager.toggleProperty(this.id, '-ms-transform', true); - } - } - else { - OutputManager.toggleProperty(this.id, 'transform', false); - OutputManager.toggleProperty(this.id, '-webkit-transform', false); - OutputManager.toggleProperty(this.id, '-ms-transform', false); - } - - OutputManager.updateProperty(this.id, 'transform', cssvalue); - OutputManager.updateProperty(this.id, '-webkit-transform', cssvalue); - OutputManager.updateProperty(this.id, '-ms-transform', cssvalue); - this.rotate = value; - } - - CssClass.prototype.setzIndex = function setzIndex(value) { - this.node.style.zIndex = value; - OutputManager.updateProperty(this.id, 'z-index', value); - this.zIndex = value; - } - - CssClass.prototype.toggleDisplay = function toggleDisplay(value) { - if (typeof value !== "boolean" || this.display === value) - return; - - this.display = value; - var display = this.display === true ? "block" : "none"; - this.node.style.display = display; - this.object.style.display = display; - } - - CssClass.prototype.toggleBorder = function toggleBorder(value) { - if (typeof value !== "boolean" || this.border === value) - return; - - this.border = value; - var border = this.border === true ? "1px solid #CCC" : "none"; - this.node.style.border = border; - } - - CssClass.prototype.updateBgColor = function updateBgColor(color) { - this.bgcolor.copy(color); - this.node.style.backgroundColor = color.getColor(); - OutputManager.updateProperty(this.id, 'background-color', color.getColor()); - } - - CssClass.prototype.updateShadows = function updateShadows() { - if (this.render.length === 0) - OutputManager.toggleProperty(this.id, 'box-shadow', false); - if (this.render.length === 1) - OutputManager.toggleProperty(this.id, 'box-shadow', true); - - this.node.style.boxShadow = this.render.join(", "); - OutputManager.updateProperty(this.id, 'box-shadow', this.render.join(", \n")); - - } - - /** - * Tool Manager - */ - var Tool = (function Tool() { - - var preview; - var classes = []; - var active = null; - var animate = false; - - /* - * Toll actions - */ - var addCssClass = function addCssClass(id) { - classes[id] = new CssClass(id); - } - - var setActiveClass = function setActiveClass(id) { - active = classes[id]; - active.shadowID = null; - ColoPicker.setColor(classes[id].bgcolor); - SliderManager.setValue("top", active.top); - SliderManager.setValue("left", active.left); - SliderManager.setValue("rotate", active.rotate); - SliderManager.setValue("z-index", active.zIndex); - SliderManager.setValue("width", active.width); - SliderManager.setValue("height", active.height); - ButtonManager.setValue("border-state", active.border); - active.updateShadows(); - } - - var disableClass = function disableClass(topic) { - classes[topic].toggleDisplay(false); - ButtonManager.setValue(topic, false); - } - - var addShadow = function addShadow(position) { - if (animate === true) - return -1; - - active.shadows.splice(position, 0, new Shadow()); - active.render.splice(position, 0, null); - } - - var swapShadow = function swapShadow(id1, id2) { - var x = active.shadows[id1]; - active.shadows[id1] = active.shadows[id2]; - active.shadows[id2] = x; - updateShadowCSS(id1); - updateShadowCSS(id2); - } - - var deleteShadow = function deleteShadow(position) { - active.shadows.splice(position, 1); - active.render.splice(position, 1); - active.updateShadows(); - } - - var setActiveShadow = function setActiveShadow(id, glow) { - active.shadowID = id; - ColoPicker.setColor(active.shadows[id].color); - ButtonManager.setValue("inset", active.shadows[id].inset); - SliderManager.setValue("blur", active.shadows[id].blur); - SliderManager.setValue("spread", active.shadows[id].spread); - SliderManager.setValue("posX", active.shadows[id].posX); - SliderManager.setValue("posY", active.shadows[id].posY); - if (glow === true) - addGlowEffect(id); - } - - var addGlowEffect = function addGlowEffect(id) { - if (animate === true) - return; - - animate = true; - var store = new Shadow(); - var shadow = active.shadows[id]; - - store.copy(shadow); - shadow.color.setRGBA(40, 125, 200, 1); - shadow.blur = 10; - shadow.spread = 10; - - active.node.style.transition = "box-shadow 0.2s"; - updateShadowCSS(id); - - setTimeout(function() { - shadow.copy(store); - updateShadowCSS(id); - setTimeout(function() { - active.node.style.removeProperty("transition"); - animate = false; - }, 100); - }, 200); - } - - var updateActivePos = function updateActivePos(deltaX, deltaY) { - if (active.shadowID === null) - active.updatePos(deltaX, deltaY); - else - updateShadowPos(deltaX, deltaY); - } - - /* - * Shadow properties - */ - var updateShadowCSS = function updateShadowCSS(id) { - active.render[id] = active.shadows[id].computeCSS(); - active.updateShadows(); - } - - var toggleShadowInset = function toggleShadowInset(value) { - if (active.shadowID === null) - return; - active.shadows[active.shadowID].toggleInset(value); - updateShadowCSS(active.shadowID); - } - - var updateShadowPos = function updateShadowPos(deltaX, deltaY) { - var shadow = active.shadows[active.shadowID]; - shadow.posX += deltaX; - shadow.posY += deltaY; - SliderManager.setValue("posX", shadow.posX); - SliderManager.setValue("posY", shadow.posY); - updateShadowCSS(active.shadowID); - } - - var setShadowPosX = function setShadowPosX(value) { - if (active.shadowID === null) - return; - active.shadows[active.shadowID].posX = value; - updateShadowCSS(active.shadowID); - } - - var setShadowPosY = function setShadowPosY(value) { - if (active.shadowID === null) - return; - active.shadows[active.shadowID].posY = value; - updateShadowCSS(active.shadowID); - } - - var setShadowBlur = function setShadowBlur(value) { - if (active.shadowID === null) - return; - active.shadows[active.shadowID].blur = value; - updateShadowCSS(active.shadowID); - } - - var setShadowSpread = function setShadowSpread(value) { - if (active.shadowID === null) - return; - active.shadows[active.shadowID].spread = value; - updateShadowCSS(active.shadowID); - } - - var updateShadowColor = function updateShadowColor(color) { - active.shadows[active.shadowID].color.copy(color); - updateShadowCSS(active.shadowID); - } - - /* - * Element Properties - */ - var updateColor = function updateColor(color) { - if (active.shadowID === null) - active.updateBgColor(color); - else - updateShadowColor(color); - } - - var init = function init() { - preview = getElemById("preview"); - - ColoPicker.subscribe("color", updateColor); - PreviewMouseTracking.subscribe(updateActivePos); - - // Affects shadows - ButtonManager.subscribe("inset", toggleShadowInset); - SliderManager.subscribe("posX", setShadowPosX); - SliderManager.subscribe("posY", setShadowPosY); - SliderManager.subscribe("blur", setShadowBlur); - SliderManager.subscribe("spread", setShadowSpread); - - // Affects element - SliderManager.subscribe("top", function(value){ - active.setTop(value); - }); - SliderManager.subscribe("left", function(value){ - active.setLeft(value); - }); - SliderManager.subscribe("rotate", function(value) { - if (active == classes["element"]) - return; - active.setRotate(value); - }); - - SliderManager.subscribe("z-index", function(value) { - if (active == classes["element"]) - return; - active.setzIndex(value); - }); - - SliderManager.subscribe("width", function(value) { - active.setWidth(value) - }); - - SliderManager.subscribe("height", function(value) { - active.setHeight(value) - }); - - // Actions - classes['before'].top = -30; - classes['before'].left = -30; - classes['after'].top = 30; - classes['after'].left = 30; - classes['before'].toggleDisplay(false); - classes['after'].toggleDisplay(false); - ButtonManager.setValue('before', false); - ButtonManager.setValue('after', false); - - ButtonManager.subscribe("before", classes['before'].toggleDisplay.bind(classes['before'])); - ButtonManager.subscribe("after", classes['after'].toggleDisplay.bind(classes['after'])); - - ButtonManager.subscribe("border-state", function(value) { - active.toggleBorder(value); - }); - - } - - return { - init : init, - addShadow : addShadow, - swapShadow : swapShadow, - addCssClass : addCssClass, - disableClass : disableClass, - deleteShadow : deleteShadow, - setActiveClass : setActiveClass, - setActiveShadow : setActiveShadow - } - - })(); - - /** - * Layer Manager - */ - var LayerManager = (function LayerManager() { - var stacks = []; - var active = { - node : null, - stack : null - } - var elements = {}; - - var mouseEvents = function mouseEvents(e) { - var node = e.target; - var type = node.getAttribute('data-type'); - - if (type === 'subject') - setActiveStack(stacks[node.id]); - - if (type === 'disable') { - Tool.disableClass(node.parentNode.id); - setActiveStack(stacks['element']); - } - - if (type === 'add') - active.stack.addLayer(); - - if (type === 'layer') - active.stack.setActiveLayer(node); - - if (type === 'delete') - active.stack.deleteLayer(node.parentNode); - - if (type === 'move-up') - active.stack.moveLayer(1); - - if (type === 'move-down') - active.stack.moveLayer(-1); - } - - var setActiveStack = function setActiveStack(stackObj) { - active.stack.hide(); - active.stack = stackObj; - active.stack.show(); - } - - /* - * Stack object - */ - var Stack = function Stack(subject) { - var S = document.createElement('div'); - var title = document.createElement('div'); - var stack = document.createElement('div'); - - S.className = 'container'; - stack.className = 'stack'; - title.className = 'title'; - title.textContent = subject.getAttribute('data-title'); - S.appendChild(title); - S.appendChild(stack); - - this.id = subject.id; - this.container = S; - this.stack = stack; - this.subject = subject; - this.order = []; - this.uid = 0; - this.count = 0; - this.layer = null; - this.layerID = 0; - } - - Stack.prototype.addLayer = function addLayer() { - if (Tool.addShadow(this.layerID) == -1) - return; - - var uid = this.getUID(); - var layer = this.createLayer(uid); - - if (this.layer === null && this.stack.children.length >= 1) - this.layer = this.stack.children[0]; - - this.stack.insertBefore(layer, this.layer); - this.order.splice(this.layerID, 0, uid); - this.count++; - this.setActiveLayer(layer); - } - - Stack.prototype.createLayer = function createLayer(uid) { - var layer = document.createElement('div'); - var del = document.createElement('span'); - - layer.className = 'node'; - layer.setAttribute('data-shid', uid); - layer.setAttribute('data-type', 'layer'); - layer.textContent = 'shadow ' + uid; - - del.className = 'delete'; - del.setAttribute('data-type', 'delete'); - - layer.appendChild(del); - return layer; - } - - Stack.prototype.getUID = function getUID() { - return this.uid++; - } - - // SOLVE IE BUG - Stack.prototype.moveLayer = function moveLayer(direction) { - if (this.count <= 1 || this.layer === null) - return; - if (direction === -1 && this.layerID === (this.count - 1) ) - return; - if (direction === 1 && this.layerID === 0 ) - return; - - if (direction === -1) { - var before = null; - Tool.swapShadow(this.layerID, this.layerID + 1); - this.swapOrder(this.layerID, this.layerID + 1); - this.layerID += 1; - - if (this.layerID + 1 !== this.count) - before = this.stack.children[this.layerID + 1]; - - this.stack.insertBefore(this.layer, before); - Tool.setActiveShadow(this.layerID, false); - } - - if (direction === 1) { - Tool.swapShadow(this.layerID, this.layerID - 1); - this.swapOrder(this.layerID, this.layerID - 1); - this.layerID -= 1; - this.stack.insertBefore(this.layer, this.stack.children[this.layerID]); - Tool.setActiveShadow(this.layerID, false); - } - } - - Stack.prototype.swapOrder = function swapOrder(pos1, pos2) { - var x = this.order[pos1]; - this.order[pos1] = this.order[pos2]; - this.order[pos2] = x; - } - - Stack.prototype.deleteLayer = function deleteLayer(node) { - var shadowID = node.getAttribute('data-shid') | 0; - var index = this.order.indexOf(shadowID); - this.stack.removeChild(this.stack.children[index]); - this.order.splice(index, 1); - this.count--; - - Tool.deleteShadow(index); - - if (index > this.layerID) - return; - - if (index == this.layerID) { - if (this.count >= 1) { - this.layerID = 0; - this.setActiveLayer(this.stack.children[0], true); - } - else { - this.layer = null; - this.show(); - } - } - - if (index < this.layerID) { - this.layerID--; - Tool.setActiveShadow(this.layerID, true); - } - - } - - Stack.prototype.setActiveLayer = function setActiveLayer(node) { - elements.shadow_properties.style.display = 'block'; - elements.element_properties.style.display = 'none'; - - if (this.layer) - this.layer.removeAttribute('data-active'); - - this.layer = node; - this.layer.setAttribute('data-active', 'layer'); - - var shadowID = node.getAttribute('data-shid') | 0; - this.layerID = this.order.indexOf(shadowID); - Tool.setActiveShadow(this.layerID, true); - } - - Stack.prototype.unsetActiveLayer = function unsetActiveLayer() { - if (this.layer) - this.layer.removeAttribute('data-active'); - - this.layer = null; - this.layerID = 0; - } - - Stack.prototype.hide = function hide() { - this.unsetActiveLayer(); - this.subject.removeAttribute('data-active'); - var style = this.container.style; - style.left = '100%'; - style.zIndex = '0'; - } - - Stack.prototype.show = function show() { - elements.shadow_properties.style.display = 'none'; - elements.element_properties.style.display = 'block'; - - if (this.id === 'element') { - elements.zIndex.style.display = 'none'; - elements.transform_rotate.style.display = 'none'; - } - else { - elements.zIndex.style.display = 'block'; - elements.transform_rotate.style.display = 'block'; - } - - this.subject.setAttribute('data-active', 'subject'); - var style = this.container.style; - style.left = '0'; - style.zIndex = '10'; - Tool.setActiveClass(this.id); - } - - function init() { - - var elem, size; - var layerManager = getElemById("layer_manager"); - var layerMenu = getElemById("layer_menu"); - var container = getElemById("stack_container"); - - elements.shadow_properties = getElemById('shadow_properties'); - elements.element_properties = getElemById('element_properties'); - elements.transform_rotate = getElemById('transform_rotate'); - elements.zIndex = getElemById('z-index'); - - elem = document.querySelectorAll('#layer_menu [data-type="subject"]'); - size = elem.length; - - for (var i = 0; i < size; i++) { - var S = new Stack(elem[i]); - stacks[elem[i].id] = S; - container.appendChild(S.container); - Tool.addCssClass(elem[i].id); - } - - active.stack = stacks['element']; - stacks['element'].show(); - - layerManager.addEventListener("click", mouseEvents); - layerMenu.addEventListener("click", mouseEvents); - - ButtonManager.subscribe("before", function(value) { - if (value === false && active.stack === stacks['before']) - setActiveStack(stacks['element']) - if (value === true && active.stack !== stacks['before']) - setActiveStack(stacks['before']) - }); - - ButtonManager.subscribe("after", function(value) { - if (value === false && active.stack === stacks['after']) - setActiveStack(stacks['element']) - if (value === true && active.stack !== stacks['after']) - setActiveStack(stacks['after']) - }); - } - - return { - init : init - } - })(); - - /* - * OutputManager - */ - var OutputManager = (function OutputManager() { - var classes = []; - var buttons = []; - var active = null; - var menu = null; - var button_offset = 0; - - var crateOutputNode = function(topic, property) { - - var prop = document.createElement('div'); - var name = document.createElement('span'); - var value = document.createElement('span'); - - var pmatch = property.match(/(^([a-z0-9\-]*)=\[([a-z0-9\-\"]*)\])|^([a-z0-9\-]*)/i); - - name.textContent = '\t' + pmatch[4]; - - if (pmatch[3] !== undefined) { - name.textContent = '\t' + pmatch[2]; - value.textContent = pmatch[3] + ';'; - } - - name.textContent += ': '; - prop.className = 'css-property'; - name.className = 'name'; - value.className = 'value'; - prop.appendChild(name); - prop.appendChild(value); - - classes[topic].node.appendChild(prop); - classes[topic].line[property] = prop; - classes[topic].prop[property] = value; - } - - var OutputClass = function OutputClass(node) { - var topic = node.getAttribute('data-topic'); - var prop = node.getAttribute('data-prop'); - var name = node.getAttribute('data-name'); - var properties = prop.split(' '); - - classes[topic] = {}; - classes[topic].node = node; - classes[topic].prop = []; - classes[topic].line = []; - classes[topic].button = new Button(topic); - - var open_decl = document.createElement('div'); - var end_decl = document.createElement('div'); - - open_decl.textContent = name + ' {'; - end_decl.textContent = '}'; - node.appendChild(open_decl); - - for (var i in properties) - crateOutputNode(topic, properties[i]); - - node.appendChild(end_decl); - } - - var Button = function Button(topic) { - var button = document.createElement('div'); - - button.className = 'button'; - button.textContent = topic; - button.style.left = button_offset + 'px'; - button_offset += 100; - - button.addEventListener("click", function() { - toggleDisplay(topic); - }) - - menu.appendChild(button); - return button; - } - - var toggleDisplay = function toggleDisplay(topic) { - active.button.removeAttribute('data-active'); - active.node.style.display = 'none'; - active = classes[topic]; - active.node.style.display = 'block'; - active.button.setAttribute('data-active', 'true'); - } - - var toggleButton = function toggleButton(topic, value) { - var display = (value === true) ? 'block' : 'none'; - classes[topic].button.style.display = display; - - if (value === true) - toggleDisplay(topic); - else - toggleDisplay('element'); - } - - var updateProperty = function updateProperty(topic, property, data) { - try { - classes[topic].prop[property].textContent = data + ';'; - } - catch(error) { - // console.log("ERROR undefined : ", topic, property, data); - } - } - - var toggleProperty = function toggleProperty(topic, property, value) { - var display = (value === true) ? 'block' : 'none'; - try { - classes[topic].line[property].style.display = display; - } - catch(error) { - // console.log("ERROR undefined : ",classes, topic, property, value); - } - } - - var init = function init() { - - menu = getElemById('menu'); - - var elem = document.querySelectorAll('#output .output'); - var size = elem.length; - for (var i = 0; i < size; i++) - OutputClass(elem[i]); - - active = classes['element']; - toggleDisplay('element'); - - ButtonManager.subscribe("before", function(value) { - toggleButton('before', value); - }); - - ButtonManager.subscribe("after", function(value) { - toggleButton('after', value); - }); - } - - return { - init : init, - updateProperty : updateProperty, - toggleProperty : toggleProperty - } - - })(); - - /** - * Init Tool - */ - var init = function init() { - ButtonManager.init(); - OutputManager.init(); - ColoPicker.init(); - SliderManager.init(); - LayerManager.init(); - PreviewMouseTracking.init("preview"); - Tool.init(); - } - - return { - init : init - } - + function getElemById(id) { + return document.getElementById(id); + } + + /** + * RGBA Color class + */ + + function Color() { + this.r = 0; + this.g = 0; + this.b = 0; + this.a = 1; + this.hue = 0; + this.saturation = 0; + this.value = 0; + } + + Color.prototype.copy = function copy(obj) { + if (obj instanceof Color !== true) { + console.log("Typeof instance not Color"); + return; + } + + this.r = obj.r; + this.g = obj.g; + this.b = obj.b; + this.a = obj.a; + this.hue = obj.hue; + this.saturation = obj.saturation; + this.value = obj.value; + }; + + Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) { + if (red != undefined) this.r = red | 0; + if (green != undefined) this.g = green | 0; + if (blue != undefined) this.b = blue | 0; + if (alpha != undefined) this.a = alpha | 0; + }; + + /** + * HSV/HSB (hue, saturation, value / brightness) + * @param hue 0-360 + * @param saturation 0-100 + * @param value 0-100 + */ + Color.prototype.setHSV = function setHSV(hue, saturation, value) { + this.hue = hue; + this.saturation = saturation; + this.value = value; + this.updateRGB(); + }; + + Color.prototype.updateRGB = function updateRGB() { + var sat = this.saturation / 100; + var value = this.value / 100; + var C = sat * value; + var H = this.hue / 60; + var X = C * (1 - Math.abs((H % 2) - 1)); + var m = value - C; + var precision = 255; + + C = (C + m) * precision; + X = (X + m) * precision; + m = m * precision; + + if (H >= 0 && H < 1) { + this.setRGBA(C, X, m); + return; + } + if (H >= 1 && H < 2) { + this.setRGBA(X, C, m); + return; + } + if (H >= 2 && H < 3) { + this.setRGBA(m, C, X); + return; + } + if (H >= 3 && H < 4) { + this.setRGBA(m, X, C); + return; + } + if (H >= 4 && H < 5) { + this.setRGBA(X, m, C); + return; + } + if (H >= 5 && H < 6) { + this.setRGBA(C, m, X); + return; + } + }; + + Color.prototype.updateHSV = function updateHSV() { + var red = this.r / 255; + var green = this.g / 255; + var blue = this.b / 255; + + var cmax = Math.max(red, green, blue); + var cmin = Math.min(red, green, blue); + var delta = cmax - cmin; + var hue = 0; + var saturation = 0; + + if (delta) { + if (cmax === red) { + hue = (green - blue) / delta; + } + if (cmax === green) { + hue = 2 + (blue - red) / delta; + } + if (cmax === blue) { + hue = 4 + (red - green) / delta; + } + if (cmax) saturation = delta / cmax; + } + + this.hue = (60 * hue) | 0; + if (this.hue < 0) this.hue += 360; + this.saturation = (saturation * 100) | 0; + this.value = (cmax * 100) | 0; + }; + + Color.prototype.setHexa = function setHexa(value) { + var valid = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value); + if (valid !== true) return; + + if (value[0] === "#") value = value.slice(1, value.length); + + if (value.length === 3) + value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i, "$1$1$2$2$3$3"); + + this.r = parseInt(value.substr(0, 2), 16); + this.g = parseInt(value.substr(2, 2), 16); + this.b = parseInt(value.substr(4, 2), 16); + + this.alpha = 1; + }; + + Color.prototype.getHexa = function getHexa() { + var r = this.r.toString(16); + var g = this.g.toString(16); + var b = this.b.toString(16); + if (this.r < 16) r = "0" + r; + if (this.g < 16) g = "0" + g; + if (this.b < 16) b = "0" + b; + var value = "#" + r + g + b; + return value.toUpperCase(); + }; + + Color.prototype.getRGBA = function getRGBA() { + var rgb = "(" + this.r + ", " + this.g + ", " + this.b; + var a = ""; + var v = ""; + if (this.a !== 1) { + a = "a"; + v = ", " + this.a; + } + + var value = "rgb" + a + rgb + v + ")"; + return value; + }; + + Color.prototype.getColor = function getColor() { + if (this.a | (0 === 1)) return this.getHexa(); + return this.getRGBA(); + }; + + /** + * Shadow Object + */ + function Shadow() { + this.inset = false; + this.posX = 5; + this.posY = -5; + this.blur = 5; + this.spread = 0; + this.color = new Color(); + + var hue = (Math.random() * 360) | 0; + var saturation = (Math.random() * 75) | 0; + var value = (Math.random() * 50 + 50) | 0; + this.color.setHSV(hue, saturation, value, 1); + } + + Shadow.prototype.computeCSS = function computeCSS() { + var value = ""; + if (this.inset === true) value += "inset "; + value += this.posX + "px "; + value += this.posY + "px "; + value += this.blur + "px "; + value += this.spread + "px "; + value += this.color.getColor(); + + return value; + }; + + Shadow.prototype.toggleInset = function toggleInset(value) { + if (value !== undefined || typeof value === "boolean") this.inset = value; + else this.inset = this.inset === true ? false : true; + }; + + Shadow.prototype.copy = function copy(obj) { + if (obj instanceof Shadow !== true) { + console.log("Typeof instance not Shadow"); + return; + } + + this.inset = obj.inset; + this.posX = obj.posX; + this.posY = obj.posY; + this.blur = obj.blur; + this.spread = obj.spread; + this.color.copy(obj.color); + }; + + /** + * Color Picker + */ + var ColoPicker = (function ColoPicker() { + var colorpicker; + var hue_area; + var gradient_area; + var alpha_area; + var gradient_picker; + var hue_selector; + var alpha_selector; + var pick_object; + var info_rgb; + var info_hsv; + var info_hexa; + var output_color; + var color = new Color(); + var subscribers = []; + + var updateColor = function updateColor(e) { + var x = e.pageX - gradient_area.offsetLeft; + var y = e.pageY - gradient_area.offsetTop; + + // width and height should be the same + var size = gradient_area.clientWidth; + + if (x > size) x = size; + if (y > size) y = size; + + if (x < 0) x = 0; + if (y < 0) y = 0; + + var value = (100 - (y * 100) / size) | 0; + var saturation = ((x * 100) / size) | 0; + + color.setHSV(color.hue, saturation, value); + // should update just + // color pointer location + updateUI(); + notify("color", color); + }; + + var updateHue = function updateHue(e) { + var x = e.pageX - hue_area.offsetLeft; + var width = hue_area.clientWidth; + + if (x < 0) x = 0; + if (x > width) x = width; + + var hue = ((360 * x) / width) | 0; + if (hue === 360) hue = 359; + + color.setHSV(hue, color.saturation, color.value); + + // should update just + // hue pointer location + // picker area background + // alpha area background + updateUI(); + notify("color", color); + }; + + var updateAlpha = function updateAlpha(e) { + var x = e.pageX - alpha_area.offsetLeft; + var width = alpha_area.clientWidth; + + if (x < 0) x = 0; + if (x > width) x = width; + + color.a = (x / width).toFixed(2); + + // should update just + // alpha pointer location + updateUI(); + notify("color", color); + }; + + var setHueGfx = function setHueGfx(hue) { + var sat = color.saturation; + var val = color.value; + var alpha = color.a; + + color.setHSV(hue, 100, 100); + gradient_area.style.backgroundColor = color.getHexa(); + + color.a = 0; + var start = color.getRGBA(); + color.a = 1; + var end = color.getRGBA(); + color.a = alpha; + + var gradient = + "-moz-linear-gradient(left, " + start + "0%, " + end + " 100%)"; + alpha_area.style.background = gradient; + }; + + var updateUI = function updateUI() { + var x, y; // coordinates + var size; // size of the area + var offset; // pointer graphic selector offset + + // Set color pointer location + size = gradient_area.clientWidth; + offset = gradient_picker.clientWidth / 2 + 2; + + x = ((color.saturation * size) / 100) | 0; + y = (size - (color.value * size) / 100) | 0; + + gradient_picker.style.left = x - offset + "px"; + gradient_picker.style.top = y - offset + "px"; + + // Set hue pointer location + size = hue_area.clientWidth; + offset = hue_selector.clientWidth / 2; + x = ((color.hue * size) / 360) | 0; + hue_selector.style.left = x - offset + "px"; + + // Set alpha pointer location + size = alpha_area.clientWidth; + offset = alpha_selector.clientWidth / 2; + x = (color.a * size) | 0; + alpha_selector.style.left = x - offset + "px"; + + // Set picker area background + var nc = new Color(); + nc.copy(color); + if (nc.hue === 360) nc.hue = 0; + nc.setHSV(nc.hue, 100, 100); + gradient_area.style.backgroundColor = nc.getHexa(); + + // Set alpha area background + nc.copy(color); + nc.a = 0; + var start = nc.getRGBA(); + nc.a = 1; + var end = nc.getRGBA(); + var gradient = + "-moz-linear-gradient(left, " + start + "0%, " + end + " 100%)"; + alpha_area.style.background = gradient; + + // Update color info + notify("color", color); + notify("hue", color.hue); + notify("saturation", color.saturation); + notify("value", color.value); + notify("r", color.r); + notify("g", color.g); + notify("b", color.b); + notify("a", color.a); + notify("hexa", color.getHexa()); + output_color.style.backgroundColor = color.getRGBA(); + }; + + var setInputComponent = function setInputComponent(node) { + var topic = node.getAttribute("data-topic"); + var title = node.getAttribute("data-title"); + var action = node.getAttribute("data-action"); + title = title === null ? "" : title; + + var input = document.createElement("input"); + var info = document.createElement("span"); + info.textContent = title; + + input.setAttribute("type", "text"); + input.setAttribute("data-action", "set-" + action + "-" + topic); + node.appendChild(info); + node.appendChild(input); + + input.addEventListener("click", function (e) { + this.select(); + }); + + input.addEventListener("change", function (e) { + if (action === "HSV") inputChangeHSV(topic); + if (action === "RGB") inputChangeRGB(topic); + if (action === "alpha") inputChangeAlpha(topic); + if (action === "hexa") inputChangeHexa(topic); + }); + + subscribe(topic, function (value) { + node.children[1].value = value; + }); + }; + + var inputChangeHSV = function actionHSV(topic) { + var selector = "[data-action='set-HSV-" + topic + "']"; + var node = document.querySelector("#colorpicker " + selector); + var value = parseInt(node.value); + + if ( + typeof value === "number" && + isNaN(value) === false && + value >= 0 && + value < 360 + ) + color[topic] = value; + + color.updateRGB(); + updateUI(); + }; + + var inputChangeRGB = function inputChangeRGB(topic) { + var selector = "[data-action='set-RGB-" + topic + "']"; + var node = document.querySelector("#colorpicker " + selector); + var value = parseInt(node.value); + + if ( + typeof value === "number" && + isNaN(value) === false && + value >= 0 && + value <= 255 + ) + color[topic] = value; + + color.updateHSV(); + updateUI(); + }; + + var inputChangeAlpha = function inputChangeAlpha(topic) { + var selector = "[data-action='set-alpha-" + topic + "']"; + var node = document.querySelector("#colorpicker " + selector); + var value = parseFloat(node.value); + + if ( + typeof value === "number" && + isNaN(value) === false && + value >= 0 && + value <= 1 + ) + color.a = value.toFixed(2); + + updateUI(); + }; + + var inputChangeHexa = function inputChangeHexa(topic) { + var selector = "[data-action='set-hexa-" + topic + "']"; + var node = document.querySelector("#colorpicker " + selector); + var value = node.value; + color.setHexa(value); + color.updateHSV(); + updateUI(); + }; + + var setMouseTracking = function setMouseTracking(elem, callback) { + elem.addEventListener("mousedown", function (e) { + callback(e); + document.addEventListener("mousemove", callback); + }); + + document.addEventListener("mouseup", function (e) { + document.removeEventListener("mousemove", callback); + }); + }; + + /* + * Observer + */ + var setColor = function setColor(obj) { + if (obj instanceof Color !== true) { + console.log("Typeof instance not Color"); + return; + } + color.copy(obj); + updateUI(); + }; + + var subscribe = function subscribe(topic, callback) { + if (subscribers[topic] === undefined) subscribers[topic] = []; + + subscribers[topic].push(callback); + }; + + var unsubscribe = function unsubscribe(callback) { + subscribers.indexOf(callback); + subscribers.splice(index, 1); + }; + + var notify = function notify(topic, value) { + for (var i in subscribers[topic]) subscribers[topic][i](value); + }; + + var init = function init() { + colorpicker = getElemById("colorpicker"); + hue_area = getElemById("hue"); + gradient_area = getElemById("gradient"); + alpha_area = getElemById("alpha"); + gradient_picker = getElemById("gradient_picker"); + hue_selector = getElemById("hue_selector"); + alpha_selector = getElemById("alpha_selector"); + output_color = getElemById("output_color"); + + var elem = document.querySelectorAll("#colorpicker .input"); + var size = elem.length; + for (var i = 0; i < size; i++) setInputComponent(elem[i]); + + setMouseTracking(gradient_area, updateColor); + setMouseTracking(hue_area, updateHue); + setMouseTracking(alpha_area, updateAlpha); + }; + + return { + init: init, + setColor: setColor, + subscribe: subscribe, + unsubscribe: unsubscribe, + }; + })(); + + /** + * Shadow dragging + */ + var PreviewMouseTracking = (function Drag() { + var active = false; + var lastX = 0; + var lastY = 0; + var subscribers = []; + + var init = function init(id) { + var elem = getElemById(id); + elem.addEventListener("mousedown", dragStart, false); + document.addEventListener("mouseup", dragEnd, false); + }; + + var dragStart = function dragStart(e) { + if (e.button !== 0) return; + + active = true; + lastX = e.clientX; + lastY = e.clientY; + document.addEventListener("mousemove", mouseDrag, false); + }; + + var dragEnd = function dragEnd(e) { + if (e.button !== 0) return; + + if (active === true) { + active = false; + document.removeEventListener("mousemove", mouseDrag, false); + } + }; + + var mouseDrag = function mouseDrag(e) { + notify(e.clientX - lastX, e.clientY - lastY); + lastX = e.clientX; + lastY = e.clientY; + }; + + var subscribe = function subscribe(callback) { + subscribers.push(callback); + }; + + var unsubscribe = function unsubscribe(callback) { + var index = subscribers.indexOf(callback); + subscribers.splice(index, 1); + }; + + var notify = function notify(deltaX, deltaY) { + for (var i in subscribers) subscribers[i](deltaX, deltaY); + }; + + return { + init: init, + subscribe: subscribe, + unsubscribe: unsubscribe, + }; + })(); + + /* + * Element Class + */ + var CssClass = function CssClass(id) { + this.left = 0; + this.top = 0; + this.rotate = 0; + this.width = 300; + this.height = 100; + this.display = true; + this.border = true; + this.zIndex = -1; + this.bgcolor = new Color(); + this.id = id; + this.node = getElemById("obj-" + id); + this.object = getElemById(id); + this.shadowID = null; + this.shadows = []; + this.render = []; + this.init(); + }; + + CssClass.prototype.init = function init() { + this.left = + ((this.node.parentNode.clientWidth - this.node.clientWidth) / 2) | 0; + this.top = + ((this.node.parentNode.clientHeight - this.node.clientHeight) / 2) | 0; + + this.setTop(this.top); + this.setLeft(this.left); + this.setHeight(this.height); + this.setWidth(this.width); + this.bgcolor.setHSV(0, 0, 100); + this.updateBgColor(this.bgcolor); + }; + + CssClass.prototype.updatePos = function updatePos(deltaX, deltaY) { + this.left += deltaX; + this.top += deltaY; + this.node.style.top = this.top + "px"; + this.node.style.left = this.left + "px"; + SliderManager.setValue("left", this.left); + SliderManager.setValue("top", this.top); + }; + + CssClass.prototype.setLeft = function setLeft(value) { + this.left = value; + this.node.style.left = this.left + "px"; + OutputManager.updateProperty(this.id, "left", this.left + "px"); + }; + + CssClass.prototype.setTop = function setTop(value) { + this.top = value; + this.node.style.top = this.top + "px"; + OutputManager.updateProperty(this.id, "top", this.top + "px"); + }; + + CssClass.prototype.setWidth = function setWidth(value) { + this.width = value; + this.node.style.width = this.width + "px"; + OutputManager.updateProperty(this.id, "width", this.width + "px"); + }; + + CssClass.prototype.setHeight = function setHeight(value) { + this.height = value; + this.node.style.height = this.height + "px"; + OutputManager.updateProperty(this.id, "height", this.height + "px"); + }; + + // Browser support + CssClass.prototype.setRotate = function setRotate(value) { + var cssvalue = "rotate(" + value + "deg)"; + + this.node.style.transform = cssvalue; + this.node.style.webkitTransform = cssvalue; + this.node.style.msTransform = cssvalue; + + if (value !== 0) { + if (this.rotate === 0) { + OutputManager.toggleProperty(this.id, "transform", true); + OutputManager.toggleProperty(this.id, "-webkit-transform", true); + OutputManager.toggleProperty(this.id, "-ms-transform", true); + } + } else { + OutputManager.toggleProperty(this.id, "transform", false); + OutputManager.toggleProperty(this.id, "-webkit-transform", false); + OutputManager.toggleProperty(this.id, "-ms-transform", false); + } + + OutputManager.updateProperty(this.id, "transform", cssvalue); + OutputManager.updateProperty(this.id, "-webkit-transform", cssvalue); + OutputManager.updateProperty(this.id, "-ms-transform", cssvalue); + this.rotate = value; + }; + + CssClass.prototype.setzIndex = function setzIndex(value) { + this.node.style.zIndex = value; + OutputManager.updateProperty(this.id, "z-index", value); + this.zIndex = value; + }; + + CssClass.prototype.toggleDisplay = function toggleDisplay(value) { + if (typeof value !== "boolean" || this.display === value) return; + + this.display = value; + var display = this.display === true ? "block" : "none"; + this.node.style.display = display; + this.object.style.display = display; + }; + + CssClass.prototype.toggleBorder = function toggleBorder(value) { + if (typeof value !== "boolean" || this.border === value) return; + + this.border = value; + var border = this.border === true ? "1px solid #CCC" : "none"; + this.node.style.border = border; + }; + + CssClass.prototype.updateBgColor = function updateBgColor(color) { + this.bgcolor.copy(color); + this.node.style.backgroundColor = color.getColor(); + OutputManager.updateProperty(this.id, "background-color", color.getColor()); + }; + + CssClass.prototype.updateShadows = function updateShadows() { + if (this.render.length === 0) + OutputManager.toggleProperty(this.id, "box-shadow", false); + if (this.render.length === 1) + OutputManager.toggleProperty(this.id, "box-shadow", true); + + this.node.style.boxShadow = this.render.join(", "); + OutputManager.updateProperty( + this.id, + "box-shadow", + this.render.join(", \n"), + ); + }; + + /** + * Tool Manager + */ + var Tool = (function Tool() { + var preview; + var classes = []; + var active = null; + var animate = false; + + /* + * Toll actions + */ + var addCssClass = function addCssClass(id) { + classes[id] = new CssClass(id); + }; + + var setActiveClass = function setActiveClass(id) { + active = classes[id]; + active.shadowID = null; + ColoPicker.setColor(classes[id].bgcolor); + SliderManager.setValue("top", active.top); + SliderManager.setValue("left", active.left); + SliderManager.setValue("rotate", active.rotate); + SliderManager.setValue("z-index", active.zIndex); + SliderManager.setValue("width", active.width); + SliderManager.setValue("height", active.height); + ButtonManager.setValue("border-state", active.border); + active.updateShadows(); + }; + + var disableClass = function disableClass(topic) { + classes[topic].toggleDisplay(false); + ButtonManager.setValue(topic, false); + }; + + var addShadow = function addShadow(position) { + if (animate === true) return -1; + + active.shadows.splice(position, 0, new Shadow()); + active.render.splice(position, 0, null); + }; + + var swapShadow = function swapShadow(id1, id2) { + var x = active.shadows[id1]; + active.shadows[id1] = active.shadows[id2]; + active.shadows[id2] = x; + updateShadowCSS(id1); + updateShadowCSS(id2); + }; + + var deleteShadow = function deleteShadow(position) { + active.shadows.splice(position, 1); + active.render.splice(position, 1); + active.updateShadows(); + }; + + var setActiveShadow = function setActiveShadow(id, glow) { + active.shadowID = id; + ColoPicker.setColor(active.shadows[id].color); + ButtonManager.setValue("inset", active.shadows[id].inset); + SliderManager.setValue("blur", active.shadows[id].blur); + SliderManager.setValue("spread", active.shadows[id].spread); + SliderManager.setValue("posX", active.shadows[id].posX); + SliderManager.setValue("posY", active.shadows[id].posY); + if (glow === true) addGlowEffect(id); + }; + + var addGlowEffect = function addGlowEffect(id) { + if (animate === true) return; + + animate = true; + var store = new Shadow(); + var shadow = active.shadows[id]; + + store.copy(shadow); + shadow.color.setRGBA(40, 125, 200, 1); + shadow.blur = 10; + shadow.spread = 10; + + active.node.style.transition = "box-shadow 0.2s"; + updateShadowCSS(id); + + setTimeout(function () { + shadow.copy(store); + updateShadowCSS(id); + setTimeout(function () { + active.node.style.removeProperty("transition"); + animate = false; + }, 100); + }, 200); + }; + + var updateActivePos = function updateActivePos(deltaX, deltaY) { + if (active.shadowID === null) active.updatePos(deltaX, deltaY); + else updateShadowPos(deltaX, deltaY); + }; + + /* + * Shadow properties + */ + var updateShadowCSS = function updateShadowCSS(id) { + active.render[id] = active.shadows[id].computeCSS(); + active.updateShadows(); + }; + + var toggleShadowInset = function toggleShadowInset(value) { + if (active.shadowID === null) return; + active.shadows[active.shadowID].toggleInset(value); + updateShadowCSS(active.shadowID); + }; + + var updateShadowPos = function updateShadowPos(deltaX, deltaY) { + var shadow = active.shadows[active.shadowID]; + shadow.posX += deltaX; + shadow.posY += deltaY; + SliderManager.setValue("posX", shadow.posX); + SliderManager.setValue("posY", shadow.posY); + updateShadowCSS(active.shadowID); + }; + + var setShadowPosX = function setShadowPosX(value) { + if (active.shadowID === null) return; + active.shadows[active.shadowID].posX = value; + updateShadowCSS(active.shadowID); + }; + + var setShadowPosY = function setShadowPosY(value) { + if (active.shadowID === null) return; + active.shadows[active.shadowID].posY = value; + updateShadowCSS(active.shadowID); + }; + + var setShadowBlur = function setShadowBlur(value) { + if (active.shadowID === null) return; + active.shadows[active.shadowID].blur = value; + updateShadowCSS(active.shadowID); + }; + + var setShadowSpread = function setShadowSpread(value) { + if (active.shadowID === null) return; + active.shadows[active.shadowID].spread = value; + updateShadowCSS(active.shadowID); + }; + + var updateShadowColor = function updateShadowColor(color) { + active.shadows[active.shadowID].color.copy(color); + updateShadowCSS(active.shadowID); + }; + + /* + * Element Properties + */ + var updateColor = function updateColor(color) { + if (active.shadowID === null) active.updateBgColor(color); + else updateShadowColor(color); + }; + + var init = function init() { + preview = getElemById("preview"); + + ColoPicker.subscribe("color", updateColor); + PreviewMouseTracking.subscribe(updateActivePos); + + // Affects shadows + ButtonManager.subscribe("inset", toggleShadowInset); + SliderManager.subscribe("posX", setShadowPosX); + SliderManager.subscribe("posY", setShadowPosY); + SliderManager.subscribe("blur", setShadowBlur); + SliderManager.subscribe("spread", setShadowSpread); + + // Affects element + SliderManager.subscribe("top", function (value) { + active.setTop(value); + }); + SliderManager.subscribe("left", function (value) { + active.setLeft(value); + }); + SliderManager.subscribe("rotate", function (value) { + if (active == classes["element"]) return; + active.setRotate(value); + }); + + SliderManager.subscribe("z-index", function (value) { + if (active == classes["element"]) return; + active.setzIndex(value); + }); + + SliderManager.subscribe("width", function (value) { + active.setWidth(value); + }); + + SliderManager.subscribe("height", function (value) { + active.setHeight(value); + }); + + // Actions + classes["before"].top = -30; + classes["before"].left = -30; + classes["after"].top = 30; + classes["after"].left = 30; + classes["before"].toggleDisplay(false); + classes["after"].toggleDisplay(false); + ButtonManager.setValue("before", false); + ButtonManager.setValue("after", false); + + ButtonManager.subscribe( + "before", + classes["before"].toggleDisplay.bind(classes["before"]), + ); + ButtonManager.subscribe( + "after", + classes["after"].toggleDisplay.bind(classes["after"]), + ); + + ButtonManager.subscribe("border-state", function (value) { + active.toggleBorder(value); + }); + }; + + return { + init: init, + addShadow: addShadow, + swapShadow: swapShadow, + addCssClass: addCssClass, + disableClass: disableClass, + deleteShadow: deleteShadow, + setActiveClass: setActiveClass, + setActiveShadow: setActiveShadow, + }; + })(); + + /** + * Layer Manager + */ + var LayerManager = (function LayerManager() { + var stacks = []; + var active = { + node: null, + stack: null, + }; + var elements = {}; + + var mouseEvents = function mouseEvents(e) { + var node = e.target; + var type = node.getAttribute("data-type"); + + if (type === "subject") setActiveStack(stacks[node.id]); + + if (type === "disable") { + Tool.disableClass(node.parentNode.id); + setActiveStack(stacks["element"]); + } + + if (type === "add") active.stack.addLayer(); + + if (type === "layer") active.stack.setActiveLayer(node); + + if (type === "delete") active.stack.deleteLayer(node.parentNode); + + if (type === "move-up") active.stack.moveLayer(1); + + if (type === "move-down") active.stack.moveLayer(-1); + }; + + var setActiveStack = function setActiveStack(stackObj) { + active.stack.hide(); + active.stack = stackObj; + active.stack.show(); + }; + + /* + * Stack object + */ + var Stack = function Stack(subject) { + var S = document.createElement("div"); + var title = document.createElement("div"); + var stack = document.createElement("div"); + + S.className = "container"; + stack.className = "stack"; + title.className = "title"; + title.textContent = subject.getAttribute("data-title"); + S.appendChild(title); + S.appendChild(stack); + + this.id = subject.id; + this.container = S; + this.stack = stack; + this.subject = subject; + this.order = []; + this.uid = 0; + this.count = 0; + this.layer = null; + this.layerID = 0; + }; + + Stack.prototype.addLayer = function addLayer() { + if (Tool.addShadow(this.layerID) == -1) return; + + var uid = this.getUID(); + var layer = this.createLayer(uid); + + if (this.layer === null && this.stack.children.length >= 1) + this.layer = this.stack.children[0]; + + this.stack.insertBefore(layer, this.layer); + this.order.splice(this.layerID, 0, uid); + this.count++; + this.setActiveLayer(layer); + }; + + Stack.prototype.createLayer = function createLayer(uid) { + var layer = document.createElement("div"); + var del = document.createElement("span"); + + layer.className = "node"; + layer.setAttribute("data-shid", uid); + layer.setAttribute("data-type", "layer"); + layer.textContent = "shadow " + uid; + + del.className = "delete"; + del.setAttribute("data-type", "delete"); + + layer.appendChild(del); + return layer; + }; + + Stack.prototype.getUID = function getUID() { + return this.uid++; + }; + + // SOLVE IE BUG + Stack.prototype.moveLayer = function moveLayer(direction) { + if (this.count <= 1 || this.layer === null) return; + if (direction === -1 && this.layerID === this.count - 1) return; + if (direction === 1 && this.layerID === 0) return; + + if (direction === -1) { + var before = null; + Tool.swapShadow(this.layerID, this.layerID + 1); + this.swapOrder(this.layerID, this.layerID + 1); + this.layerID += 1; + + if (this.layerID + 1 !== this.count) + before = this.stack.children[this.layerID + 1]; + + this.stack.insertBefore(this.layer, before); + Tool.setActiveShadow(this.layerID, false); + } + + if (direction === 1) { + Tool.swapShadow(this.layerID, this.layerID - 1); + this.swapOrder(this.layerID, this.layerID - 1); + this.layerID -= 1; + this.stack.insertBefore(this.layer, this.stack.children[this.layerID]); + Tool.setActiveShadow(this.layerID, false); + } + }; + + Stack.prototype.swapOrder = function swapOrder(pos1, pos2) { + var x = this.order[pos1]; + this.order[pos1] = this.order[pos2]; + this.order[pos2] = x; + }; + + Stack.prototype.deleteLayer = function deleteLayer(node) { + var shadowID = node.getAttribute("data-shid") | 0; + var index = this.order.indexOf(shadowID); + this.stack.removeChild(this.stack.children[index]); + this.order.splice(index, 1); + this.count--; + + Tool.deleteShadow(index); + + if (index > this.layerID) return; + + if (index == this.layerID) { + if (this.count >= 1) { + this.layerID = 0; + this.setActiveLayer(this.stack.children[0], true); + } else { + this.layer = null; + this.show(); + } + } + + if (index < this.layerID) { + this.layerID--; + Tool.setActiveShadow(this.layerID, true); + } + }; + + Stack.prototype.setActiveLayer = function setActiveLayer(node) { + elements.shadow_properties.style.display = "block"; + elements.element_properties.style.display = "none"; + + if (this.layer) this.layer.removeAttribute("data-active"); + + this.layer = node; + this.layer.setAttribute("data-active", "layer"); + + var shadowID = node.getAttribute("data-shid") | 0; + this.layerID = this.order.indexOf(shadowID); + Tool.setActiveShadow(this.layerID, true); + }; + + Stack.prototype.unsetActiveLayer = function unsetActiveLayer() { + if (this.layer) this.layer.removeAttribute("data-active"); + + this.layer = null; + this.layerID = 0; + }; + + Stack.prototype.hide = function hide() { + this.unsetActiveLayer(); + this.subject.removeAttribute("data-active"); + var style = this.container.style; + style.left = "100%"; + style.zIndex = "0"; + }; + + Stack.prototype.show = function show() { + elements.shadow_properties.style.display = "none"; + elements.element_properties.style.display = "block"; + + if (this.id === "element") { + elements.zIndex.style.display = "none"; + elements.transform_rotate.style.display = "none"; + } else { + elements.zIndex.style.display = "block"; + elements.transform_rotate.style.display = "block"; + } + + this.subject.setAttribute("data-active", "subject"); + var style = this.container.style; + style.left = "0"; + style.zIndex = "10"; + Tool.setActiveClass(this.id); + }; + + function init() { + var elem, size; + var layerManager = getElemById("layer_manager"); + var layerMenu = getElemById("layer_menu"); + var container = getElemById("stack_container"); + + elements.shadow_properties = getElemById("shadow_properties"); + elements.element_properties = getElemById("element_properties"); + elements.transform_rotate = getElemById("transform_rotate"); + elements.zIndex = getElemById("z-index"); + + elem = document.querySelectorAll('#layer_menu [data-type="subject"]'); + size = elem.length; + + for (var i = 0; i < size; i++) { + var S = new Stack(elem[i]); + stacks[elem[i].id] = S; + container.appendChild(S.container); + Tool.addCssClass(elem[i].id); + } + + active.stack = stacks["element"]; + stacks["element"].show(); + + layerManager.addEventListener("click", mouseEvents); + layerMenu.addEventListener("click", mouseEvents); + + ButtonManager.subscribe("before", function (value) { + if (value === false && active.stack === stacks["before"]) + setActiveStack(stacks["element"]); + if (value === true && active.stack !== stacks["before"]) + setActiveStack(stacks["before"]); + }); + + ButtonManager.subscribe("after", function (value) { + if (value === false && active.stack === stacks["after"]) + setActiveStack(stacks["element"]); + if (value === true && active.stack !== stacks["after"]) + setActiveStack(stacks["after"]); + }); + } + + return { + init: init, + }; + })(); + + /* + * OutputManager + */ + var OutputManager = (function OutputManager() { + var classes = []; + var buttons = []; + var active = null; + var menu = null; + var button_offset = 0; + + var crateOutputNode = function (topic, property) { + var prop = document.createElement("div"); + var name = document.createElement("span"); + var value = document.createElement("span"); + + var pmatch = property.match( + /(^([a-z0-9\-]*)=\[([a-z0-9\-\"]*)\])|^([a-z0-9\-]*)/i, + ); + + name.textContent = "\t" + pmatch[4]; + + if (pmatch[3] !== undefined) { + name.textContent = "\t" + pmatch[2]; + value.textContent = pmatch[3] + ";"; + } + + name.textContent += ": "; + prop.className = "css-property"; + name.className = "name"; + value.className = "value"; + prop.appendChild(name); + prop.appendChild(value); + + classes[topic].node.appendChild(prop); + classes[topic].line[property] = prop; + classes[topic].prop[property] = value; + }; + + var OutputClass = function OutputClass(node) { + var topic = node.getAttribute("data-topic"); + var prop = node.getAttribute("data-prop"); + var name = node.getAttribute("data-name"); + var properties = prop.split(" "); + + classes[topic] = {}; + classes[topic].node = node; + classes[topic].prop = []; + classes[topic].line = []; + classes[topic].button = new Button(topic); + + var open_decl = document.createElement("div"); + var end_decl = document.createElement("div"); + + open_decl.textContent = name + " {"; + end_decl.textContent = "}"; + node.appendChild(open_decl); + + for (var i in properties) crateOutputNode(topic, properties[i]); + + node.appendChild(end_decl); + }; + + var Button = function Button(topic) { + var button = document.createElement("div"); + + button.className = "button"; + button.textContent = topic; + button.style.left = button_offset + "px"; + button_offset += 100; + + button.addEventListener("click", function () { + toggleDisplay(topic); + }); + + menu.appendChild(button); + return button; + }; + + var toggleDisplay = function toggleDisplay(topic) { + active.button.removeAttribute("data-active"); + active.node.style.display = "none"; + active = classes[topic]; + active.node.style.display = "block"; + active.button.setAttribute("data-active", "true"); + }; + + var toggleButton = function toggleButton(topic, value) { + var display = value === true ? "block" : "none"; + classes[topic].button.style.display = display; + + if (value === true) toggleDisplay(topic); + else toggleDisplay("element"); + }; + + var updateProperty = function updateProperty(topic, property, data) { + try { + classes[topic].prop[property].textContent = data + ";"; + } catch (error) { + // console.log("ERROR undefined : ", topic, property, data); + } + }; + + var toggleProperty = function toggleProperty(topic, property, value) { + var display = value === true ? "block" : "none"; + try { + classes[topic].line[property].style.display = display; + } catch (error) { + // console.log("ERROR undefined : ",classes, topic, property, value); + } + }; + + var init = function init() { + menu = getElemById("menu"); + + var elem = document.querySelectorAll("#output .output"); + var size = elem.length; + for (var i = 0; i < size; i++) OutputClass(elem[i]); + + active = classes["element"]; + toggleDisplay("element"); + + ButtonManager.subscribe("before", function (value) { + toggleButton("before", value); + }); + + ButtonManager.subscribe("after", function (value) { + toggleButton("after", value); + }); + }; + + return { + init: init, + updateProperty: updateProperty, + toggleProperty: toggleProperty, + }; + })(); + + /** + * Init Tool + */ + var init = function init() { + ButtonManager.init(); + OutputManager.init(); + ColoPicker.init(); + SliderManager.init(); + LayerManager.init(); + PreviewMouseTracking.init("preview"); + Tool.init(); + }; + + return { + init: init, + }; })(); diff --git a/tools/box-shadow-generator/styles.css b/tools/box-shadow-generator/styles.css index 07fd139e..9a77a67e 100644 --- a/tools/box-shadow-generator/styles.css +++ b/tools/box-shadow-generator/styles.css @@ -2,89 +2,90 @@ * ========================================================================== */ .span_12 { - width: 100%; + width: 100%; } .span_11 { - width: 91.46%; + width: 91.46%; } .span_10 { - width: 83%; + width: 83%; } .span_9 { - width: 74.54%; + width: 74.54%; } .span_8 { - width: 66.08%; + width: 66.08%; } .span_7 { - width: 57.62%; + width: 57.62%; } .span_6 { - width: 49.16%; + width: 49.16%; } .span_5 { - width: 40.7%; + width: 40.7%; } .span_4 { - width: 32.24%; + width: 32.24%; } .span_3 { - width: 23.78%; + width: 23.78%; } .span_2 { - width: 15.32%; + width: 15.32%; } .span_1 { - width: 6.86%; + width: 6.86%; } /* SECTIONS * ========================================================================== */ .section { - clear: both; - padding: 0px; - margin: 0px; + clear: both; + padding: 0px; + margin: 0px; } /* GROUPING * ========================================================================== */ -.group:before, .group:after { - content: ""; - display: table; +.group:before, +.group:after { + content: ""; + display: table; } .group:after { - clear:both; + clear: both; } .group { - zoom: 1; /* For IE 6/7 (trigger hasLayout) */ + zoom: 1; /* For IE 6/7 (trigger hasLayout) */ } /* GRID COLUMN SETUP * ========================================================================== */ .col { - display: block; - float:left; - margin: 1% 0 1% 1.6%; + display: block; + float: left; + margin: 1% 0 1% 1.6%; } .col:first-child { - margin-left: 0; + margin-left: 0; } /* all browsers except IE6 and lower */ /* @@ -92,76 +93,76 @@ */ .slidergroup { - height: 20px; - margin: 10px 0; - font-family: "Segoe UI", Arial, Helvetica, sans-serif; - -moz-user-select: none; - user-select: none; + height: 20px; + margin: 10px 0; + font-family: "Segoe UI", Arial, Helvetica, sans-serif; + -moz-user-select: none; + user-select: none; } .slidergroup * { - float: left; - height: 100%; - line-height: 100%; + float: left; + height: 100%; + line-height: 100%; } /* Slider */ .ui-slider { - height: 10px; - width: 200px; - margin: 4px 10px; - display: block; - border: 1px solid #999; - border-radius: 3px; - background: #EEE; + height: 10px; + width: 200px; + margin: 4px 10px; + display: block; + border: 1px solid #999; + border-radius: 3px; + background: #eee; } .ui-slider:hover { - cursor: pointer; + cursor: pointer; } .ui-slider-name { - width: 90px; - padding: 0 10px 0 0; - text-align: right; - text-transform: lowercase; + width: 90px; + padding: 0 10px 0 0; + text-align: right; + text-transform: lowercase; } .ui-slider-pointer { - width: 13px; - height: 13px; - background-color: #EEE; - border: 1px solid #2C9FC9; - border-radius: 3px; - position: relative; - top: -3px; - left: 0%; + width: 13px; + height: 13px; + background-color: #eee; + border: 1px solid #2c9fc9; + border-radius: 3px; + position: relative; + top: -3px; + left: 0%; } .ui-slider-btn-set { - width: 25px; - background-color: #2C9FC9; - border-radius: 3px; - color: #FFF; - font-weight: bold; - text-align: center; + width: 25px; + background-color: #2c9fc9; + border-radius: 3px; + color: #fff; + font-weight: bold; + text-align: center; } .ui-slider-btn-set:hover { - background-color: #379B4A; - cursor: pointer; + background-color: #379b4a; + cursor: pointer; } .ui-slider-input > input { - margin: 0 10px; - padding: 0; - width: 50px; - text-align: center; + margin: 0 10px; + padding: 0; + width: 50px; + text-align: center; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; } /* @@ -171,57 +172,57 @@ /* Checkbox */ .ui-checkbox { - text-align: center; - font-size: 16px; - font-family: "Segoe UI", Arial, Helvetica, sans-serif; - line-height: 1.5em; - color: #FFF; + text-align: center; + font-size: 16px; + font-family: "Segoe UI", Arial, Helvetica, sans-serif; + line-height: 1.5em; + color: #fff; - -moz-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; - user-select: none; + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; } .ui-checkbox > input { - display: none; + display: none; } .ui-checkbox > label { - font-size: 12px; - padding: 0.333em 1.666em 0.5em; - height: 1em; - line-height: 1em; + font-size: 12px; + padding: 0.333em 1.666em 0.5em; + height: 1em; + line-height: 1em; - background-color: #888; - background-image: url("disabled.png"); - background-position: center center; - background-repeat: no-repeat; + background-color: #888; + background-image: url("disabled.png"); + background-position: center center; + background-repeat: no-repeat; - color: #FFF; - border-radius: 3px; - font-weight: bold; - float: left; + color: #fff; + border-radius: 3px; + font-weight: bold; + float: left; } .ui-checkbox .text { - padding-left: 34px; - background-position: center left 10px; + padding-left: 34px; + background-position: center left 10px; } .ui-checkbox .left { - padding-right: 34px; - padding-left: 1.666em; - background-position: center right 10px; + padding-right: 34px; + padding-left: 1.666em; + background-position: center right 10px; } .ui-checkbox > label:hover { - cursor: pointer; + cursor: pointer; } .ui-checkbox > input:checked + label { - background-image: url("checked.png"); - background-color: #379B4A; + background-image: url("checked.png"); + background-color: #379b4a; } /* @@ -229,62 +230,62 @@ */ body { - max-width: 1000px; - height: 800px; - margin: 20px auto 0; + max-width: 1000px; + height: 800px; + margin: 20px auto 0; - font-family: "Segoe UI", Arial, Helvetica, sans-serif; + font-family: "Segoe UI", Arial, Helvetica, sans-serif; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; - -moz-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; } #container { - width: 100%; - padding: 2px; + width: 100%; + padding: 2px; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; } /* container with shadows stacks */ #stack_container { - height: 400px; - overflow: hidden; - position: relative; - border: 1px solid #CCC; - border-radius: 3px; + height: 400px; + overflow: hidden; + position: relative; + border: 1px solid #ccc; + border-radius: 3px; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; } #stack_container .container { - height: 100%; - width: 100%; - position: absolute; - left: 100%; - transition-property: left; - transition-duration: 0.5s; + height: 100%; + width: 100%; + position: absolute; + left: 100%; + transition-property: left; + transition-duration: 0.5s; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; } #stack_container .title { - text-align: center; - font-weight: bold; - line-height: 2em; - border-bottom: 1px solid #43A6E1; - color: #666; + text-align: center; + font-weight: bold; + line-height: 2em; + border-bottom: 1px solid #43a6e1; + color: #666; } /* @@ -292,140 +293,140 @@ body { */ #layer_manager { - width: 17%; - background-color: #FEFEFE; - margin: 0 1% 0 0; + width: 17%; + background-color: #fefefe; + margin: 0 1% 0 0; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - float: left; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + float: left; } #layer_manager .button { - width: 30%; - height: 25px; - margin:0 0 10px; - color: #333; - background-color: #EEE; - text-align: center; - font-size: 0.75em; - line-height: 1.5em; - border: 1px solid #CCC; - border-radius: 3px; - - display: block; - background-position: center center; - background-repeat: no-repeat; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - float: left; + width: 30%; + height: 25px; + margin: 0 0 10px; + color: #333; + background-color: #eee; + text-align: center; + font-size: 0.75em; + line-height: 1.5em; + border: 1px solid #ccc; + border-radius: 3px; + + display: block; + background-position: center center; + background-repeat: no-repeat; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + float: left; } #layer_manager .button:hover { - background-color: #3380C4; - border: 1px solid #3380C4; - cursor: pointer; + background-color: #3380c4; + border: 1px solid #3380c4; + cursor: pointer; } -#layer_manager [data-type='add'] { - background-image: url("add-black.png"); +#layer_manager [data-type="add"] { + background-image: url("add-black.png"); } -#layer_manager [data-type='add']:hover { - background-image: url("add-white.png"); +#layer_manager [data-type="add"]:hover { + background-image: url("add-white.png"); } -#layer_manager [data-type='move-up'] { - background-image: url("up-black.png"); - margin-left: 5%; - margin-right: 5%; +#layer_manager [data-type="move-up"] { + background-image: url("up-black.png"); + margin-left: 5%; + margin-right: 5%; } -#layer_manager [data-type='move-up']:hover { - background-image: url("up-white.png"); +#layer_manager [data-type="move-up"]:hover { + background-image: url("up-white.png"); } -#layer_manager [data-type='move-down'] { - background-image: url("down-black.png"); +#layer_manager [data-type="move-down"] { + background-image: url("down-black.png"); } -#layer_manager [data-type='move-down']:hover { - background-image: url("down-white.png"); +#layer_manager [data-type="move-down"]:hover { + background-image: url("down-white.png"); } /* shadows classes */ #layer_manager .node { - width: 100%; - margin: 5px 0; - padding: 5px; - text-align: center; - background-color: #EEE; - border: 1px solid #DDD; - font-size: 0.75em; - line-height: 1.5em; - color: #333; - border-radius: 3px; + width: 100%; + margin: 5px 0; + padding: 5px; + text-align: center; + background-color: #eee; + border: 1px solid #ddd; + font-size: 0.75em; + line-height: 1.5em; + color: #333; + border-radius: 3px; - position: relative; - display: block; + position: relative; + display: block; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; } #layer_manager .node:hover { - color: #FFF; - background-color: #3380C4; - cursor: pointer; + color: #fff; + background-color: #3380c4; + cursor: pointer; } /* active element styling */ -#layer_manager [data-active='layer'] { - color: #FFF; - border: none; - background-color: #379B4A; +#layer_manager [data-active="layer"] { + color: #fff; + border: none; + background-color: #379b4a; } -#layer_manager [data-active='subject'] { - color: #FFF; - background-color: #467FC9; +#layer_manager [data-active="subject"] { + color: #fff; + background-color: #467fc9; } /* delete button */ #layer_manager .delete { - width: 1.5em; - height: 100%; - float: right; - border-radius: 3px; - background-image: url("delete-white.png"); - background-position: center center; - background-repeat: no-repeat; - position: absolute; - top: 0; - right: 10px; - display: none; + width: 1.5em; + height: 100%; + float: right; + border-radius: 3px; + background-image: url("delete-white.png"); + background-position: center center; + background-repeat: no-repeat; + position: absolute; + top: 0; + right: 10px; + display: none; } #layer_manager .delete:hover { - background-image: url("delete-yellow.png"); + background-image: url("delete-yellow.png"); } #layer_manager .node:hover .delete { - display: block; + display: block; } #layer_manager .stack { - padding: 0 5px; - max-height: 90%; - overflow: auto; - overflow-x: hidden; + padding: 0 5px; + max-height: 90%; + overflow: auto; + overflow-x: hidden; } /* @@ -433,84 +434,84 @@ body { */ #layer_menu { - margin: 0 0 10px 0; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; + margin: 0 0 10px 0; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; } #layer_menu .button { - width: 100px; - margin: 0 5px 0 0; - padding: 2.5px; - color: #333; - background-color: #EEE; - border: 1px solid #CCC; - border-radius: 3px; - text-align: center; - font-size: 0.75em; - line-height: 1.5em; - - position: relative; - display: block; - float: left; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; + width: 100px; + margin: 0 5px 0 0; + padding: 2.5px; + color: #333; + background-color: #eee; + border: 1px solid #ccc; + border-radius: 3px; + text-align: center; + font-size: 0.75em; + line-height: 1.5em; + + position: relative; + display: block; + float: left; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; } #layer_menu .button:hover { - color: #FFF; - background-color: #3380C4; - border: 1px solid #3380C4; - cursor: pointer; + color: #fff; + background-color: #3380c4; + border: 1px solid #3380c4; + cursor: pointer; } #layer_menu .delete { - width: 1.5em; - height: 100%; - float: right; - border-radius: 3px; - background-image: url("delete-white.png"); - background-position: center center; - background-repeat: no-repeat; - position: absolute; - top: 0; - right: 5px; - display: none; + width: 1.5em; + height: 100%; + float: right; + border-radius: 3px; + background-image: url("delete-white.png"); + background-position: center center; + background-repeat: no-repeat; + position: absolute; + top: 0; + right: 5px; + display: none; } #layer_menu .delete:hover { - background-image: url("delete-yellow.png"); + background-image: url("delete-yellow.png"); } #layer_menu .button:hover .delete { - display: block; + display: block; } /* * active element styling */ -#layer_menu [data-active='subject'] { - color: #FFF; - background-color: #379B4A; - border: 1px solid #379B4A; +#layer_menu [data-active="subject"] { + color: #fff; + background-color: #379b4a; + border: 1px solid #379b4a; } /* Checkbox */ #layer_menu .ui-checkbox > label { - height: 15px; - line-height: 17px; - font-weight: normal; - width: 46px; - margin: 0 5px 0 0; + height: 15px; + line-height: 17px; + font-weight: normal; + width: 46px; + margin: 0 5px 0 0; } #layer_menu .ui-checkbox > input:checked + label { - display: none; + display: none; } /******************************************************************************/ @@ -520,59 +521,58 @@ body { */ #preview_zone { - width: 82%; - float: left; - + width: 82%; + float: left; } #preview { - width: 100%; - height: 400px; - border: 1px solid #CCC; - border-radius: 3px; - text-align: center; + width: 100%; + height: 400px; + border: 1px solid #ccc; + border-radius: 3px; + text-align: center; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - cursor: move; - float: left; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + cursor: move; + float: left; } #preview .content { - width: 100%; - height: 100%; - display: block; + width: 100%; + height: 100%; + display: block; } #obj-element { - width: 300px; - height: 100px; - border: 1px solid #CCC; - background: #FFF; - position: relative; + width: 300px; + height: 100px; + border: 1px solid #ccc; + background: #fff; + position: relative; } #obj-before { - height: 100%; - width: 100%; - background: #999; - border: 1px solid #CCC; - text-align: left; - display : block; - position: absolute; - z-index: -1; + height: 100%; + width: 100%; + background: #999; + border: 1px solid #ccc; + text-align: left; + display: block; + position: absolute; + z-index: -1; } #obj-after { - height: 100%; - width: 100%; - background: #DDD; - border: 1px solid #CCC; - text-align: right; - display : block; - position: absolute; - z-index: -1; + height: 100%; + width: 100%; + background: #ddd; + border: 1px solid #ccc; + text-align: right; + display: block; + position: absolute; + z-index: -1; } /******************************************************************************/ @@ -583,68 +583,65 @@ body { */ .wrap-left { - float: left; - overflow: hidden; + float: left; + overflow: hidden; } .wrap-right { - float: right; - overflow: hidden; + float: right; + overflow: hidden; } .wrap-left > * { - float: left; + float: left; } .wrap-right > * { - float: right; + float: right; } @media (min-width: 960px) { + .wrap-left { + width: 45%; + } - .wrap-left { - width: 45%; - } - - .wrap-right { - width: 55%; - } + .wrap-right { + width: 55%; + } } @media (max-width: 959px) { + .wrap-left { + width: 30%; + } - .wrap-left { - width: 30%; - } - - .wrap-right { - width: 70%; - } + .wrap-right { + width: 70%; + } } #controls { - color: #444; - margin: 10px 0 0 0; + color: #444; + margin: 10px 0 0 0; } #controls .category { - width: 500px; - margin: 0 auto 20px; - padding: 0; - + width: 500px; + margin: 0 auto 20px; + padding: 0; } #controls .category .title { - width: 100%; - height: 1.5em; - line-height: 1.5em; - color: #AAA; - text-align: right; + width: 100%; + height: 1.5em; + line-height: 1.5em; + color: #aaa; + text-align: right; } #controls .category > .group { - border: 1px solid #CCC; - border-radius: 3px; + border: 1px solid #ccc; + border-radius: 3px; } /** @@ -652,179 +649,201 @@ body { */ @media (min-width: 960px) { - #controls .colorpicker { - width: 420px; - } + #controls .colorpicker { + width: 420px; + } } @media (max-width: 959px) { - #controls .colorpicker { - width: 210px; - } + #controls .colorpicker { + width: 210px; + } } #colorpicker { - width: 100%; - margin: 0 auto; + width: 100%; + margin: 0 auto; } #colorpicker .gradient { - width: 200px; - height: 200px; - margin: 5px; - background: url("picker_mask_200.png"); - background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), - -moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%); - background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), - -webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%); - background-color: #F00; - float: left; + width: 200px; + height: 200px; + margin: 5px; + background: url("picker_mask_200.png"); + background: + -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), + -moz-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); + background: + -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), + -webkit-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); + background-color: #f00; + float: left; } #colorpicker .hue { - width: 200px; - height: 30px; - margin: 5px; - background: url("hue.png"); - background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, - #00F 66.66%, #F0F 83.33%, #F00 100%); - background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, - #00F 66.66%, #F0F 83.33%, #F00 100%); - float: left; + width: 200px; + height: 30px; + margin: 5px; + background: url("hue.png"); + background: -moz-linear-gradient( + left, + #f00 0%, + #ff0 16.66%, + #0f0 33.33%, + #0ff 50%, + #00f 66.66%, + #f0f 83.33%, + #f00 100% + ); + background: -webkit-linear-gradient( + left, + #f00 0%, + #ff0 16.66%, + #0f0 33.33%, + #0ff 50%, + #00f 66.66%, + #f0f 83.33%, + #f00 100% + ); + float: left; } #colorpicker .alpha { - width: 200px; - height: 30px; - margin: 5px; - border: 1px solid #CCC; - float: left; - background: url("alpha.png"); + width: 200px; + height: 30px; + margin: 5px; + border: 1px solid #ccc; + float: left; + background: url("alpha.png"); - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; } #colorpicker #alpha { - width: 100%; - height: 100%; - background: url("alpha_mask.png"); - background: -moz-linear-gradient(left, rgba(255, 0, 0, 0) 0%, rgba(255, 0, 0, 1) 100%); + width: 100%; + height: 100%; + background: url("alpha_mask.png"); + background: -moz-linear-gradient( + left, + rgba(255, 0, 0, 0) 0%, + rgba(255, 0, 0, 1) 100% + ); } #colorpicker #gradient_picker { - width: 0.5em; - height: 0.5em; - border-radius: 0.4em; - border: 2px solid #CCC; - position: relative; - top: 20%; - left: 20%; + width: 0.5em; + height: 0.5em; + border-radius: 0.4em; + border: 2px solid #ccc; + position: relative; + top: 20%; + left: 20%; } #colorpicker #hue_selector, #colorpicker #alpha_selector { - width: 3px; - height: 100%; - border: 1px solid #777; - background-color: #FFF; - position: relative; - top: -1px; - left: 0%; + width: 3px; + height: 100%; + border: 1px solid #777; + background-color: #fff; + position: relative; + top: -1px; + left: 0%; } /* input HSV and RGB */ #colorpicker .info { - width: 200px; - margin: 5px; - float: left; + width: 200px; + margin: 5px; + float: left; } #colorpicker .info * { - float: left; + float: left; } #colorpicker .info input { - margin: 0; - text-align: center; - width: 30px; - -moz-user-select: text; - -webkit-user-select: text; - -ms-user-select: text; + margin: 0; + text-align: center; + width: 30px; + -moz-user-select: text; + -webkit-user-select: text; + -ms-user-select: text; } #colorpicker .info span { - height: 20px; - width: 30px; - text-align: center; - line-height: 20px; - display: block; + height: 20px; + width: 30px; + text-align: center; + line-height: 20px; + display: block; } /* Preview color */ #colorpicker .block { - width: 95px; - height: 54px; - float: left; - position: relative; + width: 95px; + height: 54px; + float: left; + position: relative; } #colorpicker .preview { - margin: 5px; - border: 1px solid #CCC; - background-image: url("alpha.png"); + margin: 5px; + border: 1px solid #ccc; + background-image: url("alpha.png"); - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; } #colorpicker .preview:before { - height: 100%; - width: 50%; - left: 50%; - content: ""; - background: #FFF; - position: absolute; - z-index: 1; + height: 100%; + width: 50%; + left: 50%; + content: ""; + background: #fff; + position: absolute; + z-index: 1; } #colorpicker .preview > * { - width: 50%; - height: 100%; + width: 50%; + height: 100%; } #colorpicker #output_color { - width: 100%; - height: 100%; - position: absolute; - z-index: 2; + width: 100%; + height: 100%; + position: absolute; + z-index: 2; } #colorpicker .block .input { - float: right; + float: right; } #colorpicker [data-topic="a"] > span { - width: 50px; + width: 50px; } #colorpicker [data-topic="hexa"] { - float: right; - margin: 10px 0 0 0; + float: right; + margin: 10px 0 0 0; } #colorpicker [data-topic="hexa"] > span { - display: none; + display: none; } #colorpicker [data-topic="hexa"] > input { - width: 85px; - padding: 2px 0; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; + width: 85px; + padding: 2px 0; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; } /* @@ -834,20 +853,20 @@ body { /* Property */ .property { - height: 20px; - margin: 10px 0; + height: 20px; + margin: 10px 0; } .property * { - float: left; - height: 100%; - line-height: 100%; + float: left; + height: 100%; + line-height: 100%; } /* Slider */ #controls .ui-slider-name { - margin: 0 10px 0 0; + margin: 0 10px 0 0; } /* @@ -855,84 +874,84 @@ body { */ #output { - position: relative; + position: relative; } #output .menu { - max-width: 70%; - height: 20px; - position: absolute; - top: 2px; + max-width: 70%; + height: 20px; + position: absolute; + top: 2px; } #output .button { - width: 90px; - height: 22px; - margin: 0 5px 0 0; - text-align: center; - line-height: 20px; - font-size: 14px; - color: #FFF; - background-color: #999; - border-top-left-radius: 3px; - border-top-right-radius: 3px; - bottom: -5px; - float:left; + width: 90px; + height: 22px; + margin: 0 5px 0 0; + text-align: center; + line-height: 20px; + font-size: 14px; + color: #fff; + background-color: #999; + border-top-left-radius: 3px; + border-top-right-radius: 3px; + bottom: -5px; + float: left; } #output .button:hover { - color: #FFF; - background-color: #666; - cursor: pointer; + color: #fff; + background-color: #666; + cursor: pointer; } #output .menu [data-active="true"] { - color: #777; - background-color: #FFF; - border: 1px solid #CCC; - border-bottom: none; + color: #777; + background-color: #fff; + border: 1px solid #ccc; + border-bottom: none; } #output .menu [data-topic="before"] { - left: 100px; + left: 100px; } #output .menu [data-topic="after"] { - left: 200px; + left: 200px; } #output .output { - width: 480px; - margin: 10px; - padding: 10px; - overflow: hidden; - color: #555; - font-size: 14px; - border: 1px dashed #CCC; - border-radius: 3px; - display: none; + width: 480px; + margin: 10px; + padding: 10px; + overflow: hidden; + color: #555; + font-size: 14px; + border: 1px dashed #ccc; + border-radius: 3px; + display: none; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; - -moz-user-select: text; - -webkit-user-select: text; - -ms-user-select: text; + -moz-user-select: text; + -webkit-user-select: text; + -ms-user-select: text; } #output .css-property { - width: 100%; - float: left; - white-space: pre; + width: 100%; + float: left; + white-space: pre; } #output .name { - width: 35%; - float: left; + width: 35%; + float: left; } #output .value { - width: 65%; - float: left; + width: 65%; + float: left; } diff --git a/tools/color-picker/index.html b/tools/color-picker/index.html index da04b516..770bd564 100644 --- a/tools/color-picker/index.html +++ b/tools/color-picker/index.html @@ -1,33 +1,39 @@ - + - + Color picker - +
    -
    -
    -
    -
    CSS Color
    -
    +
    +
    +
    +
    CSS Color
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    - + diff --git a/tools/color-picker/script.js b/tools/color-picker/script.js index 43c91dc8..11a96998 100644 --- a/tools/color-picker/script.js +++ b/tools/color-picker/script.js @@ -1,906 +1,978 @@ -'use strict'; +"use strict"; var UIColorPicker = (function UIColorPicker() { - - function getElemById(id) { - return document.getElementById(id); - } - - var subscribers = []; - var pickers = []; - - /** - * RGBA Color class - * - * HWB/HSB and HSL (hue, saturation, value / brightness, lightness) - * @param hue 0-360 - * @param saturation 0-100 - * @param value 0-100 - * @param lightness 0-100 - */ - - function Color(color) { - - if(color instanceof Color === true) { - this.copy(color); - return; - } - - this.r = 0; - this.g = 0; - this.b = 0; - this.a = 1; - this.hue = 0; - this.saturation = 0; - this.value = 0; - this.lightness = 0; - this.format = 'HWB'; - } - - function RGBColor(r, g, b) { - var color = new Color(); - color.setRGBA(r, g, b, 1); - return color; - } - - function RGBAColor(r, g, b, a) { - var color = new Color(); - color.setRGBA(r, g, b, a); - return color; - } - - function HWBColor(h, s, v) { - var color = new Color(); - color.setHWB(h, s, v); - return color; - } - - function HWBAColor(h, s, v, a) { - var color = new Color(); - color.setHWB(h, s, v); - color.a = a; - return color; - } - - function HSLColor(h, s, l) { - var color = new Color(); - color.setHSL(h, s, l); - return color; - } - - function HSLAColor(h, s, l, a) { - var color = new Color(); - color.setHSL(h, s, l); - color.a = a; - return color; - } - - Color.prototype.copy = function copy(obj) { - if(obj instanceof Color !== true) { - console.log('Typeof parameter not Color'); - return; - } - - this.r = obj.r; - this.g = obj.g; - this.b = obj.b; - this.a = obj.a; - this.hue = obj.hue; - this.saturation = obj.saturation; - this.value = obj.value; - this.format = '' + obj.format; - this.lightness = obj.lightness; - }; - - Color.prototype.setFormat = function setFormat(format) { - if (format === 'HWB') - this.format = 'HWB'; - if (format === 'HSL') - this.format = 'HSL'; - }; - - /*========== Methods to set Color Properties ==========*/ - - Color.prototype.isValidRGBValue = function isValidRGBValue(value) { - return (typeof(value) === 'number' && isNaN(value) === false && - value >= 0 && value <= 255); - }; - - Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) { - if (this.isValidRGBValue(red) === false || - this.isValidRGBValue(green) === false || - this.isValidRGBValue(blue) === false) - return; - - this.r = red | 0; - this.g = green | 0; - this.b = blue | 0; - - if (this.isValidRGBValue(alpha) === true) - this.a = alpha | 0; - }; - - Color.prototype.setByName = function setByName(name, value) { - if (name === 'r' || name === 'g' || name === 'b') { - if(this.isValidRGBValue(value) === false) - return; - - this[name] = value; - this.updateHSX(); - } - }; - - Color.prototype.setHWB = function setHWB(hue, saturation, value) { - this.hue = hue; - this.saturation = saturation; - this.value = value; - this.HWBtoRGB(); - }; - - Color.prototype.setHSL = function setHSL(hue, saturation, lightness) { - this.hue = hue; - this.saturation = saturation; - this.lightness = lightness; - this.HSLtoRGB(); - }; - - Color.prototype.setHue = function setHue(value) { - if (typeof(value) !== 'number' || isNaN(value) === true || - value < 0 || value > 359) - return; - this.hue = value; - this.updateRGB(); - }; - - Color.prototype.setSaturation = function setSaturation(value) { - if (typeof(value) !== 'number' || isNaN(value) === true || - value < 0 || value > 100) - return; - this.saturation = value; - this.updateRGB(); - }; - - Color.prototype.setValue = function setValue(value) { - if (typeof(value) !== 'number' || isNaN(value) === true || - value < 0 || value > 100) - return; - this.value = value; - this.HWBtoRGB(); - }; - - Color.prototype.setLightness = function setLightness(value) { - if (typeof(value) !== 'number' || isNaN(value) === true || - value < 0 || value > 100) - return; - this.lightness = value; - this.HSLtoRGB(); - }; - - Color.prototype.setHexa = function setHexa(value) { - var valid = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value); - - if (valid !== true) - return; - - if (value[0] === '#') - value = value.slice(1, value.length); - - if (value.length === 3) - value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,'$1$1$2$2$3$3'); - - this.r = parseInt(value.substr(0, 2), 16); - this.g = parseInt(value.substr(2, 2), 16); - this.b = parseInt(value.substr(4, 2), 16); - - this.alpha = 1; - this.updateHSX(); - }; - - /*========== Conversion Methods ==========*/ - - Color.prototype.convertToHSL = function convertToHSL() { - if (this.format === 'HSL') - return; - - this.setFormat('HSL'); - this.RGBtoHSL(); - }; - - Color.prototype.convertToHWB = function convertToHWB() { - if (this.format === 'HWB') - return; - - this.setFormat('HWB'); - this.RGBtoHWB(); - }; - - /*========== Update Methods ==========*/ - - Color.prototype.updateRGB = function updateRGB() { - if (this.format === 'HWB') { - this.HWBtoRGB(); - return; - } - - if (this.format === 'HSL') { - this.HSLtoRGB(); - return; - } - }; - - Color.prototype.updateHSX = function updateHSX() { - if (this.format === 'HWB') { - this.RGBtoHWB(); - return; - } - - if (this.format === 'HSL') { - this.RGBtoHSL(); - return; - } - }; - - Color.prototype.HWBtoRGB = function HWBtoRGB() { - var sat = this.saturation / 100; - var value = this.value / 100; - var C = sat * value; - var H = this.hue / 60; - var X = C * (1 - Math.abs(H % 2 - 1)); - var m = value - C; - var precision = 255; - - C = (C + m) * precision | 0; - X = (X + m) * precision | 0; - m = m * precision | 0; - - if (H >= 0 && H < 1) { this.setRGBA(C, X, m); return; } - if (H >= 1 && H < 2) { this.setRGBA(X, C, m); return; } - if (H >= 2 && H < 3) { this.setRGBA(m, C, X); return; } - if (H >= 3 && H < 4) { this.setRGBA(m, X, C); return; } - if (H >= 4 && H < 5) { this.setRGBA(X, m, C); return; } - if (H >= 5 && H < 6) { this.setRGBA(C, m, X); return; } - }; - - Color.prototype.HSLtoRGB = function HSLtoRGB() { - var sat = this.saturation / 100; - var light = this.lightness / 100; - var C = sat * (1 - Math.abs(2 * light - 1)); - var H = this.hue / 60; - var X = C * (1 - Math.abs(H % 2 - 1)); - var m = light - C/2; - var precision = 255; - - C = (C + m) * precision | 0; - X = (X + m) * precision | 0; - m = m * precision | 0; - - if (H >= 0 && H < 1) { this.setRGBA(C, X, m); return; } - if (H >= 1 && H < 2) { this.setRGBA(X, C, m); return; } - if (H >= 2 && H < 3) { this.setRGBA(m, C, X); return; } - if (H >= 3 && H < 4) { this.setRGBA(m, X, C); return; } - if (H >= 4 && H < 5) { this.setRGBA(X, m, C); return; } - if (H >= 5 && H < 6) { this.setRGBA(C, m, X); return; } - }; - - Color.prototype.RGBtoHWB = function RGBtoHWB() { - var red = this.r / 255; - var green = this.g / 255; - var blue = this.b / 255; - - var cmax = Math.max(red, green, blue); - var cmin = Math.min(red, green, blue); - var delta = cmax - cmin; - var hue = 0; - var saturation = 0; - - if (delta) { - if (cmax === red ) { hue = ((green - blue) / delta); } - if (cmax === green ) { hue = 2 + (blue - red) / delta; } - if (cmax === blue ) { hue = 4 + (red - green) / delta; } - if (cmax) saturation = delta / cmax; - } - - this.hue = 60 * hue | 0; - if (this.hue < 0) this.hue += 360; - this.saturation = (saturation * 100) | 0; - this.value = (cmax * 100) | 0; - }; - - Color.prototype.RGBtoHSL = function RGBtoHSL() { - var red = this.r / 255; - var green = this.g / 255; - var blue = this.b / 255; - - var cmax = Math.max(red, green, blue); - var cmin = Math.min(red, green, blue); - var delta = cmax - cmin; - var hue = 0; - var saturation = 0; - var lightness = (cmax + cmin) / 2; - var X = (1 - Math.abs(2 * lightness - 1)); - - if (delta) { - if (cmax === red ) { hue = ((green - blue) / delta); } - if (cmax === green ) { hue = 2 + (blue - red) / delta; } - if (cmax === blue ) { hue = 4 + (red - green) / delta; } - if (cmax) saturation = delta / X; - } - - this.hue = 60 * hue | 0; - if (this.hue < 0) this.hue += 360; - this.saturation = (saturation * 100) | 0; - this.lightness = (lightness * 100) | 0; - }; - - /*========== Get Methods ==========*/ - - Color.prototype.getHexa = function getHexa() { - var r = this.r.toString(16); - var g = this.g.toString(16); - var b = this.b.toString(16); - if (this.r < 16) r = '0' + r; - if (this.g < 16) g = '0' + g; - if (this.b < 16) b = '0' + b; - var value = '#' + r + g + b; - return value.toUpperCase(); - }; - - Color.prototype.getRGBA = function getRGBA() { - - var rgb = '(' + this.r + ' ' + this.g + ' ' + this.b; - var a = ''; - var v = ''; - var x = parseFloat(this.a); - if (x !== 1) { - a = ''; - v = ' / ' + x; - } - - var value = 'rgb' + a + rgb + v + ')'; - return value; - }; - - Color.prototype.getHSLA = function getHSLA() { - if (this.format === 'HWB') { - var color = new Color(this); - color.setFormat('HSL'); - color.updateHSX(); - return color.getHSLA(); - } - - var a = ''; - var v = ''; - var hsl = '(' + this.hue + ' ' + this.saturation + '% ' + this.lightness +'%'; - var x = parseFloat(this.a); - if (x !== 1) { - a = ''; - v = ' / ' + x; - } - - var value = 'hsl' + a + hsl + v + ')'; - return value; - }; - - Color.prototype.getColor = function getColor() { - if (this.a | 0 === 1) - return this.getHexa(); - return this.getRGBA(); - }; - - /*=======================================================================*/ - /*=======================================================================*/ - - /*========== Capture Mouse Movement ==========*/ - - var setMouseTracking = function setMouseTracking(elem, callback) { - elem.addEventListener('mousedown', function(e) { - callback(e); - document.addEventListener('mousemove', callback); - }); - - document.addEventListener('mouseup', function(e) { - document.removeEventListener('mousemove', callback); - }); - }; - - /*====================*/ - // Color Picker Class - /*====================*/ - - function ColorPicker(node) { - this.color = new Color(); - this.node = node; - this.subscribers = []; - - var type = this.node.getAttribute('data-mode'); - var topic = this.node.getAttribute('data-topic'); - - this.topic = topic; - this.picker_mode = (type === 'HSL') ? 'HSL' : 'HWB'; - this.color.setFormat(this.picker_mode); - - this.createPickingArea(); - this.createHueArea(); - - this.newInputComponent('H', 'hue', this.inputChangeHue.bind(this)); - this.newInputComponent('S', 'saturation', this.inputChangeSaturation.bind(this)); - this.newInputComponent('V', 'value', this.inputChangeValue.bind(this)); - this.newInputComponent('L', 'lightness', this.inputChangeLightness.bind(this)); - - this.createAlphaArea(); - - this.newInputComponent('R', 'red', this.inputChangeRed.bind(this)); - this.newInputComponent('G', 'green', this.inputChangeGreen.bind(this)); - this.newInputComponent('B', 'blue', this.inputChangeBlue.bind(this)); - - this.createPreviewBox(); - this.createChangeModeButton(); - - this.newInputComponent('alpha', 'alpha', this.inputChangeAlpha.bind(this)); - this.newInputComponent('hexa', 'hexa', this.inputChangeHexa.bind(this)); - - this.setColor(this.color); - pickers[topic] = this; - } - - /*************************************************************************/ - // Function for generating the color-picker - /*************************************************************************/ - - ColorPicker.prototype.createPickingArea = function createPickingArea() { - var area = document.createElement('div'); - var picker = document.createElement('div'); - - area.className = 'picking-area'; - picker.className = 'picker'; - - this.picking_area = area; - this.color_picker = picker; - setMouseTracking(area, this.updateColor.bind(this)); - - area.appendChild(picker); - this.node.appendChild(area); - }; - - ColorPicker.prototype.createHueArea = function createHueArea() { - var area = document.createElement('div'); - var picker = document.createElement('div'); - - area.className = 'hue'; - picker.className ='slider-picker'; - - this.hue_area = area; - this.hue_picker = picker; - setMouseTracking(area, this.updateHueSlider.bind(this)); - - area.appendChild(picker); - this.node.appendChild(area); - }; - - ColorPicker.prototype.createAlphaArea = function createAlphaArea() { - var area = document.createElement('div'); - var mask = document.createElement('div'); - var picker = document.createElement('div'); - - area.className = 'alpha'; - mask.className = 'alpha-mask'; - picker.className = 'slider-picker'; - - this.alpha_area = area; - this.alpha_mask = mask; - this.alpha_picker = picker; - setMouseTracking(area, this.updateAlphaSlider.bind(this)); - - area.appendChild(mask); - mask.appendChild(picker); - this.node.appendChild(area); - }; - - ColorPicker.prototype.createPreviewBox = function createPreviewBox(e) { - var preview_box = document.createElement('div'); - var preview_color = document.createElement('div'); - - preview_box.className = 'preview'; - preview_color.className = 'preview-color'; - - this.preview_color = preview_color; - - preview_box.appendChild(preview_color); - this.node.appendChild(preview_box); - }; - - ColorPicker.prototype.newInputComponent = function newInputComponent(title, topic, onChangeFunc) { - var wrapper = document.createElement('div'); - var input = document.createElement('input'); - var info = document.createElement('span'); - - wrapper.className = 'input'; - wrapper.setAttribute('data-topic', topic); - info.textContent = title; - info.className = 'name'; - input.setAttribute('type', 'text'); - - wrapper.appendChild(info); - wrapper.appendChild(input); - this.node.appendChild(wrapper); - - input.addEventListener('change', onChangeFunc); - input.addEventListener('click', function() { - this.select(); - }); - - this.subscribe(topic, function(value) { - input.value = value; - }); - }; - - ColorPicker.prototype.createChangeModeButton = function createChangeModeButton() { - - var button = document.createElement('div'); - button.className = 'switch_mode'; - button.addEventListener('click', function() { - if (this.picker_mode === 'HWB') - this.setPickerMode('HSL'); - else - this.setPickerMode('HWB'); - - }.bind(this)); - - this.node.appendChild(button); - }; - - /*************************************************************************/ - // Updates properties of UI elements - /*************************************************************************/ - - ColorPicker.prototype.updateColor = function updateColor(e) { - var x = e.pageX - this.picking_area.offsetLeft; - var y = e.pageY - this.picking_area.offsetTop; - var picker_offset = 5; - - // width and height should be the same - var size = this.picking_area.clientWidth; - - if (x > size) x = size; - if (y > size) y = size; - if (x < 0) x = 0; - if (y < 0) y = 0; - - var value = 100 - (y * 100 / size) | 0; - var saturation = x * 100 / size | 0; - - if (this.picker_mode === 'HWB') - this.color.setHWB(this.color.hue, saturation, value); - if (this.picker_mode === 'HSL') - this.color.setHSL(this.color.hue, saturation, value); - - this.color_picker.style.left = x - picker_offset + 'px'; - this.color_picker.style.top = y - picker_offset + 'px'; - - this.updateAlphaGradient(); - this.updatePreviewColor(); - - this.notify('value', value); - this.notify('lightness', value); - this.notify('saturation', saturation); - - this.notify('red', this.color.r); - this.notify('green', this.color.g); - this.notify('blue', this.color.b); - this.notify('hexa', this.color.getHexa()); - - notify(this.topic, this.color); - }; - - ColorPicker.prototype.updateHueSlider = function updateHueSlider(e) { - var x = e.pageX - this.hue_area.offsetLeft; - var width = this.hue_area.clientWidth; - - if (x < 0) x = 0; - if (x > width) x = width; - - // TODO 360 => 359 - var hue = ((359 * x) / width) | 0; - // if (hue === 360) hue = 359; - - this.updateSliderPosition(this.hue_picker, x); - this.setHue(hue); - }; - - ColorPicker.prototype.updateAlphaSlider = function updateAlphaSlider(e) { - var x = e.pageX - this.alpha_area.offsetLeft; - var width = this.alpha_area.clientWidth; - - if (x < 0) x = 0; - if (x > width) x = width; - - this.color.a = (x / width).toFixed(2); - - this.updateSliderPosition(this.alpha_picker, x); - this.updatePreviewColor(); - - this.notify('alpha', this.color.a); - notify(this.topic, this.color); - }; - - ColorPicker.prototype.setHue = function setHue(value) { - this.color.setHue(value); - - this.updatePickerBackground(); - this.updateAlphaGradient(); - this.updatePreviewColor(); - - this.notify('red', this.color.r); - this.notify('green', this.color.g); - this.notify('blue', this.color.b); - this.notify('hexa', this.color.getHexa()); - this.notify('hue', this.color.hue); - - notify(this.topic, this.color); - }; - - // Updates when one of Saturation/Value/Lightness changes - ColorPicker.prototype.updateSLV = function updateSLV() { - this.updatePickerPosition(); - this.updateAlphaGradient(); - this.updatePreviewColor(); - - this.notify('red', this.color.r); - this.notify('green', this.color.g); - this.notify('blue', this.color.b); - this.notify('hexa', this.color.getHexa()); - - notify(this.topic, this.color); - }; - - /*************************************************************************/ - // Update positions of various UI elements - /*************************************************************************/ - - ColorPicker.prototype.updatePickerPosition = function updatePickerPosition() { - var size = this.picking_area.clientWidth; - var value = 0; - var offset = 5; - - if (this.picker_mode === 'HWB') - value = this.color.value; - if (this.picker_mode === 'HSL') - value = this.color.lightness; - - var x = (this.color.saturation * size / 100) | 0; - var y = size - (value * size / 100) | 0; - - this.color_picker.style.left = x - offset + 'px'; - this.color_picker.style.top = y - offset + 'px'; - }; - - ColorPicker.prototype.updateSliderPosition = function updateSliderPosition(elem, pos) { - elem.style.left = Math.max(pos - 3, -2) + 'px'; - }; - - ColorPicker.prototype.updateHuePicker = function updateHuePicker() { - var size = this.hue_area.clientWidth; - var offset = 1; - var pos = (this.color.hue * size / 360 ) | 0; - this.hue_picker.style.left = pos - offset + 'px'; - }; - - ColorPicker.prototype.updateAlphaPicker = function updateAlphaPicker() { - var size = this.alpha_area.clientWidth; - var offset = 1; - var pos = (this.color.a * size) | 0; - this.alpha_picker.style.left = pos - offset + 'px'; - }; - - /*************************************************************************/ - // Update background colors - /*************************************************************************/ - - ColorPicker.prototype.updatePickerBackground = function updatePickerBackground() { - var nc = new Color(this.color); - nc.setHWB(nc.hue, 100, 100); - this.picking_area.style.backgroundColor = nc.getHexa(); - }; - - ColorPicker.prototype.updateAlphaGradient = function updateAlphaGradient() { - this.alpha_mask.style.backgroundColor = this.color.getHexa(); - }; - - ColorPicker.prototype.updatePreviewColor = function updatePreviewColor() { - this.preview_color.style.backgroundColor = this.color.getColor(); - }; - - /*************************************************************************/ - // Update input elements - /*************************************************************************/ - - ColorPicker.prototype.inputChangeHue = function inputChangeHue(e) { - var value = parseInt(e.target.value); - this.setHue(value); - this.updateHuePicker(); - }; - - ColorPicker.prototype.inputChangeSaturation = function inputChangeSaturation(e) { - var value = parseInt(e.target.value); - this.color.setSaturation(value); - e.target.value = this.color.saturation; - this.updateSLV(); - }; - - ColorPicker.prototype.inputChangeValue = function inputChangeValue(e) { - var value = parseInt(e.target.value); - this.color.setValue(value); - e.target.value = this.color.value; - this.updateSLV(); - }; - - ColorPicker.prototype.inputChangeLightness = function inputChangeLightness(e) { - var value = parseInt(e.target.value); - this.color.setLightness(value); - e.target.value = this.color.lightness; - this.updateSLV(); - }; - - ColorPicker.prototype.inputChangeRed = function inputChangeRed(e) { - var value = parseInt(e.target.value); - this.color.setByName('r', value); - e.target.value = this.color.r; - this.setColor(this.color); - }; - - ColorPicker.prototype.inputChangeGreen = function inputChangeGreen(e) { - var value = parseInt(e.target.value); - this.color.setByName('g', value); - e.target.value = this.color.g; - this.setColor(this.color); - }; - - ColorPicker.prototype.inputChangeBlue = function inputChangeBlue(e) { - var value = parseInt(e.target.value); - this.color.setByName('b', value); - e.target.value = this.color.b; - this.setColor(this.color); - }; - - ColorPicker.prototype.inputChangeAlpha = function inputChangeAlpha(e) { - var value = parseFloat(e.target.value); - - if (typeof value === 'number' && isNaN(value) === false && - value >= 0 && value <= 1) - this.color.a = value.toFixed(2); - - e.target.value = this.color.a; - this.updateAlphaPicker(); - }; - - ColorPicker.prototype.inputChangeHexa = function inputChangeHexa(e) { - var value = e.target.value; - this.color.setHexa(value); - this.setColor(this.color); - }; - - /*************************************************************************/ - // Internal Pub/Sub - /*************************************************************************/ - - ColorPicker.prototype.subscribe = function subscribe(topic, callback) { - this.subscribers[topic] = callback; - }; - - ColorPicker.prototype.notify = function notify(topic, value) { - if (this.subscribers[topic]) - this.subscribers[topic](value); - }; - - /*************************************************************************/ - // Set Picker Properties - /*************************************************************************/ - - ColorPicker.prototype.setColor = function setColor(color) { - if(color instanceof Color !== true) { - console.log('Typeof parameter not Color'); - return; - } - - if (color.format !== this.picker_mode) { - color.setFormat(this.picker_mode); - color.updateHSX(); - } - - this.color.copy(color); - this.updateHuePicker(); - this.updatePickerPosition(); - this.updatePickerBackground(); - this.updateAlphaPicker(); - this.updateAlphaGradient(); - this.updatePreviewColor(); - - this.notify('red', this.color.r); - this.notify('green', this.color.g); - this.notify('blue', this.color.b); - - this.notify('hue', this.color.hue); - this.notify('saturation', this.color.saturation); - this.notify('value', this.color.value); - this.notify('lightness', this.color.lightness); - - this.notify('alpha', this.color.a); - this.notify('hexa', this.color.getHexa()); - notify(this.topic, this.color); - }; - - ColorPicker.prototype.setPickerMode = function setPickerMode(mode) { - if (mode !== 'HWB' && mode !== 'HSL') - return; - - this.picker_mode = mode; - this.node.setAttribute('data-mode', this.picker_mode); - this.setColor(this.color); - }; - - /*************************************************************************/ - // UNUSED - /*************************************************************************/ - - var setPickerMode = function setPickerMode(topic, mode) { - if (pickers[topic]) - pickers[topic].setPickerMode(mode); - }; - - var setColor = function setColor(topic, color) { - if (pickers[topic]) - pickers[topic].setColor(color); - }; - - var getColor = function getColor(topic) { - if (pickers[topic]) - return new Color(pickers[topic].color); - }; - - var subscribe = function subscribe(topic, callback) { - if (subscribers[topic] === undefined) - subscribers[topic] = []; - - subscribers[topic].push(callback); - }; - - var unsubscribe = function unsubscribe(callback) { - subscribers.indexOf(callback); - subscribers.splice(index, 1); - }; - - var notify = function notify(topic, value) { - if (subscribers[topic] === undefined || subscribers[topic].length === 0) - return; - - var color = new Color(value); - for (var i in subscribers[topic]) - subscribers[topic][i](color); - }; - - var init = function init() { - var elem = document.querySelectorAll('.ui-color-picker'); - var size = elem.length; - for (var i = 0; i < size; i++) - new ColorPicker(elem[i]); - }; - - return { - init : init, - Color : Color, - RGBColor : RGBColor, - RGBAColor : RGBAColor, - HWBColor : HWBColor, - HWBAColor : HWBAColor, - HSLColor : HSLColor, - HSLAColor : HSLAColor, - setColor : setColor, - getColor : getColor, - subscribe : subscribe, - unsubscribe : unsubscribe, - setPickerMode : setPickerMode - }; - + function getElemById(id) { + return document.getElementById(id); + } + + var subscribers = []; + var pickers = []; + + /** + * RGBA Color class + * + * HWB/HSB and HSL (hue, saturation, value / brightness, lightness) + * @param hue 0-360 + * @param saturation 0-100 + * @param value 0-100 + * @param lightness 0-100 + */ + + function Color(color) { + if (color instanceof Color === true) { + this.copy(color); + return; + } + + this.r = 0; + this.g = 0; + this.b = 0; + this.a = 1; + this.hue = 0; + this.saturation = 0; + this.value = 0; + this.lightness = 0; + this.format = "HWB"; + } + + function RGBColor(r, g, b) { + var color = new Color(); + color.setRGBA(r, g, b, 1); + return color; + } + + function RGBAColor(r, g, b, a) { + var color = new Color(); + color.setRGBA(r, g, b, a); + return color; + } + + function HWBColor(h, s, v) { + var color = new Color(); + color.setHWB(h, s, v); + return color; + } + + function HWBAColor(h, s, v, a) { + var color = new Color(); + color.setHWB(h, s, v); + color.a = a; + return color; + } + + function HSLColor(h, s, l) { + var color = new Color(); + color.setHSL(h, s, l); + return color; + } + + function HSLAColor(h, s, l, a) { + var color = new Color(); + color.setHSL(h, s, l); + color.a = a; + return color; + } + + Color.prototype.copy = function copy(obj) { + if (obj instanceof Color !== true) { + console.log("Typeof parameter not Color"); + return; + } + + this.r = obj.r; + this.g = obj.g; + this.b = obj.b; + this.a = obj.a; + this.hue = obj.hue; + this.saturation = obj.saturation; + this.value = obj.value; + this.format = "" + obj.format; + this.lightness = obj.lightness; + }; + + Color.prototype.setFormat = function setFormat(format) { + if (format === "HWB") this.format = "HWB"; + if (format === "HSL") this.format = "HSL"; + }; + + /*========== Methods to set Color Properties ==========*/ + + Color.prototype.isValidRGBValue = function isValidRGBValue(value) { + return ( + typeof value === "number" && + isNaN(value) === false && + value >= 0 && + value <= 255 + ); + }; + + Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) { + if ( + this.isValidRGBValue(red) === false || + this.isValidRGBValue(green) === false || + this.isValidRGBValue(blue) === false + ) + return; + + this.r = red | 0; + this.g = green | 0; + this.b = blue | 0; + + if (this.isValidRGBValue(alpha) === true) this.a = alpha | 0; + }; + + Color.prototype.setByName = function setByName(name, value) { + if (name === "r" || name === "g" || name === "b") { + if (this.isValidRGBValue(value) === false) return; + + this[name] = value; + this.updateHSX(); + } + }; + + Color.prototype.setHWB = function setHWB(hue, saturation, value) { + this.hue = hue; + this.saturation = saturation; + this.value = value; + this.HWBtoRGB(); + }; + + Color.prototype.setHSL = function setHSL(hue, saturation, lightness) { + this.hue = hue; + this.saturation = saturation; + this.lightness = lightness; + this.HSLtoRGB(); + }; + + Color.prototype.setHue = function setHue(value) { + if ( + typeof value !== "number" || + isNaN(value) === true || + value < 0 || + value > 359 + ) + return; + this.hue = value; + this.updateRGB(); + }; + + Color.prototype.setSaturation = function setSaturation(value) { + if ( + typeof value !== "number" || + isNaN(value) === true || + value < 0 || + value > 100 + ) + return; + this.saturation = value; + this.updateRGB(); + }; + + Color.prototype.setValue = function setValue(value) { + if ( + typeof value !== "number" || + isNaN(value) === true || + value < 0 || + value > 100 + ) + return; + this.value = value; + this.HWBtoRGB(); + }; + + Color.prototype.setLightness = function setLightness(value) { + if ( + typeof value !== "number" || + isNaN(value) === true || + value < 0 || + value > 100 + ) + return; + this.lightness = value; + this.HSLtoRGB(); + }; + + Color.prototype.setHexa = function setHexa(value) { + var valid = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value); + + if (valid !== true) return; + + if (value[0] === "#") value = value.slice(1, value.length); + + if (value.length === 3) + value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i, "$1$1$2$2$3$3"); + + this.r = parseInt(value.substr(0, 2), 16); + this.g = parseInt(value.substr(2, 2), 16); + this.b = parseInt(value.substr(4, 2), 16); + + this.alpha = 1; + this.updateHSX(); + }; + + /*========== Conversion Methods ==========*/ + + Color.prototype.convertToHSL = function convertToHSL() { + if (this.format === "HSL") return; + + this.setFormat("HSL"); + this.RGBtoHSL(); + }; + + Color.prototype.convertToHWB = function convertToHWB() { + if (this.format === "HWB") return; + + this.setFormat("HWB"); + this.RGBtoHWB(); + }; + + /*========== Update Methods ==========*/ + + Color.prototype.updateRGB = function updateRGB() { + if (this.format === "HWB") { + this.HWBtoRGB(); + return; + } + + if (this.format === "HSL") { + this.HSLtoRGB(); + return; + } + }; + + Color.prototype.updateHSX = function updateHSX() { + if (this.format === "HWB") { + this.RGBtoHWB(); + return; + } + + if (this.format === "HSL") { + this.RGBtoHSL(); + return; + } + }; + + Color.prototype.HWBtoRGB = function HWBtoRGB() { + var sat = this.saturation / 100; + var value = this.value / 100; + var C = sat * value; + var H = this.hue / 60; + var X = C * (1 - Math.abs((H % 2) - 1)); + var m = value - C; + var precision = 255; + + C = ((C + m) * precision) | 0; + X = ((X + m) * precision) | 0; + m = (m * precision) | 0; + + if (H >= 0 && H < 1) { + this.setRGBA(C, X, m); + return; + } + if (H >= 1 && H < 2) { + this.setRGBA(X, C, m); + return; + } + if (H >= 2 && H < 3) { + this.setRGBA(m, C, X); + return; + } + if (H >= 3 && H < 4) { + this.setRGBA(m, X, C); + return; + } + if (H >= 4 && H < 5) { + this.setRGBA(X, m, C); + return; + } + if (H >= 5 && H < 6) { + this.setRGBA(C, m, X); + return; + } + }; + + Color.prototype.HSLtoRGB = function HSLtoRGB() { + var sat = this.saturation / 100; + var light = this.lightness / 100; + var C = sat * (1 - Math.abs(2 * light - 1)); + var H = this.hue / 60; + var X = C * (1 - Math.abs((H % 2) - 1)); + var m = light - C / 2; + var precision = 255; + + C = ((C + m) * precision) | 0; + X = ((X + m) * precision) | 0; + m = (m * precision) | 0; + + if (H >= 0 && H < 1) { + this.setRGBA(C, X, m); + return; + } + if (H >= 1 && H < 2) { + this.setRGBA(X, C, m); + return; + } + if (H >= 2 && H < 3) { + this.setRGBA(m, C, X); + return; + } + if (H >= 3 && H < 4) { + this.setRGBA(m, X, C); + return; + } + if (H >= 4 && H < 5) { + this.setRGBA(X, m, C); + return; + } + if (H >= 5 && H < 6) { + this.setRGBA(C, m, X); + return; + } + }; + + Color.prototype.RGBtoHWB = function RGBtoHWB() { + var red = this.r / 255; + var green = this.g / 255; + var blue = this.b / 255; + + var cmax = Math.max(red, green, blue); + var cmin = Math.min(red, green, blue); + var delta = cmax - cmin; + var hue = 0; + var saturation = 0; + + if (delta) { + if (cmax === red) { + hue = (green - blue) / delta; + } + if (cmax === green) { + hue = 2 + (blue - red) / delta; + } + if (cmax === blue) { + hue = 4 + (red - green) / delta; + } + if (cmax) saturation = delta / cmax; + } + + this.hue = (60 * hue) | 0; + if (this.hue < 0) this.hue += 360; + this.saturation = (saturation * 100) | 0; + this.value = (cmax * 100) | 0; + }; + + Color.prototype.RGBtoHSL = function RGBtoHSL() { + var red = this.r / 255; + var green = this.g / 255; + var blue = this.b / 255; + + var cmax = Math.max(red, green, blue); + var cmin = Math.min(red, green, blue); + var delta = cmax - cmin; + var hue = 0; + var saturation = 0; + var lightness = (cmax + cmin) / 2; + var X = 1 - Math.abs(2 * lightness - 1); + + if (delta) { + if (cmax === red) { + hue = (green - blue) / delta; + } + if (cmax === green) { + hue = 2 + (blue - red) / delta; + } + if (cmax === blue) { + hue = 4 + (red - green) / delta; + } + if (cmax) saturation = delta / X; + } + + this.hue = (60 * hue) | 0; + if (this.hue < 0) this.hue += 360; + this.saturation = (saturation * 100) | 0; + this.lightness = (lightness * 100) | 0; + }; + + /*========== Get Methods ==========*/ + + Color.prototype.getHexa = function getHexa() { + var r = this.r.toString(16); + var g = this.g.toString(16); + var b = this.b.toString(16); + if (this.r < 16) r = "0" + r; + if (this.g < 16) g = "0" + g; + if (this.b < 16) b = "0" + b; + var value = "#" + r + g + b; + return value.toUpperCase(); + }; + + Color.prototype.getRGBA = function getRGBA() { + var rgb = "(" + this.r + " " + this.g + " " + this.b; + var a = ""; + var v = ""; + var x = parseFloat(this.a); + if (x !== 1) { + a = ""; + v = " / " + x; + } + + var value = "rgb" + a + rgb + v + ")"; + return value; + }; + + Color.prototype.getHSLA = function getHSLA() { + if (this.format === "HWB") { + var color = new Color(this); + color.setFormat("HSL"); + color.updateHSX(); + return color.getHSLA(); + } + + var a = ""; + var v = ""; + var hsl = + "(" + this.hue + " " + this.saturation + "% " + this.lightness + "%"; + var x = parseFloat(this.a); + if (x !== 1) { + a = ""; + v = " / " + x; + } + + var value = "hsl" + a + hsl + v + ")"; + return value; + }; + + Color.prototype.getColor = function getColor() { + if (this.a | (0 === 1)) return this.getHexa(); + return this.getRGBA(); + }; + + /*=======================================================================*/ + /*=======================================================================*/ + + /*========== Capture Mouse Movement ==========*/ + + var setMouseTracking = function setMouseTracking(elem, callback) { + elem.addEventListener("mousedown", function (e) { + callback(e); + document.addEventListener("mousemove", callback); + }); + + document.addEventListener("mouseup", function (e) { + document.removeEventListener("mousemove", callback); + }); + }; + + /*====================*/ + // Color Picker Class + /*====================*/ + + function ColorPicker(node) { + this.color = new Color(); + this.node = node; + this.subscribers = []; + + var type = this.node.getAttribute("data-mode"); + var topic = this.node.getAttribute("data-topic"); + + this.topic = topic; + this.picker_mode = type === "HSL" ? "HSL" : "HWB"; + this.color.setFormat(this.picker_mode); + + this.createPickingArea(); + this.createHueArea(); + + this.newInputComponent("H", "hue", this.inputChangeHue.bind(this)); + this.newInputComponent( + "S", + "saturation", + this.inputChangeSaturation.bind(this), + ); + this.newInputComponent("V", "value", this.inputChangeValue.bind(this)); + this.newInputComponent( + "L", + "lightness", + this.inputChangeLightness.bind(this), + ); + + this.createAlphaArea(); + + this.newInputComponent("R", "red", this.inputChangeRed.bind(this)); + this.newInputComponent("G", "green", this.inputChangeGreen.bind(this)); + this.newInputComponent("B", "blue", this.inputChangeBlue.bind(this)); + + this.createPreviewBox(); + this.createChangeModeButton(); + + this.newInputComponent("alpha", "alpha", this.inputChangeAlpha.bind(this)); + this.newInputComponent("hexa", "hexa", this.inputChangeHexa.bind(this)); + + this.setColor(this.color); + pickers[topic] = this; + } + + /*************************************************************************/ + // Function for generating the color-picker + /*************************************************************************/ + + ColorPicker.prototype.createPickingArea = function createPickingArea() { + var area = document.createElement("div"); + var picker = document.createElement("div"); + + area.className = "picking-area"; + picker.className = "picker"; + + this.picking_area = area; + this.color_picker = picker; + setMouseTracking(area, this.updateColor.bind(this)); + + area.appendChild(picker); + this.node.appendChild(area); + }; + + ColorPicker.prototype.createHueArea = function createHueArea() { + var area = document.createElement("div"); + var picker = document.createElement("div"); + + area.className = "hue"; + picker.className = "slider-picker"; + + this.hue_area = area; + this.hue_picker = picker; + setMouseTracking(area, this.updateHueSlider.bind(this)); + + area.appendChild(picker); + this.node.appendChild(area); + }; + + ColorPicker.prototype.createAlphaArea = function createAlphaArea() { + var area = document.createElement("div"); + var mask = document.createElement("div"); + var picker = document.createElement("div"); + + area.className = "alpha"; + mask.className = "alpha-mask"; + picker.className = "slider-picker"; + + this.alpha_area = area; + this.alpha_mask = mask; + this.alpha_picker = picker; + setMouseTracking(area, this.updateAlphaSlider.bind(this)); + + area.appendChild(mask); + mask.appendChild(picker); + this.node.appendChild(area); + }; + + ColorPicker.prototype.createPreviewBox = function createPreviewBox(e) { + var preview_box = document.createElement("div"); + var preview_color = document.createElement("div"); + + preview_box.className = "preview"; + preview_color.className = "preview-color"; + + this.preview_color = preview_color; + + preview_box.appendChild(preview_color); + this.node.appendChild(preview_box); + }; + + ColorPicker.prototype.newInputComponent = function newInputComponent( + title, + topic, + onChangeFunc, + ) { + var wrapper = document.createElement("div"); + var input = document.createElement("input"); + var info = document.createElement("span"); + + wrapper.className = "input"; + wrapper.setAttribute("data-topic", topic); + info.textContent = title; + info.className = "name"; + input.setAttribute("type", "text"); + + wrapper.appendChild(info); + wrapper.appendChild(input); + this.node.appendChild(wrapper); + + input.addEventListener("change", onChangeFunc); + input.addEventListener("click", function () { + this.select(); + }); + + this.subscribe(topic, function (value) { + input.value = value; + }); + }; + + ColorPicker.prototype.createChangeModeButton = + function createChangeModeButton() { + var button = document.createElement("div"); + button.className = "switch_mode"; + button.addEventListener( + "click", + function () { + if (this.picker_mode === "HWB") this.setPickerMode("HSL"); + else this.setPickerMode("HWB"); + }.bind(this), + ); + + this.node.appendChild(button); + }; + + /*************************************************************************/ + // Updates properties of UI elements + /*************************************************************************/ + + ColorPicker.prototype.updateColor = function updateColor(e) { + var x = e.pageX - this.picking_area.offsetLeft; + var y = e.pageY - this.picking_area.offsetTop; + var picker_offset = 5; + + // width and height should be the same + var size = this.picking_area.clientWidth; + + if (x > size) x = size; + if (y > size) y = size; + if (x < 0) x = 0; + if (y < 0) y = 0; + + var value = (100 - (y * 100) / size) | 0; + var saturation = ((x * 100) / size) | 0; + + if (this.picker_mode === "HWB") + this.color.setHWB(this.color.hue, saturation, value); + if (this.picker_mode === "HSL") + this.color.setHSL(this.color.hue, saturation, value); + + this.color_picker.style.left = x - picker_offset + "px"; + this.color_picker.style.top = y - picker_offset + "px"; + + this.updateAlphaGradient(); + this.updatePreviewColor(); + + this.notify("value", value); + this.notify("lightness", value); + this.notify("saturation", saturation); + + this.notify("red", this.color.r); + this.notify("green", this.color.g); + this.notify("blue", this.color.b); + this.notify("hexa", this.color.getHexa()); + + notify(this.topic, this.color); + }; + + ColorPicker.prototype.updateHueSlider = function updateHueSlider(e) { + var x = e.pageX - this.hue_area.offsetLeft; + var width = this.hue_area.clientWidth; + + if (x < 0) x = 0; + if (x > width) x = width; + + // TODO 360 => 359 + var hue = ((359 * x) / width) | 0; + // if (hue === 360) hue = 359; + + this.updateSliderPosition(this.hue_picker, x); + this.setHue(hue); + }; + + ColorPicker.prototype.updateAlphaSlider = function updateAlphaSlider(e) { + var x = e.pageX - this.alpha_area.offsetLeft; + var width = this.alpha_area.clientWidth; + + if (x < 0) x = 0; + if (x > width) x = width; + + this.color.a = (x / width).toFixed(2); + + this.updateSliderPosition(this.alpha_picker, x); + this.updatePreviewColor(); + + this.notify("alpha", this.color.a); + notify(this.topic, this.color); + }; + + ColorPicker.prototype.setHue = function setHue(value) { + this.color.setHue(value); + + this.updatePickerBackground(); + this.updateAlphaGradient(); + this.updatePreviewColor(); + + this.notify("red", this.color.r); + this.notify("green", this.color.g); + this.notify("blue", this.color.b); + this.notify("hexa", this.color.getHexa()); + this.notify("hue", this.color.hue); + + notify(this.topic, this.color); + }; + + // Updates when one of Saturation/Value/Lightness changes + ColorPicker.prototype.updateSLV = function updateSLV() { + this.updatePickerPosition(); + this.updateAlphaGradient(); + this.updatePreviewColor(); + + this.notify("red", this.color.r); + this.notify("green", this.color.g); + this.notify("blue", this.color.b); + this.notify("hexa", this.color.getHexa()); + + notify(this.topic, this.color); + }; + + /*************************************************************************/ + // Update positions of various UI elements + /*************************************************************************/ + + ColorPicker.prototype.updatePickerPosition = function updatePickerPosition() { + var size = this.picking_area.clientWidth; + var value = 0; + var offset = 5; + + if (this.picker_mode === "HWB") value = this.color.value; + if (this.picker_mode === "HSL") value = this.color.lightness; + + var x = ((this.color.saturation * size) / 100) | 0; + var y = (size - (value * size) / 100) | 0; + + this.color_picker.style.left = x - offset + "px"; + this.color_picker.style.top = y - offset + "px"; + }; + + ColorPicker.prototype.updateSliderPosition = function updateSliderPosition( + elem, + pos, + ) { + elem.style.left = Math.max(pos - 3, -2) + "px"; + }; + + ColorPicker.prototype.updateHuePicker = function updateHuePicker() { + var size = this.hue_area.clientWidth; + var offset = 1; + var pos = ((this.color.hue * size) / 360) | 0; + this.hue_picker.style.left = pos - offset + "px"; + }; + + ColorPicker.prototype.updateAlphaPicker = function updateAlphaPicker() { + var size = this.alpha_area.clientWidth; + var offset = 1; + var pos = (this.color.a * size) | 0; + this.alpha_picker.style.left = pos - offset + "px"; + }; + + /*************************************************************************/ + // Update background colors + /*************************************************************************/ + + ColorPicker.prototype.updatePickerBackground = + function updatePickerBackground() { + var nc = new Color(this.color); + nc.setHWB(nc.hue, 100, 100); + this.picking_area.style.backgroundColor = nc.getHexa(); + }; + + ColorPicker.prototype.updateAlphaGradient = function updateAlphaGradient() { + this.alpha_mask.style.backgroundColor = this.color.getHexa(); + }; + + ColorPicker.prototype.updatePreviewColor = function updatePreviewColor() { + this.preview_color.style.backgroundColor = this.color.getColor(); + }; + + /*************************************************************************/ + // Update input elements + /*************************************************************************/ + + ColorPicker.prototype.inputChangeHue = function inputChangeHue(e) { + var value = parseInt(e.target.value); + this.setHue(value); + this.updateHuePicker(); + }; + + ColorPicker.prototype.inputChangeSaturation = function inputChangeSaturation( + e, + ) { + var value = parseInt(e.target.value); + this.color.setSaturation(value); + e.target.value = this.color.saturation; + this.updateSLV(); + }; + + ColorPicker.prototype.inputChangeValue = function inputChangeValue(e) { + var value = parseInt(e.target.value); + this.color.setValue(value); + e.target.value = this.color.value; + this.updateSLV(); + }; + + ColorPicker.prototype.inputChangeLightness = function inputChangeLightness( + e, + ) { + var value = parseInt(e.target.value); + this.color.setLightness(value); + e.target.value = this.color.lightness; + this.updateSLV(); + }; + + ColorPicker.prototype.inputChangeRed = function inputChangeRed(e) { + var value = parseInt(e.target.value); + this.color.setByName("r", value); + e.target.value = this.color.r; + this.setColor(this.color); + }; + + ColorPicker.prototype.inputChangeGreen = function inputChangeGreen(e) { + var value = parseInt(e.target.value); + this.color.setByName("g", value); + e.target.value = this.color.g; + this.setColor(this.color); + }; + + ColorPicker.prototype.inputChangeBlue = function inputChangeBlue(e) { + var value = parseInt(e.target.value); + this.color.setByName("b", value); + e.target.value = this.color.b; + this.setColor(this.color); + }; + + ColorPicker.prototype.inputChangeAlpha = function inputChangeAlpha(e) { + var value = parseFloat(e.target.value); + + if ( + typeof value === "number" && + isNaN(value) === false && + value >= 0 && + value <= 1 + ) + this.color.a = value.toFixed(2); + + e.target.value = this.color.a; + this.updateAlphaPicker(); + }; + + ColorPicker.prototype.inputChangeHexa = function inputChangeHexa(e) { + var value = e.target.value; + this.color.setHexa(value); + this.setColor(this.color); + }; + + /*************************************************************************/ + // Internal Pub/Sub + /*************************************************************************/ + + ColorPicker.prototype.subscribe = function subscribe(topic, callback) { + this.subscribers[topic] = callback; + }; + + ColorPicker.prototype.notify = function notify(topic, value) { + if (this.subscribers[topic]) this.subscribers[topic](value); + }; + + /*************************************************************************/ + // Set Picker Properties + /*************************************************************************/ + + ColorPicker.prototype.setColor = function setColor(color) { + if (color instanceof Color !== true) { + console.log("Typeof parameter not Color"); + return; + } + + if (color.format !== this.picker_mode) { + color.setFormat(this.picker_mode); + color.updateHSX(); + } + + this.color.copy(color); + this.updateHuePicker(); + this.updatePickerPosition(); + this.updatePickerBackground(); + this.updateAlphaPicker(); + this.updateAlphaGradient(); + this.updatePreviewColor(); + + this.notify("red", this.color.r); + this.notify("green", this.color.g); + this.notify("blue", this.color.b); + + this.notify("hue", this.color.hue); + this.notify("saturation", this.color.saturation); + this.notify("value", this.color.value); + this.notify("lightness", this.color.lightness); + + this.notify("alpha", this.color.a); + this.notify("hexa", this.color.getHexa()); + notify(this.topic, this.color); + }; + + ColorPicker.prototype.setPickerMode = function setPickerMode(mode) { + if (mode !== "HWB" && mode !== "HSL") return; + + this.picker_mode = mode; + this.node.setAttribute("data-mode", this.picker_mode); + this.setColor(this.color); + }; + + /*************************************************************************/ + // UNUSED + /*************************************************************************/ + + var setPickerMode = function setPickerMode(topic, mode) { + if (pickers[topic]) pickers[topic].setPickerMode(mode); + }; + + var setColor = function setColor(topic, color) { + if (pickers[topic]) pickers[topic].setColor(color); + }; + + var getColor = function getColor(topic) { + if (pickers[topic]) return new Color(pickers[topic].color); + }; + + var subscribe = function subscribe(topic, callback) { + if (subscribers[topic] === undefined) subscribers[topic] = []; + + subscribers[topic].push(callback); + }; + + var unsubscribe = function unsubscribe(callback) { + subscribers.indexOf(callback); + subscribers.splice(index, 1); + }; + + var notify = function notify(topic, value) { + if (subscribers[topic] === undefined || subscribers[topic].length === 0) + return; + + var color = new Color(value); + for (var i in subscribers[topic]) subscribers[topic][i](color); + }; + + var init = function init() { + var elem = document.querySelectorAll(".ui-color-picker"); + var size = elem.length; + for (var i = 0; i < size; i++) new ColorPicker(elem[i]); + }; + + return { + init: init, + Color: Color, + RGBColor: RGBColor, + RGBAColor: RGBAColor, + HWBColor: HWBColor, + HWBAColor: HWBAColor, + HSLColor: HSLColor, + HSLAColor: HSLAColor, + setColor: setColor, + getColor: getColor, + subscribe: subscribe, + unsubscribe: unsubscribe, + setPickerMode: setPickerMode, + }; })(); /** @@ -908,1245 +980,1212 @@ var UIColorPicker = (function UIColorPicker() { */ var InputSliderManager = (function InputSliderManager() { - - var subscribers = {}; - var sliders = []; - - var InputComponent = function InputComponent(obj) { - var input = document.createElement('input'); - input.setAttribute('type', 'text'); - input.style.width = 50 + obj.precision * 10 + 'px'; - - input.addEventListener('click', function(e) { - this.select(); - }); - - input.addEventListener('change', function(e) { - var value = parseFloat(e.target.value); - - if (isNaN(value) === true) - setValue(obj.topic, obj.value); - else - setValue(obj.topic, value); - }); - - return input; - }; - - var SliderComponent = function SliderComponent(obj, sign) { - var slider = document.createElement('div'); - var startX = null; - var start_value = 0; - - slider.addEventListener("click", function(e) { - document.removeEventListener("mousemove", sliderMotion); - setValue(obj.topic, obj.value + obj.step * sign); - }); - - slider.addEventListener("mousedown", function(e) { - startX = e.clientX; - start_value = obj.value; - document.body.style.cursor = "e-resize"; - - document.addEventListener("mouseup", slideEnd); - document.addEventListener("mousemove", sliderMotion); - }); - - var slideEnd = function slideEnd(e) { - document.removeEventListener("mousemove", sliderMotion); - document.body.style.cursor = "auto"; - slider.style.cursor = "pointer"; - }; - - var sliderMotion = function sliderMotion(e) { - slider.style.cursor = "e-resize"; - var delta = (e.clientX - startX) / obj.sensitivity | 0; - var value = delta * obj.step + start_value; - setValue(obj.topic, value); - }; - - return slider; - }; - - var InputSlider = function(node) { - var min = parseFloat(node.getAttribute('data-min')); - var max = parseFloat(node.getAttribute('data-max')); - var step = parseFloat(node.getAttribute('data-step')); - var value = parseFloat(node.getAttribute('data-value')); - var topic = node.getAttribute('data-topic'); - var unit = node.getAttribute('data-unit'); - var name = node.getAttribute('data-info'); - var sensitivity = node.getAttribute('data-sensitivity') | 0; - var precision = node.getAttribute('data-precision') | 0; - - this.min = isNaN(min) ? 0 : min; - this.max = isNaN(max) ? 100 : max; - this.precision = precision >= 0 ? precision : 0; - this.step = step < 0 || isNaN(step) ? 1 : step.toFixed(precision); - this.topic = topic; - this.node = node; - this.unit = unit === null ? '' : unit; - this.sensitivity = sensitivity > 0 ? sensitivity : 5; - value = isNaN(value) ? this.min : value; - - var input = new InputComponent(this); - var slider_left = new SliderComponent(this, -1); - var slider_right = new SliderComponent(this, 1); - - slider_left.className = 'ui-input-slider-left'; - slider_right.className = 'ui-input-slider-right'; - - if (name) { - var info = document.createElement('span'); - info.className = 'ui-input-slider-info'; - info.textContent = name; - node.appendChild(info); - } - - node.appendChild(slider_left); - node.appendChild(input); - node.appendChild(slider_right); - - this.input = input; - sliders[topic] = this; - setValue(topic, value); - }; - - InputSlider.prototype.setInputValue = function setInputValue() { - this.input.value = this.value.toFixed(this.precision) + this.unit; - }; - - var setValue = function setValue(topic, value, send_notify) { - var slider = sliders[topic]; - if (slider === undefined) - return; - - value = parseFloat(value.toFixed(slider.precision)); - - if (value > slider.max) value = slider.max; - if (value < slider.min) value = slider.min; - - slider.value = value; - slider.node.setAttribute('data-value', value); - - slider.setInputValue(); - - if (send_notify === false) - return; - - notify.call(slider); - }; - - var setMax = function setMax(topic, value) { - var slider = sliders[topic]; - if (slider === undefined) - return; - - slider.max = value; - setValue(topic, slider.value); - }; - - var setMin = function setMin(topic, value) { - var slider = sliders[topic]; - if (slider === undefined) - return; - - slider.min = value; - setValue(topic, slider.value); - }; - - var setUnit = function setUnit(topic, unit) { - var slider = sliders[topic]; - if (slider === undefined) - return; - - slider.unit = unit; - setValue(topic, slider.value); - }; - - var setStep = function setStep(topic, value) { - var slider = sliders[topic]; - if (slider === undefined) - return; - - slider.step = parseFloat(value); - setValue(topic, slider.value); - }; - - var setPrecision = function setPrecision(topic, value) { - var slider = sliders[topic]; - if (slider === undefined) - return; - - value = value | 0; - slider.precision = value; - - var step = parseFloat(slider.step.toFixed(value)); - if (step === 0) - slider.step = 1 / Math.pow(10, value); - - setValue(topic, slider.value); - }; - - var setSensitivity = function setSensitivity(topic, value) { - var slider = sliders[topic]; - if (slider === undefined) - return; - - value = value | 0; - - slider.sensitivity = value > 0 ? value : 5; - }; - - var getNode = function getNode(topic) { - return sliders[topic].node; - }; - - var getPrecision = function getPrecision(topic) { - return sliders[topic].precision; - }; - - var getStep = function getStep(topic) { - return sliders[topic].step; - }; - - var subscribe = function subscribe(topic, callback) { - if (subscribers[topic] === undefined) - subscribers[topic] = []; - subscribers[topic].push(callback); - }; - - var unsubscribe = function unsubscribe(topic, callback) { - subscribers[topic].indexOf(callback); - subscribers[topic].splice(index, 1); - }; - - var notify = function notify() { - if (subscribers[this.topic] === undefined) - return; - for (var i = 0; i < subscribers[this.topic].length; i++) - subscribers[this.topic][i](this.value); - }; - - var createSlider = function createSlider(topic, label) { - var slider = document.createElement('div'); - slider.className = 'ui-input-slider'; - slider.setAttribute('data-topic', topic); - - if (label !== undefined) - slider.setAttribute('data-info', label); - - new InputSlider(slider); - return slider; - }; - - var init = function init() { - var elem = document.querySelectorAll('.ui-input-slider'); - var size = elem.length; - for (var i = 0; i < size; i++) - new InputSlider(elem[i]); - }; - - return { - init : init, - setMax : setMax, - setMin : setMin, - setUnit : setUnit, - setStep : setStep, - getNode : getNode, - getStep : getStep, - setValue : setValue, - subscribe : subscribe, - unsubscribe : unsubscribe, - setPrecision : setPrecision, - setSensitivity : setSensitivity, - getPrecision : getPrecision, - createSlider : createSlider, - }; - + var subscribers = {}; + var sliders = []; + + var InputComponent = function InputComponent(obj) { + var input = document.createElement("input"); + input.setAttribute("type", "text"); + input.style.width = 50 + obj.precision * 10 + "px"; + + input.addEventListener("click", function (e) { + this.select(); + }); + + input.addEventListener("change", function (e) { + var value = parseFloat(e.target.value); + + if (isNaN(value) === true) setValue(obj.topic, obj.value); + else setValue(obj.topic, value); + }); + + return input; + }; + + var SliderComponent = function SliderComponent(obj, sign) { + var slider = document.createElement("div"); + var startX = null; + var start_value = 0; + + slider.addEventListener("click", function (e) { + document.removeEventListener("mousemove", sliderMotion); + setValue(obj.topic, obj.value + obj.step * sign); + }); + + slider.addEventListener("mousedown", function (e) { + startX = e.clientX; + start_value = obj.value; + document.body.style.cursor = "e-resize"; + + document.addEventListener("mouseup", slideEnd); + document.addEventListener("mousemove", sliderMotion); + }); + + var slideEnd = function slideEnd(e) { + document.removeEventListener("mousemove", sliderMotion); + document.body.style.cursor = "auto"; + slider.style.cursor = "pointer"; + }; + + var sliderMotion = function sliderMotion(e) { + slider.style.cursor = "e-resize"; + var delta = ((e.clientX - startX) / obj.sensitivity) | 0; + var value = delta * obj.step + start_value; + setValue(obj.topic, value); + }; + + return slider; + }; + + var InputSlider = function (node) { + var min = parseFloat(node.getAttribute("data-min")); + var max = parseFloat(node.getAttribute("data-max")); + var step = parseFloat(node.getAttribute("data-step")); + var value = parseFloat(node.getAttribute("data-value")); + var topic = node.getAttribute("data-topic"); + var unit = node.getAttribute("data-unit"); + var name = node.getAttribute("data-info"); + var sensitivity = node.getAttribute("data-sensitivity") | 0; + var precision = node.getAttribute("data-precision") | 0; + + this.min = isNaN(min) ? 0 : min; + this.max = isNaN(max) ? 100 : max; + this.precision = precision >= 0 ? precision : 0; + this.step = step < 0 || isNaN(step) ? 1 : step.toFixed(precision); + this.topic = topic; + this.node = node; + this.unit = unit === null ? "" : unit; + this.sensitivity = sensitivity > 0 ? sensitivity : 5; + value = isNaN(value) ? this.min : value; + + var input = new InputComponent(this); + var slider_left = new SliderComponent(this, -1); + var slider_right = new SliderComponent(this, 1); + + slider_left.className = "ui-input-slider-left"; + slider_right.className = "ui-input-slider-right"; + + if (name) { + var info = document.createElement("span"); + info.className = "ui-input-slider-info"; + info.textContent = name; + node.appendChild(info); + } + + node.appendChild(slider_left); + node.appendChild(input); + node.appendChild(slider_right); + + this.input = input; + sliders[topic] = this; + setValue(topic, value); + }; + + InputSlider.prototype.setInputValue = function setInputValue() { + this.input.value = this.value.toFixed(this.precision) + this.unit; + }; + + var setValue = function setValue(topic, value, send_notify) { + var slider = sliders[topic]; + if (slider === undefined) return; + + value = parseFloat(value.toFixed(slider.precision)); + + if (value > slider.max) value = slider.max; + if (value < slider.min) value = slider.min; + + slider.value = value; + slider.node.setAttribute("data-value", value); + + slider.setInputValue(); + + if (send_notify === false) return; + + notify.call(slider); + }; + + var setMax = function setMax(topic, value) { + var slider = sliders[topic]; + if (slider === undefined) return; + + slider.max = value; + setValue(topic, slider.value); + }; + + var setMin = function setMin(topic, value) { + var slider = sliders[topic]; + if (slider === undefined) return; + + slider.min = value; + setValue(topic, slider.value); + }; + + var setUnit = function setUnit(topic, unit) { + var slider = sliders[topic]; + if (slider === undefined) return; + + slider.unit = unit; + setValue(topic, slider.value); + }; + + var setStep = function setStep(topic, value) { + var slider = sliders[topic]; + if (slider === undefined) return; + + slider.step = parseFloat(value); + setValue(topic, slider.value); + }; + + var setPrecision = function setPrecision(topic, value) { + var slider = sliders[topic]; + if (slider === undefined) return; + + value = value | 0; + slider.precision = value; + + var step = parseFloat(slider.step.toFixed(value)); + if (step === 0) slider.step = 1 / Math.pow(10, value); + + setValue(topic, slider.value); + }; + + var setSensitivity = function setSensitivity(topic, value) { + var slider = sliders[topic]; + if (slider === undefined) return; + + value = value | 0; + + slider.sensitivity = value > 0 ? value : 5; + }; + + var getNode = function getNode(topic) { + return sliders[topic].node; + }; + + var getPrecision = function getPrecision(topic) { + return sliders[topic].precision; + }; + + var getStep = function getStep(topic) { + return sliders[topic].step; + }; + + var subscribe = function subscribe(topic, callback) { + if (subscribers[topic] === undefined) subscribers[topic] = []; + subscribers[topic].push(callback); + }; + + var unsubscribe = function unsubscribe(topic, callback) { + subscribers[topic].indexOf(callback); + subscribers[topic].splice(index, 1); + }; + + var notify = function notify() { + if (subscribers[this.topic] === undefined) return; + for (var i = 0; i < subscribers[this.topic].length; i++) + subscribers[this.topic][i](this.value); + }; + + var createSlider = function createSlider(topic, label) { + var slider = document.createElement("div"); + slider.className = "ui-input-slider"; + slider.setAttribute("data-topic", topic); + + if (label !== undefined) slider.setAttribute("data-info", label); + + new InputSlider(slider); + return slider; + }; + + var init = function init() { + var elem = document.querySelectorAll(".ui-input-slider"); + var size = elem.length; + for (var i = 0; i < size; i++) new InputSlider(elem[i]); + }; + + return { + init: init, + setMax: setMax, + setMin: setMin, + setUnit: setUnit, + setStep: setStep, + getNode: getNode, + getStep: getStep, + setValue: setValue, + subscribe: subscribe, + unsubscribe: unsubscribe, + setPrecision: setPrecision, + setSensitivity: setSensitivity, + getPrecision: getPrecision, + createSlider: createSlider, + }; })(); -'use strict'; +("use strict"); -window.addEventListener("load", function() { - ColorPickerTool.init(); +window.addEventListener("load", function () { + ColorPickerTool.init(); }); var ColorPickerTool = (function ColorPickerTool() { + /*========== Get DOM Element By ID ==========*/ - /*========== Get DOM Element By ID ==========*/ - - function getElemById(id) { - return document.getElementById(id); - } - - function allowDropEvent(e) { - e.preventDefault(); - } - - /*========== Make an element resizable relative to it's parent ==========*/ - - var UIComponent = (function UIComponent() { - - function makeResizable(elem, axis) { - var valueX = 0; - var valueY = 0; - var action = 0; - - var resizeStart = function resizeStart(e) { - e.stopPropagation(); - e.preventDefault(); - if (e.button !== 0) - return; - - valueX = e.clientX - elem.clientWidth; - valueY = e.clientY - elem.clientHeight; - - document.body.setAttribute('data-resize', axis); - document.addEventListener('mousemove', mouseMove); - document.addEventListener('mouseup', resizeEnd); - }; - - var mouseMove = function mouseMove(e) { - if (action >= 0) - elem.style.width = e.clientX - valueX + 'px'; - if (action <= 0) - elem.style.height = e.clientY - valueY + 'px'; - }; - - var resizeEnd = function resizeEnd(e) { - if (e.button !== 0) - return; - - document.body.removeAttribute('data-resize', axis); - document.removeEventListener('mousemove', mouseMove); - document.removeEventListener('mouseup', resizeEnd); - }; - - var handle = document.createElement('div'); - handle.className = 'resize-handle'; - - if (axis === 'width') action = 1; - else if (axis === 'height') action = -1; - else axis = 'both'; + function getElemById(id) { + return document.getElementById(id); + } - handle.className = 'resize-handle'; - handle.setAttribute('data-resize', axis); - handle.addEventListener('mousedown', resizeStart); - elem.appendChild(handle); - }; + function allowDropEvent(e) { + e.preventDefault(); + } - /*========== Make an element draggable relative to it's parent ==========*/ + /*========== Make an element resizable relative to it's parent ==========*/ - var makeDraggable = function makeDraggable(elem, endFunction) { + var UIComponent = (function UIComponent() { + function makeResizable(elem, axis) { + var valueX = 0; + var valueY = 0; + var action = 0; - var offsetTop; - var offsetLeft; + var resizeStart = function resizeStart(e) { + e.stopPropagation(); + e.preventDefault(); + if (e.button !== 0) return; - elem.setAttribute('data-draggable', 'true'); + valueX = e.clientX - elem.clientWidth; + valueY = e.clientY - elem.clientHeight; - var dragStart = function dragStart(e) { - e.preventDefault(); - e.stopPropagation(); + document.body.setAttribute("data-resize", axis); + document.addEventListener("mousemove", mouseMove); + document.addEventListener("mouseup", resizeEnd); + }; - if (e.target.getAttribute('data-draggable') !== 'true' || - e.target !== elem || e.button !== 0) - return; - - offsetLeft = e.clientX - elem.offsetLeft; - offsetTop = e.clientY - elem.offsetTop; - - document.addEventListener('mousemove', mouseDrag); - document.addEventListener('mouseup', dragEnd); - }; - - var dragEnd = function dragEnd(e) { - if (e.button !== 0) - return; - - document.removeEventListener('mousemove', mouseDrag); - document.removeEventListener('mouseup', dragEnd); - }; - - var mouseDrag = function mouseDrag(e) { - elem.style.left = e.clientX - offsetLeft + 'px'; - elem.style.top = e.clientY - offsetTop + 'px'; - }; - - elem.addEventListener('mousedown', dragStart, false); - }; - - return { - makeResizable : makeResizable, - makeDraggable : makeDraggable - }; - - })(); - - /*========== Color Class ==========*/ - - var Color = UIColorPicker.Color; - var HSLColor = UIColorPicker.HSLColor; - - /** - * ColorPalette - */ - var ColorPalette = (function ColorPalette() { - - var samples = []; - var color_palette; - var complementary; - - var hideNode = function(node) { - node.setAttribute('data-hidden', 'true'); - }; - - var ColorSample = function ColorSample(id) { - var node = document.createElement('div'); - node.className = 'sample'; - - this.uid = samples.length; - this.node = node; - this.color = new Color(); - - node.setAttribute('sample-id', this.uid); - node.setAttribute('draggable', 'true'); - node.addEventListener('dragstart', this.dragStart.bind(this)); - node.addEventListener('click', this.pickColor.bind(this)); - - samples.push(this); - }; - - ColorSample.prototype.updateBgColor = function updateBgColor() { - this.node.style.backgroundColor = this.color.getColor(); - }; - - ColorSample.prototype.updateColor = function updateColor(color) { - this.color.copy(color); - this.updateBgColor(); - }; - - ColorSample.prototype.updateHue = function updateHue(color, degree, steps) { - this.color.copy(color); - var hue = (steps * degree + this.color.hue) % 360; - if (hue < 0) hue += 360; - this.color.setHue(hue); - this.updateBgColor(); - }; - - ColorSample.prototype.updateSaturation = function updateSaturation(color, value, steps) { - var saturation = color.saturation + value * steps; - if (saturation <= 0) { - this.node.setAttribute('data-hidden', 'true'); - return; - } - - this.node.removeAttribute('data-hidden'); - this.color.copy(color); - this.color.setSaturation(saturation); - this.updateBgColor(); - }; - - ColorSample.prototype.updateLightness = function updateLightness(color, value, steps) { - var lightness = color.lightness + value * steps; - if (lightness <= 0) { - this.node.setAttribute('data-hidden', 'true'); - return; - } - this.node.removeAttribute('data-hidden'); - this.color.copy(color); - this.color.setLightness(lightness); - this.updateBgColor(); - }; - - ColorSample.prototype.updateBrightness = function updateBrightness(color, value, steps) { - var brightness = color.value + value * steps; - if (brightness <= 0) { - this.node.setAttribute('data-hidden', 'true'); - return; - } - this.node.removeAttribute('data-hidden'); - this.color.copy(color); - this.color.setValue(brightness); - this.updateBgColor(); - }; - - ColorSample.prototype.updateAlpha = function updateAlpha(color, value, steps) { - var alpha = parseFloat(color.a) + value * steps; - if (alpha <= 0) { - this.node.setAttribute('data-hidden', 'true'); - return; - } - this.node.removeAttribute('data-hidden'); - this.color.copy(color); - this.color.a = parseFloat(alpha.toFixed(2)); - this.updateBgColor(); - }; - - ColorSample.prototype.pickColor = function pickColor() { - UIColorPicker.setColor('picker', this.color); - }; - - ColorSample.prototype.dragStart = function dragStart(e) { - e.dataTransfer.setData('sampleID', this.uid); - e.dataTransfer.setData('location', 'palette-samples'); - }; - - var Palette = function Palette(text, size) { - this.samples = []; - this.locked = false; - - var palette = document.createElement('div'); - var title = document.createElement('div'); - var controls = document.createElement('div'); - var container = document.createElement('div'); - var lock = document.createElement('div'); - - container.className = 'container'; - title.className = 'title'; - palette.className = 'palette'; - controls.className = 'controls'; - lock.className = 'lock'; - title.textContent = text; - - controls.appendChild(lock); - container.appendChild(title); - container.appendChild(controls); - container.appendChild(palette); - - lock.addEventListener('click', function () { - this.locked = !this.locked; - lock.setAttribute('locked-state', this.locked); - }.bind(this)); - - for(var i = 0; i < size; i++) { - var sample = new ColorSample(); - this.samples.push(sample); - palette.appendChild(sample.node); - } - - this.container = container; - this.title = title; - }; - - var createHuePalette = function createHuePalette() { - var palette = new Palette('Hue', 12); - - UIColorPicker.subscribe('picker', function(color) { - if (palette.locked === true) - return; - - for(var i = 0; i < 12; i++) { - palette.samples[i].updateHue(color, 30, i); - } - }); - - color_palette.appendChild(palette.container); - }; - - var createSaturationPalette = function createSaturationPalette() { - var palette = new Palette('Saturation', 11); - - UIColorPicker.subscribe('picker', function(color) { - if (palette.locked === true) - return; - - for(var i = 0; i < 11; i++) { - palette.samples[i].updateSaturation(color, -10, i); - } - }); - - color_palette.appendChild(palette.container); - }; - - /* Brightness or Lightness - depends on the picker mode */ - var createVLPalette = function createSaturationPalette() { - var palette = new Palette('Lightness', 11); - - UIColorPicker.subscribe('picker', function(color) { - if (palette.locked === true) - return; - - if(color.format === 'HSL') { - palette.title.textContent = 'Lightness'; - for(var i = 0; i < 11; i++) - palette.samples[i].updateLightness(color, -10, i); - } - else { - palette.title.textContent = 'Value'; - for(var i = 0; i < 11; i++) - palette.samples[i].updateBrightness(color, -10, i); - } - }); - - color_palette.appendChild(palette.container); - }; - - var isBlankPalette = function isBlankPalette(container, value) { - if (value === 0) { - container.setAttribute('data-collapsed', 'true'); - return true; - } - - container.removeAttribute('data-collapsed'); - return false; - }; - - var createAlphaPalette = function createAlphaPalette() { - var palette = new Palette('Alpha', 10); - - UIColorPicker.subscribe('picker', function(color) { - if (palette.locked === true) - return; - - for(var i = 0; i < 10; i++) { - palette.samples[i].updateAlpha(color, -0.1, i); - } - }); - - color_palette.appendChild(palette.container); - }; - - var getSampleColor = function getSampleColor(id) { - if (samples[id] !== undefined && samples[id]!== null) - return new Color(samples[id].color); - }; - - var init = function init() { - color_palette = getElemById('color-palette'); - - createHuePalette(); - createSaturationPalette(); - createVLPalette(); - createAlphaPalette(); - - }; - - return { - init : init, - getSampleColor : getSampleColor - }; - - })(); + var mouseMove = function mouseMove(e) { + if (action >= 0) elem.style.width = e.clientX - valueX + "px"; + if (action <= 0) elem.style.height = e.clientY - valueY + "px"; + }; + + var resizeEnd = function resizeEnd(e) { + if (e.button !== 0) return; - /** - * ColorInfo - */ - var ColorInfo = (function ColorInfo() { - - var info_box; - var select; - var RGBA; - var HEXA; - var HSLA; - - var updateInfo = function updateInfo(color) { - RGBA.info.textContent = 'RGB'; - HSLA.info.textContent = 'HSL'; - HEXA.info.textContent = 'HEX'; - - RGBA.value.value = color.getRGBA(); - HSLA.value.value = color.getHSLA(); - HEXA.value.value = color.getHexa(); - }; - - var InfoProperty = function InfoProperty(info) { - - var node = document.createElement('div'); - var title = document.createElement('div'); - var value = document.createElement('input'); - var copy = document.createElement('div'); - - node.className = 'property'; - title.className = 'type'; - value.className = 'value'; - copy.className = 'copy'; - - title.textContent = info; - value.setAttribute('type', 'text'); - - copy.addEventListener('click', function() { - value.select(); - }); - - node.appendChild(title); - node.appendChild(value); - node.appendChild(copy); - - this.node = node; - this.value = value; - this.info = title; - - info_box.appendChild(node); - }; - - var init = function init() { - - info_box = getElemById('color-info'); - - RGBA = new InfoProperty('RGBA'); - HSLA = new InfoProperty('HSLA'); - HEXA = new InfoProperty('HEXA'); - - UIColorPicker.subscribe('picker', updateInfo); - - }; - - return { - init: init - }; - - })(); - - /** - * ColorPicker Samples - */ - var ColorPickerSamples = (function ColorPickerSamples() { - - var samples = []; - var nr_samples = 0; - var active = null; - var container = null; - var samples_per_line = 10; - var trash_can = null; - var base_color = new HSLColor(0, 50, 100); - var add_btn; - var add_btn_pos; - - var ColorSample = function ColorSample() { - var node = document.createElement('div'); - node.className = 'sample'; - - this.uid = samples.length; - this.index = nr_samples++; - this.node = node; - this.color = new Color(base_color); - - node.setAttribute('sample-id', this.uid); - node.setAttribute('draggable', 'true'); - - node.addEventListener('dragstart', this.dragStart.bind(this)); - node.addEventListener('dragover' , allowDropEvent); - node.addEventListener('drop' , this.dragDrop.bind(this)); - - this.updatePosition(this.index); - this.updateBgColor(); - samples.push(this); - }; - - ColorSample.prototype.updateBgColor = function updateBgColor() { - this.node.style.backgroundColor = this.color.getColor(); - }; - - ColorSample.prototype.updatePosition = function updatePosition(index) { - this.index = index; - this.posY = 5 + ((index / samples_per_line) | 0) * 52; - this.posX = 5 + ((index % samples_per_line) | 0) * 52; - this.node.style.top = this.posY + 'px'; - this.node.style.left = this.posX + 'px'; - }; - - ColorSample.prototype.updateColor = function updateColor(color) { - this.color.copy(color); - this.updateBgColor(); - }; - - ColorSample.prototype.activate = function activate() { - UIColorPicker.setColor('picker', this.color); - this.node.setAttribute('data-active', 'true'); - }; - - ColorSample.prototype.deactivate = function deactivate() { - this.node.removeAttribute('data-active'); - }; - - ColorSample.prototype.dragStart = function dragStart(e) { - e.dataTransfer.setData('sampleID', this.uid); - e.dataTransfer.setData('location', 'picker-samples'); - }; - - ColorSample.prototype.dragDrop = function dragDrop(e) { - e.stopPropagation(); - this.color = Tool.getSampleColorFrom(e); - this.updateBgColor(); - }; - - ColorSample.prototype.deleteSample = function deleteSample() { - container.removeChild(this.node); - samples[this.uid] = null; - nr_samples--; - }; - - var updateUI = function updateUI() { - updateContainerProp(); - - var index = 0; - var nr = samples.length; - for (var i=0; i < nr; i++) - if (samples[i] !== null) { - samples[i].updatePosition(index); - index++; - } - - AddSampleButton.updatePosition(index); - }; - - var deleteSample = function deleteSample(e) { - trash_can.parentElement.setAttribute('drag-state', 'none'); - - var location = e.dataTransfer.getData('location'); - if (location !== 'picker-samples') - return; - - var sampleID = e.dataTransfer.getData('sampleID'); - samples[sampleID].deleteSample(); - console.log(samples); - - updateUI(); - }; - - var createDropSample = function createDropSample() { - var sample = document.createElement('div'); - sample.id = 'drop-effect-sample'; - sample.className = 'sample'; - container.appendChild(sample); - }; - - var setActivateSample = function setActivateSample(e) { - if (e.target.className !== 'sample') - return; - - unsetActiveSample(active); - Tool.unsetVoidSample(); - CanvasSamples.unsetActiveSample(); - active = samples[e.target.getAttribute('sample-id')]; - active.activate(); - }; - - var unsetActiveSample = function unsetActiveSample() { - if (active) - active.deactivate(); - active = null; - }; - - var getSampleColor = function getSampleColor(id) { - if (samples[id] !== undefined && samples[id]!== null) - return new Color(samples[id].color); - }; - - var updateContainerProp = function updateContainerProp() { - samples_per_line = ((container.clientWidth - 5) / 52) | 0; - var height = 52 * (1 + (nr_samples / samples_per_line) | 0); - container.style.height = height + 10 + 'px'; - }; - - var AddSampleButton = (function AddSampleButton() { - var node; - var _index = 0; - var _posX; - var _posY; - - var updatePosition = function updatePosition(index) { - _index = index; - _posY = 5 + ((index / samples_per_line) | 0) * 52; - _posX = 5 + ((index % samples_per_line) | 0) * 52; - - node.style.top = _posY + 'px'; - node.style.left = _posX + 'px'; - }; - - var addButtonClick = function addButtonClick() { - var sample = new ColorSample(); - container.appendChild(sample.node); - updatePosition(_index + 1); - updateUI(); - }; - - var init = function init() { - node = document.createElement('div'); - var icon = document.createElement('div'); - - node.className = 'sample'; - icon.id = 'add-icon'; - node.appendChild(icon); - node.addEventListener('click', addButtonClick); - - updatePosition(0); - container.appendChild(node); - }; - - return { - init : init, - updatePosition : updatePosition - }; - })(); - - var init = function init() { - container = getElemById('picker-samples'); - trash_can = getElemById('trash-can'); - - AddSampleButton.init(); - - for (var i=0; i<16; i++) { - var sample = new ColorSample(); - container.appendChild(sample.node); - } - - AddSampleButton.updatePosition(samples.length); - updateUI(); - - active = samples[0]; - active.activate(); - - container.addEventListener('click', setActivateSample); - - trash_can.addEventListener('dragover', allowDropEvent); - trash_can.addEventListener('dragenter', function() { - this.parentElement.setAttribute('drag-state', 'enter'); - }); - trash_can.addEventListener('dragleave', function(e) { - this.parentElement.setAttribute('drag-state', 'none'); - }); - trash_can.addEventListener('drop', deleteSample); - - UIColorPicker.subscribe('picker', function(color) { - if (active) - active.updateColor(color); - }); - - }; - - return { - init : init, - getSampleColor : getSampleColor, - unsetActiveSample : unsetActiveSample - }; - - })(); - - /** - * Canvas Samples - */ - var CanvasSamples = (function CanvasSamples() { - - var active = null; - var canvas = null; - var samples = []; - var zindex = null; - var tutorial = true; - - var CanvasSample = function CanvasSample(color, posX, posY) { - - var node = document.createElement('div'); - var pick = document.createElement('div'); - var delete_btn = document.createElement('div'); - node.className = 'sample'; - pick.className = 'pick'; - delete_btn.className = 'delete'; - - this.uid = samples.length; - this.node = node; - this.color = color; - this.updateBgColor(); - this.zIndex = 1; - - node.style.top = posY - 50 + 'px'; - node.style.left = posX - 50 + 'px'; - node.setAttribute('sample-id', this.uid); - - node.appendChild(pick); - node.appendChild(delete_btn); - - var activate = function activate() { - setActiveSample(this); - }.bind(this); - - node.addEventListener('dblclick', activate); - pick.addEventListener('click', activate); - delete_btn.addEventListener('click', this.deleteSample.bind(this)); - - UIComponent.makeDraggable(node); - UIComponent.makeResizable(node); - - samples.push(this); - canvas.appendChild(node); - return this; - }; - - CanvasSample.prototype.updateBgColor = function updateBgColor() { - this.node.style.backgroundColor = this.color.getColor(); - }; - - CanvasSample.prototype.updateColor = function updateColor(color) { - this.color.copy(color); - this.updateBgColor(); - }; - - CanvasSample.prototype.updateZIndex = function updateZIndex(value) { - this.zIndex = value; - this.node.style.zIndex = value; - }; - - CanvasSample.prototype.activate = function activate() { - this.node.setAttribute('data-active', 'true'); - zindex.setAttribute('data-active', 'true'); - - UIColorPicker.setColor('picker', this.color); - InputSliderManager.setValue('z-index', this.zIndex); - }; - - CanvasSample.prototype.deactivate = function deactivate() { - this.node.removeAttribute('data-active'); - zindex.removeAttribute('data-active'); - }; - - CanvasSample.prototype.deleteSample = function deleteSample() { - if (active === this) - unsetActiveSample(); - canvas.removeChild(this.node); - samples[this.uid] = null; - }; - - CanvasSample.prototype.updatePosition = function updatePosition(posX, posY) { - this.node.style.top = posY - this.startY + 'px'; - this.node.style.left = posX - this.startX + 'px'; - }; - - var canvasDropEvent = function canvasDropEvent(e) { - var color = Tool.getSampleColorFrom(e); - - if (color) { - var offsetX = e.pageX - canvas.offsetLeft; - var offsetY = e.pageY - canvas.offsetTop; - var sample = new CanvasSample(color, offsetX, offsetY); - if (tutorial) { - tutorial = false; - canvas.removeAttribute('data-tutorial'); - var info = new CanvasSample(new Color(), 100, 100); - info.node.setAttribute('data-tutorial', 'dblclick'); - } - } - - }; - - var setActiveSample = function setActiveSample(sample) { - ColorPickerSamples.unsetActiveSample(); - Tool.unsetVoidSample(); - unsetActiveSample(); - active = sample; - active.activate(); - }; - - var unsetActiveSample = function unsetActiveSample() { - if (active) - active.deactivate(); - active = null; - }; - - var createToggleBgButton = function createToggleBgButton() { - var button = document.createElement('div'); - var state = false; - button.className = 'toggle-bg'; - canvas.appendChild(button); - - button.addEventListener('click', function() { - console.log(state); - state = !state; - canvas.setAttribute('data-bg', state); - }); - }; - - var init = function init() { - canvas = getElemById('canvas'); - zindex = getElemById('zindex'); - - canvas.addEventListener('dragover', allowDropEvent); - canvas.addEventListener('drop', canvasDropEvent); - - createToggleBgButton(); - - UIColorPicker.subscribe('picker', function(color) { - if (active) active.updateColor(color); - }); - - InputSliderManager.subscribe('z-index', function (value) { - if (active) active.updateZIndex(value); - }); - - UIComponent.makeResizable(canvas, 'height'); - }; - - return { - init : init, - unsetActiveSample : unsetActiveSample - }; - - })(); - - var StateButton = function StateButton(node, state) { - this.state = false; - this.callback = null; - - node.addEventListener('click', function() { - this.state = !this.state; - if (typeof this.callback === "function") - this.callback(this.state); - }.bind(this)); - }; - - StateButton.prototype.set = function set() { - this.state = true; - if (typeof this.callback === "function") - this.callback(this.state); - }; - - StateButton.prototype.unset = function unset() { - this.state = false; - if (typeof this.callback === "function") - this.callback(this.state); - }; - - StateButton.prototype.subscribe = function subscribe(func) { - this.callback = func; - }; - - /** - * Tool - */ - var Tool = (function Tool() { - - var samples = []; - var controls = null; - var void_sw; - - var createPickerModeSwitch = function createPickerModeSwitch() { - var parent = getElemById('controls'); - var icon = document.createElement('div'); - var button = document.createElement('div'); - var HWB = document.createElement('div'); - var hsl = document.createElement('div'); - var active = null; - - icon.className = 'icon picker-icon'; - button.className = 'switch'; - button.appendChild(HWB); - button.appendChild(hsl); - - HWB.textContent = 'HWB'; - hsl.textContent = 'HSL'; - - active = hsl; - active.setAttribute('data-active', 'true'); - - function switchPickingModeTo(elem) { - active.removeAttribute('data-active'); - active = elem; - active.setAttribute('data-active', 'true'); - UIColorPicker.setPickerMode('picker', active.textContent); - }; - - var picker_sw = new StateButton(icon); - picker_sw.subscribe(function() { - if (active === HWB) - switchPickingModeTo(hsl); - else - switchPickingModeTo(HWB); - }); - - HWB.addEventListener('click', function() { - switchPickingModeTo(HWB); - }); - hsl.addEventListener('click', function() { - switchPickingModeTo(hsl); - }); - - parent.appendChild(icon); - parent.appendChild(button); - }; - - var setPickerDragAndDrop = function setPickerDragAndDrop() { - var preview = document.querySelector('#picker .preview-color'); - var picking_area = document.querySelector('#picker .picking-area'); - - preview.setAttribute('draggable', 'true'); - preview.addEventListener('drop', drop); - preview.addEventListener('dragstart', dragStart); - preview.addEventListener('dragover', allowDropEvent); - - picking_area.addEventListener('drop', drop); - picking_area.addEventListener('dragover', allowDropEvent); - - function drop(e) { - var color = getSampleColorFrom(e); - UIColorPicker.setColor('picker', color); - }; - - function dragStart(e) { - e.dataTransfer.setData('sampleID', 'picker'); - e.dataTransfer.setData('location', 'picker'); - }; - }; - - var getSampleColorFrom = function getSampleColorFrom(e) { - var sampleID = e.dataTransfer.getData('sampleID'); - var location = e.dataTransfer.getData('location'); - - if (location === 'picker') - return UIColorPicker.getColor(sampleID); - if (location === 'picker-samples') - return ColorPickerSamples.getSampleColor(sampleID); - if (location === 'palette-samples') - return ColorPalette.getSampleColor(sampleID); - }; - - var setVoidSwitch = function setVoidSwitch() { - var void_sample = getElemById('void-sample'); - void_sw = new StateButton(void_sample); - void_sw.subscribe( function (state) { - void_sample.setAttribute('data-active', state); - if (state === true) { - ColorPickerSamples.unsetActiveSample(); - CanvasSamples.unsetActiveSample(); - } - }); - }; - - var unsetVoidSample = function unsetVoidSample() { - void_sw.unset(); - }; - - var init = function init() { - controls = getElemById('controls'); - - var color = new Color(); - color.setHSL(0, 51, 51); - UIColorPicker.setColor('picker', color); - - setPickerDragAndDrop(); - createPickerModeSwitch(); - setVoidSwitch(); - }; - - return { - init : init, - unsetVoidSample : unsetVoidSample, - getSampleColorFrom : getSampleColorFrom - }; - - })(); - - var init = function init() { - UIColorPicker.init(); - InputSliderManager.init(); - ColorInfo.init(); - ColorPalette.init(); - ColorPickerSamples.init(); - CanvasSamples.init(); - Tool.init(); - }; - - return { - init : init - }; + document.body.removeAttribute("data-resize", axis); + document.removeEventListener("mousemove", mouseMove); + document.removeEventListener("mouseup", resizeEnd); + }; + + var handle = document.createElement("div"); + handle.className = "resize-handle"; + if (axis === "width") action = 1; + else if (axis === "height") action = -1; + else axis = "both"; + + handle.className = "resize-handle"; + handle.setAttribute("data-resize", axis); + handle.addEventListener("mousedown", resizeStart); + elem.appendChild(handle); + } + + /*========== Make an element draggable relative to it's parent ==========*/ + + var makeDraggable = function makeDraggable(elem, endFunction) { + var offsetTop; + var offsetLeft; + + elem.setAttribute("data-draggable", "true"); + + var dragStart = function dragStart(e) { + e.preventDefault(); + e.stopPropagation(); + + if ( + e.target.getAttribute("data-draggable") !== "true" || + e.target !== elem || + e.button !== 0 + ) + return; + + offsetLeft = e.clientX - elem.offsetLeft; + offsetTop = e.clientY - elem.offsetTop; + + document.addEventListener("mousemove", mouseDrag); + document.addEventListener("mouseup", dragEnd); + }; + + var dragEnd = function dragEnd(e) { + if (e.button !== 0) return; + + document.removeEventListener("mousemove", mouseDrag); + document.removeEventListener("mouseup", dragEnd); + }; + + var mouseDrag = function mouseDrag(e) { + elem.style.left = e.clientX - offsetLeft + "px"; + elem.style.top = e.clientY - offsetTop + "px"; + }; + + elem.addEventListener("mousedown", dragStart, false); + }; + + return { + makeResizable: makeResizable, + makeDraggable: makeDraggable, + }; + })(); + + /*========== Color Class ==========*/ + + var Color = UIColorPicker.Color; + var HSLColor = UIColorPicker.HSLColor; + + /** + * ColorPalette + */ + var ColorPalette = (function ColorPalette() { + var samples = []; + var color_palette; + var complementary; + + var hideNode = function (node) { + node.setAttribute("data-hidden", "true"); + }; + + var ColorSample = function ColorSample(id) { + var node = document.createElement("div"); + node.className = "sample"; + + this.uid = samples.length; + this.node = node; + this.color = new Color(); + + node.setAttribute("sample-id", this.uid); + node.setAttribute("draggable", "true"); + node.addEventListener("dragstart", this.dragStart.bind(this)); + node.addEventListener("click", this.pickColor.bind(this)); + + samples.push(this); + }; + + ColorSample.prototype.updateBgColor = function updateBgColor() { + this.node.style.backgroundColor = this.color.getColor(); + }; + + ColorSample.prototype.updateColor = function updateColor(color) { + this.color.copy(color); + this.updateBgColor(); + }; + + ColorSample.prototype.updateHue = function updateHue(color, degree, steps) { + this.color.copy(color); + var hue = (steps * degree + this.color.hue) % 360; + if (hue < 0) hue += 360; + this.color.setHue(hue); + this.updateBgColor(); + }; + + ColorSample.prototype.updateSaturation = function updateSaturation( + color, + value, + steps, + ) { + var saturation = color.saturation + value * steps; + if (saturation <= 0) { + this.node.setAttribute("data-hidden", "true"); + return; + } + + this.node.removeAttribute("data-hidden"); + this.color.copy(color); + this.color.setSaturation(saturation); + this.updateBgColor(); + }; + + ColorSample.prototype.updateLightness = function updateLightness( + color, + value, + steps, + ) { + var lightness = color.lightness + value * steps; + if (lightness <= 0) { + this.node.setAttribute("data-hidden", "true"); + return; + } + this.node.removeAttribute("data-hidden"); + this.color.copy(color); + this.color.setLightness(lightness); + this.updateBgColor(); + }; + + ColorSample.prototype.updateBrightness = function updateBrightness( + color, + value, + steps, + ) { + var brightness = color.value + value * steps; + if (brightness <= 0) { + this.node.setAttribute("data-hidden", "true"); + return; + } + this.node.removeAttribute("data-hidden"); + this.color.copy(color); + this.color.setValue(brightness); + this.updateBgColor(); + }; + + ColorSample.prototype.updateAlpha = function updateAlpha( + color, + value, + steps, + ) { + var alpha = parseFloat(color.a) + value * steps; + if (alpha <= 0) { + this.node.setAttribute("data-hidden", "true"); + return; + } + this.node.removeAttribute("data-hidden"); + this.color.copy(color); + this.color.a = parseFloat(alpha.toFixed(2)); + this.updateBgColor(); + }; + + ColorSample.prototype.pickColor = function pickColor() { + UIColorPicker.setColor("picker", this.color); + }; + + ColorSample.prototype.dragStart = function dragStart(e) { + e.dataTransfer.setData("sampleID", this.uid); + e.dataTransfer.setData("location", "palette-samples"); + }; + + var Palette = function Palette(text, size) { + this.samples = []; + this.locked = false; + + var palette = document.createElement("div"); + var title = document.createElement("div"); + var controls = document.createElement("div"); + var container = document.createElement("div"); + var lock = document.createElement("div"); + + container.className = "container"; + title.className = "title"; + palette.className = "palette"; + controls.className = "controls"; + lock.className = "lock"; + title.textContent = text; + + controls.appendChild(lock); + container.appendChild(title); + container.appendChild(controls); + container.appendChild(palette); + + lock.addEventListener( + "click", + function () { + this.locked = !this.locked; + lock.setAttribute("locked-state", this.locked); + }.bind(this), + ); + + for (var i = 0; i < size; i++) { + var sample = new ColorSample(); + this.samples.push(sample); + palette.appendChild(sample.node); + } + + this.container = container; + this.title = title; + }; + + var createHuePalette = function createHuePalette() { + var palette = new Palette("Hue", 12); + + UIColorPicker.subscribe("picker", function (color) { + if (palette.locked === true) return; + + for (var i = 0; i < 12; i++) { + palette.samples[i].updateHue(color, 30, i); + } + }); + + color_palette.appendChild(palette.container); + }; + + var createSaturationPalette = function createSaturationPalette() { + var palette = new Palette("Saturation", 11); + + UIColorPicker.subscribe("picker", function (color) { + if (palette.locked === true) return; + + for (var i = 0; i < 11; i++) { + palette.samples[i].updateSaturation(color, -10, i); + } + }); + + color_palette.appendChild(palette.container); + }; + + /* Brightness or Lightness - depends on the picker mode */ + var createVLPalette = function createSaturationPalette() { + var palette = new Palette("Lightness", 11); + + UIColorPicker.subscribe("picker", function (color) { + if (palette.locked === true) return; + + if (color.format === "HSL") { + palette.title.textContent = "Lightness"; + for (var i = 0; i < 11; i++) + palette.samples[i].updateLightness(color, -10, i); + } else { + palette.title.textContent = "Value"; + for (var i = 0; i < 11; i++) + palette.samples[i].updateBrightness(color, -10, i); + } + }); + + color_palette.appendChild(palette.container); + }; + + var isBlankPalette = function isBlankPalette(container, value) { + if (value === 0) { + container.setAttribute("data-collapsed", "true"); + return true; + } + + container.removeAttribute("data-collapsed"); + return false; + }; + + var createAlphaPalette = function createAlphaPalette() { + var palette = new Palette("Alpha", 10); + + UIColorPicker.subscribe("picker", function (color) { + if (palette.locked === true) return; + + for (var i = 0; i < 10; i++) { + palette.samples[i].updateAlpha(color, -0.1, i); + } + }); + + color_palette.appendChild(palette.container); + }; + + var getSampleColor = function getSampleColor(id) { + if (samples[id] !== undefined && samples[id] !== null) + return new Color(samples[id].color); + }; + + var init = function init() { + color_palette = getElemById("color-palette"); + + createHuePalette(); + createSaturationPalette(); + createVLPalette(); + createAlphaPalette(); + }; + + return { + init: init, + getSampleColor: getSampleColor, + }; + })(); + + /** + * ColorInfo + */ + var ColorInfo = (function ColorInfo() { + var info_box; + var select; + var RGBA; + var HEXA; + var HSLA; + + var updateInfo = function updateInfo(color) { + RGBA.info.textContent = "RGB"; + HSLA.info.textContent = "HSL"; + HEXA.info.textContent = "HEX"; + + RGBA.value.value = color.getRGBA(); + HSLA.value.value = color.getHSLA(); + HEXA.value.value = color.getHexa(); + }; + + var InfoProperty = function InfoProperty(info) { + var node = document.createElement("div"); + var title = document.createElement("div"); + var value = document.createElement("input"); + var copy = document.createElement("div"); + + node.className = "property"; + title.className = "type"; + value.className = "value"; + copy.className = "copy"; + + title.textContent = info; + value.setAttribute("type", "text"); + + copy.addEventListener("click", function () { + value.select(); + }); + + node.appendChild(title); + node.appendChild(value); + node.appendChild(copy); + + this.node = node; + this.value = value; + this.info = title; + + info_box.appendChild(node); + }; + + var init = function init() { + info_box = getElemById("color-info"); + + RGBA = new InfoProperty("RGBA"); + HSLA = new InfoProperty("HSLA"); + HEXA = new InfoProperty("HEXA"); + + UIColorPicker.subscribe("picker", updateInfo); + }; + + return { + init: init, + }; + })(); + + /** + * ColorPicker Samples + */ + var ColorPickerSamples = (function ColorPickerSamples() { + var samples = []; + var nr_samples = 0; + var active = null; + var container = null; + var samples_per_line = 10; + var trash_can = null; + var base_color = new HSLColor(0, 50, 100); + var add_btn; + var add_btn_pos; + + var ColorSample = function ColorSample() { + var node = document.createElement("div"); + node.className = "sample"; + + this.uid = samples.length; + this.index = nr_samples++; + this.node = node; + this.color = new Color(base_color); + + node.setAttribute("sample-id", this.uid); + node.setAttribute("draggable", "true"); + + node.addEventListener("dragstart", this.dragStart.bind(this)); + node.addEventListener("dragover", allowDropEvent); + node.addEventListener("drop", this.dragDrop.bind(this)); + + this.updatePosition(this.index); + this.updateBgColor(); + samples.push(this); + }; + + ColorSample.prototype.updateBgColor = function updateBgColor() { + this.node.style.backgroundColor = this.color.getColor(); + }; + + ColorSample.prototype.updatePosition = function updatePosition(index) { + this.index = index; + this.posY = 5 + ((index / samples_per_line) | 0) * 52; + this.posX = 5 + (index % samples_per_line | 0) * 52; + this.node.style.top = this.posY + "px"; + this.node.style.left = this.posX + "px"; + }; + + ColorSample.prototype.updateColor = function updateColor(color) { + this.color.copy(color); + this.updateBgColor(); + }; + + ColorSample.prototype.activate = function activate() { + UIColorPicker.setColor("picker", this.color); + this.node.setAttribute("data-active", "true"); + }; + + ColorSample.prototype.deactivate = function deactivate() { + this.node.removeAttribute("data-active"); + }; + + ColorSample.prototype.dragStart = function dragStart(e) { + e.dataTransfer.setData("sampleID", this.uid); + e.dataTransfer.setData("location", "picker-samples"); + }; + + ColorSample.prototype.dragDrop = function dragDrop(e) { + e.stopPropagation(); + this.color = Tool.getSampleColorFrom(e); + this.updateBgColor(); + }; + + ColorSample.prototype.deleteSample = function deleteSample() { + container.removeChild(this.node); + samples[this.uid] = null; + nr_samples--; + }; + + var updateUI = function updateUI() { + updateContainerProp(); + + var index = 0; + var nr = samples.length; + for (var i = 0; i < nr; i++) + if (samples[i] !== null) { + samples[i].updatePosition(index); + index++; + } + + AddSampleButton.updatePosition(index); + }; + + var deleteSample = function deleteSample(e) { + trash_can.parentElement.setAttribute("drag-state", "none"); + + var location = e.dataTransfer.getData("location"); + if (location !== "picker-samples") return; + + var sampleID = e.dataTransfer.getData("sampleID"); + samples[sampleID].deleteSample(); + console.log(samples); + + updateUI(); + }; + + var createDropSample = function createDropSample() { + var sample = document.createElement("div"); + sample.id = "drop-effect-sample"; + sample.className = "sample"; + container.appendChild(sample); + }; + + var setActivateSample = function setActivateSample(e) { + if (e.target.className !== "sample") return; + + unsetActiveSample(active); + Tool.unsetVoidSample(); + CanvasSamples.unsetActiveSample(); + active = samples[e.target.getAttribute("sample-id")]; + active.activate(); + }; + + var unsetActiveSample = function unsetActiveSample() { + if (active) active.deactivate(); + active = null; + }; + + var getSampleColor = function getSampleColor(id) { + if (samples[id] !== undefined && samples[id] !== null) + return new Color(samples[id].color); + }; + + var updateContainerProp = function updateContainerProp() { + samples_per_line = ((container.clientWidth - 5) / 52) | 0; + var height = 52 * ((1 + nr_samples / samples_per_line) | 0); + container.style.height = height + 10 + "px"; + }; + + var AddSampleButton = (function AddSampleButton() { + var node; + var _index = 0; + var _posX; + var _posY; + + var updatePosition = function updatePosition(index) { + _index = index; + _posY = 5 + ((index / samples_per_line) | 0) * 52; + _posX = 5 + (index % samples_per_line | 0) * 52; + + node.style.top = _posY + "px"; + node.style.left = _posX + "px"; + }; + + var addButtonClick = function addButtonClick() { + var sample = new ColorSample(); + container.appendChild(sample.node); + updatePosition(_index + 1); + updateUI(); + }; + + var init = function init() { + node = document.createElement("div"); + var icon = document.createElement("div"); + + node.className = "sample"; + icon.id = "add-icon"; + node.appendChild(icon); + node.addEventListener("click", addButtonClick); + + updatePosition(0); + container.appendChild(node); + }; + + return { + init: init, + updatePosition: updatePosition, + }; + })(); + + var init = function init() { + container = getElemById("picker-samples"); + trash_can = getElemById("trash-can"); + + AddSampleButton.init(); + + for (var i = 0; i < 16; i++) { + var sample = new ColorSample(); + container.appendChild(sample.node); + } + + AddSampleButton.updatePosition(samples.length); + updateUI(); + + active = samples[0]; + active.activate(); + + container.addEventListener("click", setActivateSample); + + trash_can.addEventListener("dragover", allowDropEvent); + trash_can.addEventListener("dragenter", function () { + this.parentElement.setAttribute("drag-state", "enter"); + }); + trash_can.addEventListener("dragleave", function (e) { + this.parentElement.setAttribute("drag-state", "none"); + }); + trash_can.addEventListener("drop", deleteSample); + + UIColorPicker.subscribe("picker", function (color) { + if (active) active.updateColor(color); + }); + }; + + return { + init: init, + getSampleColor: getSampleColor, + unsetActiveSample: unsetActiveSample, + }; + })(); + + /** + * Canvas Samples + */ + var CanvasSamples = (function CanvasSamples() { + var active = null; + var canvas = null; + var samples = []; + var zindex = null; + var tutorial = true; + + var CanvasSample = function CanvasSample(color, posX, posY) { + var node = document.createElement("div"); + var pick = document.createElement("div"); + var delete_btn = document.createElement("div"); + node.className = "sample"; + pick.className = "pick"; + delete_btn.className = "delete"; + + this.uid = samples.length; + this.node = node; + this.color = color; + this.updateBgColor(); + this.zIndex = 1; + + node.style.top = posY - 50 + "px"; + node.style.left = posX - 50 + "px"; + node.setAttribute("sample-id", this.uid); + + node.appendChild(pick); + node.appendChild(delete_btn); + + var activate = function activate() { + setActiveSample(this); + }.bind(this); + + node.addEventListener("dblclick", activate); + pick.addEventListener("click", activate); + delete_btn.addEventListener("click", this.deleteSample.bind(this)); + + UIComponent.makeDraggable(node); + UIComponent.makeResizable(node); + + samples.push(this); + canvas.appendChild(node); + return this; + }; + + CanvasSample.prototype.updateBgColor = function updateBgColor() { + this.node.style.backgroundColor = this.color.getColor(); + }; + + CanvasSample.prototype.updateColor = function updateColor(color) { + this.color.copy(color); + this.updateBgColor(); + }; + + CanvasSample.prototype.updateZIndex = function updateZIndex(value) { + this.zIndex = value; + this.node.style.zIndex = value; + }; + + CanvasSample.prototype.activate = function activate() { + this.node.setAttribute("data-active", "true"); + zindex.setAttribute("data-active", "true"); + + UIColorPicker.setColor("picker", this.color); + InputSliderManager.setValue("z-index", this.zIndex); + }; + + CanvasSample.prototype.deactivate = function deactivate() { + this.node.removeAttribute("data-active"); + zindex.removeAttribute("data-active"); + }; + + CanvasSample.prototype.deleteSample = function deleteSample() { + if (active === this) unsetActiveSample(); + canvas.removeChild(this.node); + samples[this.uid] = null; + }; + + CanvasSample.prototype.updatePosition = function updatePosition( + posX, + posY, + ) { + this.node.style.top = posY - this.startY + "px"; + this.node.style.left = posX - this.startX + "px"; + }; + + var canvasDropEvent = function canvasDropEvent(e) { + var color = Tool.getSampleColorFrom(e); + + if (color) { + var offsetX = e.pageX - canvas.offsetLeft; + var offsetY = e.pageY - canvas.offsetTop; + var sample = new CanvasSample(color, offsetX, offsetY); + if (tutorial) { + tutorial = false; + canvas.removeAttribute("data-tutorial"); + var info = new CanvasSample(new Color(), 100, 100); + info.node.setAttribute("data-tutorial", "dblclick"); + } + } + }; + + var setActiveSample = function setActiveSample(sample) { + ColorPickerSamples.unsetActiveSample(); + Tool.unsetVoidSample(); + unsetActiveSample(); + active = sample; + active.activate(); + }; + + var unsetActiveSample = function unsetActiveSample() { + if (active) active.deactivate(); + active = null; + }; + + var createToggleBgButton = function createToggleBgButton() { + var button = document.createElement("div"); + var state = false; + button.className = "toggle-bg"; + canvas.appendChild(button); + + button.addEventListener("click", function () { + console.log(state); + state = !state; + canvas.setAttribute("data-bg", state); + }); + }; + + var init = function init() { + canvas = getElemById("canvas"); + zindex = getElemById("zindex"); + + canvas.addEventListener("dragover", allowDropEvent); + canvas.addEventListener("drop", canvasDropEvent); + + createToggleBgButton(); + + UIColorPicker.subscribe("picker", function (color) { + if (active) active.updateColor(color); + }); + + InputSliderManager.subscribe("z-index", function (value) { + if (active) active.updateZIndex(value); + }); + + UIComponent.makeResizable(canvas, "height"); + }; + + return { + init: init, + unsetActiveSample: unsetActiveSample, + }; + })(); + + var StateButton = function StateButton(node, state) { + this.state = false; + this.callback = null; + + node.addEventListener( + "click", + function () { + this.state = !this.state; + if (typeof this.callback === "function") this.callback(this.state); + }.bind(this), + ); + }; + + StateButton.prototype.set = function set() { + this.state = true; + if (typeof this.callback === "function") this.callback(this.state); + }; + + StateButton.prototype.unset = function unset() { + this.state = false; + if (typeof this.callback === "function") this.callback(this.state); + }; + + StateButton.prototype.subscribe = function subscribe(func) { + this.callback = func; + }; + + /** + * Tool + */ + var Tool = (function Tool() { + var samples = []; + var controls = null; + var void_sw; + + var createPickerModeSwitch = function createPickerModeSwitch() { + var parent = getElemById("controls"); + var icon = document.createElement("div"); + var button = document.createElement("div"); + var HWB = document.createElement("div"); + var hsl = document.createElement("div"); + var active = null; + + icon.className = "icon picker-icon"; + button.className = "switch"; + button.appendChild(HWB); + button.appendChild(hsl); + + HWB.textContent = "HWB"; + hsl.textContent = "HSL"; + + active = hsl; + active.setAttribute("data-active", "true"); + + function switchPickingModeTo(elem) { + active.removeAttribute("data-active"); + active = elem; + active.setAttribute("data-active", "true"); + UIColorPicker.setPickerMode("picker", active.textContent); + } + + var picker_sw = new StateButton(icon); + picker_sw.subscribe(function () { + if (active === HWB) switchPickingModeTo(hsl); + else switchPickingModeTo(HWB); + }); + + HWB.addEventListener("click", function () { + switchPickingModeTo(HWB); + }); + hsl.addEventListener("click", function () { + switchPickingModeTo(hsl); + }); + + parent.appendChild(icon); + parent.appendChild(button); + }; + + var setPickerDragAndDrop = function setPickerDragAndDrop() { + var preview = document.querySelector("#picker .preview-color"); + var picking_area = document.querySelector("#picker .picking-area"); + + preview.setAttribute("draggable", "true"); + preview.addEventListener("drop", drop); + preview.addEventListener("dragstart", dragStart); + preview.addEventListener("dragover", allowDropEvent); + + picking_area.addEventListener("drop", drop); + picking_area.addEventListener("dragover", allowDropEvent); + + function drop(e) { + var color = getSampleColorFrom(e); + UIColorPicker.setColor("picker", color); + } + + function dragStart(e) { + e.dataTransfer.setData("sampleID", "picker"); + e.dataTransfer.setData("location", "picker"); + } + }; + + var getSampleColorFrom = function getSampleColorFrom(e) { + var sampleID = e.dataTransfer.getData("sampleID"); + var location = e.dataTransfer.getData("location"); + + if (location === "picker") return UIColorPicker.getColor(sampleID); + if (location === "picker-samples") + return ColorPickerSamples.getSampleColor(sampleID); + if (location === "palette-samples") + return ColorPalette.getSampleColor(sampleID); + }; + + var setVoidSwitch = function setVoidSwitch() { + var void_sample = getElemById("void-sample"); + void_sw = new StateButton(void_sample); + void_sw.subscribe(function (state) { + void_sample.setAttribute("data-active", state); + if (state === true) { + ColorPickerSamples.unsetActiveSample(); + CanvasSamples.unsetActiveSample(); + } + }); + }; + + var unsetVoidSample = function unsetVoidSample() { + void_sw.unset(); + }; + + var init = function init() { + controls = getElemById("controls"); + + var color = new Color(); + color.setHSL(0, 51, 51); + UIColorPicker.setColor("picker", color); + + setPickerDragAndDrop(); + createPickerModeSwitch(); + setVoidSwitch(); + }; + + return { + init: init, + unsetVoidSample: unsetVoidSample, + getSampleColorFrom: getSampleColorFrom, + }; + })(); + + var init = function init() { + UIColorPicker.init(); + InputSliderManager.init(); + ColorInfo.init(); + ColorPalette.init(); + ColorPickerSamples.init(); + CanvasSamples.init(); + Tool.init(); + }; + + return { + init: init, + }; })(); diff --git a/tools/color-picker/styles.css b/tools/color-picker/styles.css index bb174ebf..3dba43e2 100644 --- a/tools/color-picker/styles.css +++ b/tools/color-picker/styles.css @@ -3,237 +3,247 @@ */ .ui-color-picker { - width: 420px; - margin: 0; - border: 1px solid #DDD; - background-color: #FFF; - display: table; - user-select: none; + width: 420px; + margin: 0; + border: 1px solid #ddd; + background-color: #fff; + display: table; + user-select: none; } .ui-color-picker .picking-area { - width: 198px; - height: 198px; - margin: 5px; - border: 1px solid #DDD; - position: relative; - float: left; - display: table; + width: 198px; + height: 198px; + margin: 5px; + border: 1px solid #ddd; + position: relative; + float: left; + display: table; } .ui-color-picker .picking-area:hover { - cursor: default; + cursor: default; } /* HSV format - Hue-Saturation-Value(Brightness) */ .ui-color-picker .picking-area { - background: url('picker_mask_200.png') center center; + background: url("picker_mask_200.png") center center; - background: linear-gradient(to top, - #000 0%, - rgb(0 0 0 / 0) 100%), - linear-gradient(to right, - #FFF 0%, - rgb(255 255 255 / 0) 100%); - background-color: #F00; + background: linear-gradient(to top, #000 0%, rgb(0 0 0 / 0) 100%), + linear-gradient(to right, #fff 0%, rgb(255 255 255 / 0) 100%); + background-color: #f00; } /* HSL format - Hue-Saturation-Lightness */ -.ui-color-picker[data-mode='HSL'] .picking-area { - background: linear-gradient(to bottom, - hsl(0 0% 100%) 0%, - hsl(0 0% 100% / 0) 50%, - hsl(0 0% 0% / 0) 50%, - hsl(0 0% 0%) 100%), - linear-gradient(to right, - hsl(0 0% 50%) 0%, - hsl(0 0% 50% / 0) 100%); - background-color: #F00; +.ui-color-picker[data-mode="HSL"] .picking-area { + background: linear-gradient( + to bottom, + hsl(0 0% 100%) 0%, + hsl(0 0% 100% / 0) 50%, + hsl(0 0% 0% / 0) 50%, + hsl(0 0% 0%) 100% + ), + linear-gradient(to right, hsl(0 0% 50%) 0%, hsl(0 0% 50% / 0) 100%); + background-color: #f00; } .ui-color-picker .picker { - width: 10px; - height: 10px; - border-radius: 50%; - border: 1px solid #FFF; - position: absolute; - top: 45%; - left: 45%; + width: 10px; + height: 10px; + border-radius: 50%; + border: 1px solid #fff; + position: absolute; + top: 45%; + left: 45%; } .ui-color-picker .picker:before { - width: 8px; - height: 8px; - content: ""; - position: absolute; - border: 1px solid #999; - border-radius: 50%; + width: 8px; + height: 8px; + content: ""; + position: absolute; + border: 1px solid #999; + border-radius: 50%; } .ui-color-picker .hue, .ui-color-picker .alpha { - width: 198px; - height: 28px; - margin: 5px; - border: 1px solid #FFF; - float: left; + width: 198px; + height: 28px; + margin: 5px; + border: 1px solid #fff; + float: left; } .ui-color-picker .hue { - background: url("hue.png") center; - background: linear-gradient(to right, #F00, #FF0, #0F0, #0FF, #00F, #F0F, #F00); + background: url("hue.png") center; + background: linear-gradient( + to right, + #f00, + #ff0, + #0f0, + #0ff, + #00f, + #f0f, + #f00 + ); } .ui-color-picker .alpha { - border: 1px solid #CCC; - background: url("alpha.png"); + border: 1px solid #ccc; + background: url("alpha.png"); - background-image: conic-gradient(transparent 90deg, rgb(0 0 0 / 0.1) 90deg 180deg, transparent 180deg 270deg, rgb(0 0 0 / 0.1) 270deg); - background-size: 10px 10px; + background-image: conic-gradient( + transparent 90deg, + rgb(0 0 0 / 0.1) 90deg 180deg, + transparent 180deg 270deg, + rgb(0 0 0 / 0.1) 270deg + ); + background-size: 10px 10px; } .ui-color-picker .alpha-mask { - width: 100%; - height: 100%; - background: url("alpha_mask.png"); + width: 100%; + height: 100%; + background: url("alpha_mask.png"); } .ui-color-picker .slider-picker { - width: 2px; - height: 100%; - border: 1px solid #777; - background-color: #FFF; - position: relative; - top: -1px; + width: 2px; + height: 100%; + border: 1px solid #777; + background-color: #fff; + position: relative; + top: -1px; } /* input HSV and RGB */ .ui-color-picker .info { - width: 200px; - margin: 5px; - float: left; + width: 200px; + margin: 5px; + float: left; } .ui-color-picker .info * { - float: left; + float: left; } .ui-color-picker .input { - width: 64px; - margin: 5px 2px; - float: left; + width: 64px; + margin: 5px 2px; + float: left; } .ui-color-picker .input .name { - height: 20px; - width: 30px; - text-align: center; - font-size: 14px; - line-height: 18px; - float: left; + height: 20px; + width: 30px; + text-align: center; + font-size: 14px; + line-height: 18px; + float: left; } .ui-color-picker .input input { - width: 30px; - height: 18px; - margin: 0; - padding: 0; - border: 1px solid #DDD; - text-align: center; - float: right; + width: 30px; + height: 18px; + margin: 0; + padding: 0; + border: 1px solid #ddd; + text-align: center; + float: right; user-select: text; } .ui-color-picker .input[data-topic="lightness"] { - display: none; + display: none; } -.ui-color-picker[data-mode='HSL'] .input[data-topic="value"] { - display: none; +.ui-color-picker[data-mode="HSL"] .input[data-topic="value"] { + display: none; } -.ui-color-picker[data-mode='HSL'] .input[data-topic="lightness"] { - display: block; +.ui-color-picker[data-mode="HSL"] .input[data-topic="lightness"] { + display: block; } .ui-color-picker .input[data-topic="alpha"] { - margin-top: 10px; - width: 93px; + margin-top: 10px; + width: 93px; } .ui-color-picker .input[data-topic="alpha"] > .name { - width: 60px; + width: 60px; } .ui-color-picker .input[data-topic="alpha"] > input { - float: right; + float: right; } .ui-color-picker .input[data-topic="hexa"] { - width: auto; - float: right; - margin: 6px 8px 0 0; + width: auto; + float: right; + margin: 6px 8px 0 0; } .ui-color-picker .input[data-topic="hexa"] > .name { - display: none; + display: none; } .ui-color-picker .input[data-topic="hexa"] > input { - width: 90px; - height: 24px; - padding: 2px 0; - box-sizing: border-box; + width: 90px; + height: 24px; + padding: 2px 0; + box-sizing: border-box; } /* Preview color */ .ui-color-picker .preview { - width: 95px; - height: 53px; - margin: 5px; - margin-top: 10px; - border: 1px solid #DDD; - background-image: url("alpha.png"); - float: left; - position: relative; + width: 95px; + height: 53px; + margin: 5px; + margin-top: 10px; + border: 1px solid #ddd; + background-image: url("alpha.png"); + float: left; + position: relative; } .ui-color-picker .preview:before { - height: 100%; - width: 50%; - left: 50%; - top: 0; - content: ""; - background: #FFF; - position: absolute; - z-index: 1; + height: 100%; + width: 50%; + left: 50%; + top: 0; + content: ""; + background: #fff; + position: absolute; + z-index: 1; } .ui-color-picker .preview-color { - width: 100%; - height: 100%; - background-color: rgb(255 0 0 / 0.5); - position: absolute; - z-index: 1; + width: 100%; + height: 100%; + background-color: rgb(255 0 0 / 0.5); + position: absolute; + z-index: 1; } .ui-color-picker .switch_mode { - width: 10px; - height: 20px; - position: relative; - border-radius: 5px 0 0 5px; - border: 1px solid #DDD; - background-color: #EEE; - left: -12px; - top: -1px; - z-index: 1; - transition: all 0.5s; + width: 10px; + height: 20px; + position: relative; + border-radius: 5px 0 0 5px; + border: 1px solid #ddd; + background-color: #eee; + left: -12px; + top: -1px; + z-index: 1; + transition: all 0.5s; } .ui-color-picker .switch_mode:hover { - background-color: #CCC; - cursor: pointer; + background-color: #ccc; + cursor: pointer; } /* @@ -241,63 +251,64 @@ */ .ui-input-slider { - height: 20px; - user-select: none; + height: 20px; + user-select: none; } .ui-input-slider * { - float: left; - height: 100%; - line-height: 100%; + float: left; + height: 100%; + line-height: 100%; } /* Input Slider */ .ui-input-slider > input { - margin: 0; - padding: 0; - width: 50px; - text-align: center; - box-sizing: border-box; + margin: 0; + padding: 0; + width: 50px; + text-align: center; + box-sizing: border-box; } .ui-input-slider-info { - width: 90px; - padding: 0px 10px 0px 0px; - text-align: right; - text-transform: lowercase; + width: 90px; + padding: 0px 10px 0px 0px; + text-align: right; + text-transform: lowercase; } -.ui-input-slider-left, .ui-input-slider-right { - width: 16px; - cursor: pointer; - background: url("arrows.png") center left no-repeat; +.ui-input-slider-left, +.ui-input-slider-right { + width: 16px; + cursor: pointer; + background: url("arrows.png") center left no-repeat; } .ui-input-slider-right { - background: url("arrows.png") center right no-repeat; + background: url("arrows.png") center right no-repeat; } .ui-input-slider-name { - width: 90px; - padding: 0 10px 0 0; - text-align: right; - text-transform: lowercase; + width: 90px; + padding: 0 10px 0 0; + text-align: right; + text-transform: lowercase; } .ui-input-slider-btn-set { - width: 25px; - background-color: #2C9FC9; - border-radius: 5px; - color: #FFF; - font-weight: bold; - line-height: 14px; - text-align: center; + width: 25px; + background-color: #2c9fc9; + border-radius: 5px; + color: #fff; + font-weight: bold; + line-height: 14px; + text-align: center; } .ui-input-slider-btn-set:hover { - background-color: #379B4A; - cursor: pointer; + background-color: #379b4a; + cursor: pointer; } /* @@ -305,58 +316,57 @@ */ body { - max-width: 1000px; - margin: 0 auto; - font-family: "Segoe UI", Arial, Helvetica, sans-serif; - box-shadow: 0 0 5px 0 #999; - box-sizing: border-box; - user-select: none; - + max-width: 1000px; + margin: 0 auto; + font-family: "Segoe UI", Arial, Helvetica, sans-serif; + box-shadow: 0 0 5px 0 #999; + box-sizing: border-box; + user-select: none; } /** * Resize Handle */ .resize-handle { - width: 10px; - height: 10px; - background: url('resize.png') center center no-repeat; - position: absolute; - bottom: 0; - right: 0; + width: 10px; + height: 10px; + background: url("resize.png") center center no-repeat; + position: absolute; + bottom: 0; + right: 0; } -[data-resize='both']:hover { - cursor: nw-resize !important; +[data-resize="both"]:hover { + cursor: nw-resize !important; } -[data-resize='width']:hover { - cursor: w-resize !important; +[data-resize="width"]:hover { + cursor: w-resize !important; } -[data-resize='height']:hover { - cursor: n-resize !important; +[data-resize="height"]:hover { + cursor: n-resize !important; } -[data-hidden='true'] { - display: none; +[data-hidden="true"] { + display: none; } -[data-collapsed='true'] { - height: 0 !important; +[data-collapsed="true"] { + height: 0 !important; } .block { - display: table; + display: table; } /** * Container */ #container { - width: 100%; - box-sizing: border-box; - display: grid; + width: 100%; + box-sizing: border-box; + display: grid; grid-template-columns: 1fr; } @@ -365,22 +375,22 @@ body { */ #picker { - padding: 10px; - width: 980px; + padding: 10px; + width: 980px; } .ui-color-picker { - padding: 3px 5px; - float: left; - border-color: #FFF; + padding: 3px 5px; + float: left; + border-color: #fff; } .ui-color-picker .switch_mode { - display: none; + display: none; } .ui-color-picker .preview-color:hover { - cursor: move; + cursor: move; } /** @@ -388,87 +398,87 @@ body { */ #picker-samples { - width: 375px; - height: 114px; - max-height: 218px; - margin: 0 10px 0 30px; - overflow: hidden; - position: relative; - float: left; + width: 375px; + height: 114px; + max-height: 218px; + margin: 0 10px 0 30px; + overflow: hidden; + position: relative; + float: left; - transition: all 0.2s; + transition: all 0.2s; } #picker-samples .sample { - width: 40px; - height: 40px; - margin: 5px; - border: 1px solid #DDD; - position: absolute; - float: left; - transition: all 0.2s; + width: 40px; + height: 40px; + margin: 5px; + border: 1px solid #ddd; + position: absolute; + float: left; + transition: all 0.2s; } #picker-samples .sample:hover { - cursor: pointer; - border-color: #BBB; - transform: scale(1.15); - border-radius: 3px; + cursor: pointer; + border-color: #bbb; + transform: scale(1.15); + border-radius: 3px; } -#picker-samples .sample[data-active='true'] { - border-color: #999; +#picker-samples .sample[data-active="true"] { + border-color: #999; } -#picker-samples .sample[data-active='true']:after { - content: ""; - position: absolute; - background: url('arrow.png') center no-repeat; - width: 100%; - height: 12px; - top: -12px; - z-index: 2; +#picker-samples .sample[data-active="true"]:after { + content: ""; + position: absolute; + background: url("arrow.png") center no-repeat; + width: 100%; + height: 12px; + top: -12px; + z-index: 2; } #picker-samples #add-icon { - width: 100%; - height: 100%; - position: relative; - box-shadow: inset 0px 0px 2px 0px #DDD; + width: 100%; + height: 100%; + position: relative; + box-shadow: inset 0px 0px 2px 0px #ddd; } #picker-samples #add-icon:hover { - cursor: pointer; - border-color: #DDD; - box-shadow: inset 0px 0px 5px 0px #CCC; + cursor: pointer; + border-color: #ddd; + box-shadow: inset 0px 0px 5px 0px #ccc; } #picker-samples #add-icon:before, #picker-samples #add-icon:after { - content: ""; - position: absolute; - background-color: #EEE; - box-shadow: 0 0 1px 0 #EEE; + content: ""; + position: absolute; + background-color: #eee; + box-shadow: 0 0 1px 0 #eee; } #picker-samples #add-icon:before { - width: 70%; - height: 16%; - top: 42%; - left: 15%; + width: 70%; + height: 16%; + top: 42%; + left: 15%; } #picker-samples #add-icon:after { - width: 16%; - height: 70%; - top: 15%; - left: 42%; + width: 16%; + height: 70%; + top: 15%; + left: 42%; } #picker-samples #add-icon:hover:before, #picker-samples #add-icon:hover:after { - background-color: #DDD; - box-shadow: 0 0 1px 0 #DDD; + background-color: #ddd; + box-shadow: 0 0 1px 0 #ddd; } /** @@ -476,72 +486,72 @@ body { */ #controls { - width: 110px; - padding: 10px; - float: right; + width: 110px; + padding: 10px; + float: right; } #controls #picker-switch { - text-align: center; - float: left; + text-align: center; + float: left; } #controls .icon { - width: 48px; - height: 48px; - margin: 10px 0; - background-repeat: no-repeat; - background-position: center; - border: 1px solid #DDD; - display: table; - float: left; + width: 48px; + height: 48px; + margin: 10px 0; + background-repeat: no-repeat; + background-position: center; + border: 1px solid #ddd; + display: table; + float: left; } #controls .icon:hover { - cursor: pointer; + cursor: pointer; } #controls .picker-icon { - background-image: url('picker.png'); + background-image: url("picker.png"); } #controls #void-sample { - margin-right: 10px; - background-image: url('void.png'); - background-position: center left; + margin-right: 10px; + background-image: url("void.png"); + background-position: center left; } -#controls #void-sample[data-active='true'] { - border-color: #CCC; - background-position: center right; +#controls #void-sample[data-active="true"] { + border-color: #ccc; + background-position: center right; } #controls .switch { - width: 106px; - padding: 1px; - border: 1px solid #CCC; - font-size: 14px; - text-align: center; - line-height: 24px; - overflow: hidden; - float: left; + width: 106px; + padding: 1px; + border: 1px solid #ccc; + font-size: 14px; + text-align: center; + line-height: 24px; + overflow: hidden; + float: left; } #controls .switch:hover { - cursor: pointer; + cursor: pointer; } #controls .switch > * { - width: 50%; - padding: 2px 0; - background-color: #EEE; - float: left; + width: 50%; + padding: 2px 0; + background-color: #eee; + float: left; } -#controls .switch [data-active='true'] { - color: #FFF; - background-image: url('grain.png'); - background-color: #777; +#controls .switch [data-active="true"] { + color: #fff; + background-image: url("grain.png"); + background-color: #777; } /** @@ -549,36 +559,36 @@ body { */ #delete { - width: 100%; - height: 94px; - background-color: #DDD; - background-image: url('grain.png'); - background-repeat: repeat; + width: 100%; + height: 94px; + background-color: #ddd; + background-image: url("grain.png"); + background-repeat: repeat; - text-align: center; - color: #777; + text-align: center; + color: #777; - position: relative; - float: right; + position: relative; + float: right; } #delete #trash-can { - width: 80%; - height: 80%; - border: 2px dashed #FFF; - border-radius: 5px; - background: url('trash-can.png') no-repeat center; + width: 80%; + height: 80%; + border: 2px dashed #fff; + border-radius: 5px; + background: url("trash-can.png") no-repeat center; - position: absolute; - top: 10%; - left: 10%; - box-sizing: border-box; + position: absolute; + top: 10%; + left: 10%; + box-sizing: border-box; - transition: all 0.2s; + transition: all 0.2s; } -#delete[drag-state='enter'] { - background-color: #999; +#delete[drag-state="enter"] { + background-color: #999; } /** @@ -586,94 +596,94 @@ body { */ #color-theme { - margin: 0 8px 0 0; - border: 1px solid #EEE; - display: inline-block; - float: right; + margin: 0 8px 0 0; + border: 1px solid #eee; + display: inline-block; + float: right; } #color-theme .box { - width: 80px; - height: 92px; - float: left; + width: 80px; + height: 92px; + float: left; } /** * Color info box */ #color-info { - width: 360px; - float: left; + width: 360px; + float: left; } #color-info .title { - width: 100%; - padding: 15px; - font-size: 18px; - text-align: center; - background-image: url('color-wheel.png'); - background-repeat:no-repeat; - background-position: center left 30%; + width: 100%; + padding: 15px; + font-size: 18px; + text-align: center; + background-image: url("color-wheel.png"); + background-repeat: no-repeat; + background-position: center left 30%; } #color-info .copy-container { - position: absolute; - top: -100%; + position: absolute; + top: -100%; } #color-info .property { - min-width: 280px; - height: 30px; - margin: 10px 0; - text-align: center; - line-height: 30px; + min-width: 280px; + height: 30px; + margin: 10px 0; + text-align: center; + line-height: 30px; } #color-info .property > * { - float: left; + float: left; } #color-info .property .type { - width: 60px; - height: 100%; - padding: 0 16px 0 0; - text-align: right; + width: 60px; + height: 100%; + padding: 0 16px 0 0; + text-align: right; } #color-info .property .value { - width: 200px; - height: 100%; - padding: 0 10px; - font-size: 16px; - color: #777; - text-align: center; - background-color: #FFF; - border: none; + width: 200px; + height: 100%; + padding: 0 10px; + font-size: 16px; + color: #777; + text-align: center; + background-color: #fff; + border: none; } #color-info .property .value:hover { - color: #37994A; + color: #37994a; } #color-info .property .value:hover + .copy { - background-position: center right; + background-position: center right; } #color-info .property .copy { - width: 24px; - height: 100%; - padding: 0 5px; - background-color: #FFF; - background-image: url('copy.png'); - background-repeat: no-repeat; - background-position: center left; - border-left: 1px solid #EEE; - text-align: right; - float: left; + width: 24px; + height: 100%; + padding: 0 5px; + background-color: #fff; + background-image: url("copy.png"); + background-repeat: no-repeat; + background-position: center left; + border-left: 1px solid #eee; + text-align: right; + float: left; } #color-info .property .copy:hover { - background-position: center right; + background-position: center right; } /** @@ -681,95 +691,95 @@ body { */ #palette { - display: grid; + display: grid; grid-template-columns: auto auto; - background-color: #EEE; - color: #777; + background-color: #eee; + color: #777; } #color-palette { } #color-palette .container { - width: 100%; - height: 50px; - line-height: 50px; - overflow: hidden; - float: left; - transition: all 0.5s; + width: 100%; + height: 50px; + line-height: 50px; + overflow: hidden; + float: left; + transition: all 0.5s; } #color-palette .container > * { - float: left; + float: left; } #color-palette .title { - width: 100px; - padding: 0 10px; - text-align: right; - line-height: inherit; + width: 100px; + padding: 0 10px; + text-align: right; + line-height: inherit; } #color-palette .palette { - width: 456px; - height: 38px; - margin: 3px; - padding: 3px; - display: table; - background-color: #FFF; + width: 456px; + height: 38px; + margin: 3px; + padding: 3px; + display: table; + background-color: #fff; } #color-palette .palette .sample { - width: 30px; - height: 30px; - margin: 3px; - position: relative; - border: 1px solid #DDD; - float: left; - transition: all 0.2s; + width: 30px; + height: 30px; + margin: 3px; + position: relative; + border: 1px solid #ddd; + float: left; + transition: all 0.2s; } #color-palette .palette .sample:hover { - cursor: pointer; - border-color: #BBB; - transform: scale(1.15); - border-radius: 3px; + cursor: pointer; + border-color: #bbb; + transform: scale(1.15); + border-radius: 3px; } #color-palette .controls { } #color-palette .controls > * { - float: left; + float: left; } #color-palette .controls > *:hover { - cursor: pointer; + cursor: pointer; } #color-palette .controls .lock { - width: 24px; - height: 24px; - margin: 10px; - padding: 3px; - background-image: url('lock.png'); - background-repeat: no-repeat; - background-position: bottom right; + width: 24px; + height: 24px; + margin: 10px; + padding: 3px; + background-image: url("lock.png"); + background-repeat: no-repeat; + background-position: bottom right; } #color-palette .controls .lock:hover { - /*background-image: url('images/unlocked-hover.png');*/ - background-position: bottom left; + /*background-image: url('images/unlocked-hover.png');*/ + background-position: bottom left; } -#color-palette .controls .lock[locked-state='true'] { - /*background-image: url('images/locked.png');*/ - background-position: top left ; +#color-palette .controls .lock[locked-state="true"] { + /*background-image: url('images/locked.png');*/ + background-position: top left; } -#color-palette .controls .lock[locked-state='true']:hover { - /*background-image: url('images/lock-hover.png');*/ - background-position: top right; +#color-palette .controls .lock[locked-state="true"]:hover { + /*background-image: url('images/lock-hover.png');*/ + background-position: top right; } /** @@ -777,117 +787,117 @@ body { */ #canvas { - width: 100%; - height: 300px; - min-height: 250px; - border-top: 1px solid #DDD; - background-image: url('grain.png'); - background-repeat: repeat; - position: relative; - float: left; + width: 100%; + height: 300px; + min-height: 250px; + border-top: 1px solid #ddd; + background-image: url("grain.png"); + background-repeat: repeat; + position: relative; + float: left; } -#canvas[data-tutorial='drop'] { - text-align: center; - font-size: 30px; - color: #777; +#canvas[data-tutorial="drop"] { + text-align: center; + font-size: 30px; + color: #777; } -#canvas[data-tutorial='drop']:before { - content: "Drop colors here to compare"; - width: 40%; - padding: 30px 9% 70px 11%; +#canvas[data-tutorial="drop"]:before { + content: "Drop colors here to compare"; + width: 40%; + padding: 30px 9% 70px 11%; - background-image: url('drop.png'); - background-repeat: no-repeat; - background-position: left 35px top 60%; + background-image: url("drop.png"); + background-repeat: no-repeat; + background-position: left 35px top 60%; - text-align: right; + text-align: right; - border: 3px dashed rgb(221 221 221); - border-radius: 15px; + border: 3px dashed rgb(221 221 221); + border-radius: 15px; - position: absolute; - top: 50px; - left: 20%; + position: absolute; + top: 50px; + left: 20%; } -#canvas[data-tutorial='drop']:after { - content: "adjust, change or modify"; - width: 40%; - font-size: 24px; - position: absolute; - top: 130px; - left: 32%; - z-index: 2; +#canvas[data-tutorial="drop"]:after { + content: "adjust, change or modify"; + width: 40%; + font-size: 24px; + position: absolute; + top: 130px; + left: 32%; + z-index: 2; } -#canvas [data-tutorial='dblclick'] { - background-color: #999 !important; +#canvas [data-tutorial="dblclick"] { + background-color: #999 !important; } -#canvas [data-tutorial='dblclick']:before { - content: "double click to activate"; - width: 80px; - color: #FFF; - position: absolute; - top: 10%; - left: 20%; - z-index: 2; +#canvas [data-tutorial="dblclick"]:before { + content: "double click to activate"; + width: 80px; + color: #fff; + position: absolute; + top: 10%; + left: 20%; + z-index: 2; } #canvas .sample { - width: 100px; - height: 100px; - min-width: 20px; - min-height: 20px; - position: absolute; - border: 1px solid rgb(255 255 255 / 0.3); -} + width: 100px; + height: 100px; + min-width: 20px; + min-height: 20px; + position: absolute; + border: 1px solid rgb(255 255 255 / 0.3); +} #canvas .sample:hover { - cursor: move; + cursor: move; } -#canvas .sample[data-active='true']:after { - content: ""; - position: absolute; - background: url('arrow.png') center no-repeat; - width: 100%; - height: 12px; - top: -12px; - z-index: 2; +#canvas .sample[data-active="true"]:after { + content: ""; + position: absolute; + background: url("arrow.png") center no-repeat; + width: 100%; + height: 12px; + top: -12px; + z-index: 2; } #canvas .sample:hover > * { - cursor: pointer; - display: block !important; + cursor: pointer; + display: block !important; } #canvas .sample .resize-handle { - display: none; + display: none; } #canvas .sample .pick { - width: 10px; - height: 10px; - margin: 5px; - background: url('pick.png') center no-repeat; - position: absolute; - top: 0; - left: 0; - display: none; + width: 10px; + height: 10px; + margin: 5px; + background: url("pick.png") center no-repeat; + position: absolute; + top: 0; + left: 0; + display: none; } #canvas .sample .delete { - width: 10px; - height: 10px; - margin: 5px; - background: url('close.png') center no-repeat; - position: absolute; - top: 0; - right: 0; - display: none; + width: 10px; + height: 10px; + margin: 5px; + background: url("close.png") center no-repeat; + position: absolute; + top: 0; + right: 0; + display: none; } /** @@ -895,51 +905,51 @@ body { */ #canvas .toggle-bg { - width: 16px; - height: 16px; - margin: 5px; - background: url("images/canvas-controls.png") center left no-repeat; - position: absolute; - top: 0; - right: 0; + width: 16px; + height: 16px; + margin: 5px; + background: url("images/canvas-controls.png") center left no-repeat; + position: absolute; + top: 0; + right: 0; } #canvas .toggle-bg:hover { - cursor: pointer; + cursor: pointer; } -#canvas[data-bg='true'] { - background: none; +#canvas[data-bg="true"] { + background: none; } -#canvas[data-bg='true'] .toggle-bg { - background: url('canvas-controls.png') center right no-repeat; +#canvas[data-bg="true"] .toggle-bg { + background: url("canvas-controls.png") center right no-repeat; } #zindex { - height: 20px; - margin: 5px; - font-size: 16px; - position: absolute; - opacity: 0; - top: -10000px; - left: 0; - color: #777; - float: left; - transition: opacity 1s; + height: 20px; + margin: 5px; + font-size: 16px; + position: absolute; + opacity: 0; + top: -10000px; + left: 0; + color: #777; + float: left; + transition: opacity 1s; } #zindex input { - border: 1px solid #DDD; - font-size: 16px; - color: #777; + border: 1px solid #ddd; + font-size: 16px; + color: #777; } #zindex .ui-input-slider-info { - width: 60px; + width: 60px; } -#zindex[data-active='true'] { - top: 0; - opacity: 1; +#zindex[data-active="true"] { + top: 0; + opacity: 1; } diff --git a/transitions/js-transitions.html b/transitions/js-transitions.html index 534eadbe..2cf90426 100644 --- a/transitions/js-transitions.html +++ b/transitions/js-transitions.html @@ -1,43 +1,47 @@ - + JavaScript transitions demo @@ -45,13 +49,16 @@

    Click anywhere to move the ball

    - diff --git a/types/filterfunctions.html b/types/filterfunctions.html index 4bd183f1..4084723f 100644 --- a/types/filterfunctions.html +++ b/types/filterfunctions.html @@ -1,4 +1,4 @@ - + @@ -74,7 +74,7 @@ }); function setSlider(filter) { - switch(filter) { + switch (filter) { case "blur": slider.value = 0; slider.min = 0; diff --git a/variable-fonts/font-stretch.html b/variable-fonts/font-stretch.html index f0e95fc1..dac37a68 100644 --- a/variable-fonts/font-stretch.html +++ b/variable-fonts/font-stretch.html @@ -1,95 +1,91 @@ - - - - - Variable fonts: font-stretch - - - - - - - -
    - -
    -

    an elephantine lizard

    -

    an elephantine lizard

    -

    an elephantine lizard

    -
    - -
    - - - - - -
    - -
    - - - - + + + + + Variable fonts: font-stretch + + + + + + + +
    +
    +

    an elephantine lizard

    +

    an elephantine lizard

    +

    an elephantine lizard

    +
    +
    + + + + + +
    + +
    + + + + diff --git a/variable-fonts/font-weight.html b/variable-fonts/font-weight.html index a69b4601..7c6017a3 100644 --- a/variable-fonts/font-weight.html +++ b/variable-fonts/font-weight.html @@ -1,79 +1,79 @@ - - - - - Variable fonts: weight - - - - - - - -
    - -
    -

    ...it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill.

    -
    - -
    - - - - - -
    - -
    - - - - + + + + + Variable fonts: weight + + + + + + + +
    +
    +

    + ...it would not be wonderful to meet a Megalosaurus, forty feet long + or so, waddling like an elephantine lizard up Holborn Hill. +

    +
    +
    + + + + + +
    + +
    + + + + diff --git a/variable-fonts/grade.html b/variable-fonts/grade.html index 6c43f92d..edad0d67 100644 --- a/variable-fonts/grade.html +++ b/variable-fonts/grade.html @@ -1,214 +1,230 @@ - + - - - - Variable Font example - grade - - - - - - - -
    -
    -
    -
    + .demo2 { + --text-axis: 88; + } + + + + + + +
    +
    +
    +

    Grade

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

    Grade

    +
    +
    + + +
    +
    -
    - - -
    -
    -
    -
    - -
    - - - +
    + +
    + + diff --git a/variable-fonts/italic.html b/variable-fonts/italic.html index ab55c1d4..ee9065c9 100644 --- a/variable-fonts/italic.html +++ b/variable-fonts/italic.html @@ -1,258 +1,274 @@ - + - - - - Variable Font example - italic + + + + Variable Font example - italic - - - - - + .demo3 { + --text-axis: 1; + } + + + + + - -
    -
    -
    -
    + +
    +
    +
    +

    Italic

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

    Italic

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

    Italic

    +
    +
    + + +
    +
    -
    - - -
    -
    -
    -
    - -
    - - + // listen for changes + inputs.forEach((input) => input.addEventListener("change", handleUpdate)); + inputs.forEach((input) => + input.addEventListener("mousemove", handleUpdate), + ); + function handleUpdate(e) { + document + .querySelector(".demo3") + .style.setProperty(`--${this.id}`, this.value); + } + diff --git a/variable-fonts/oblique.html b/variable-fonts/oblique.html index 941c588f..7ca5dadf 100644 --- a/variable-fonts/oblique.html +++ b/variable-fonts/oblique.html @@ -1,76 +1,75 @@ - - - - - Variable fonts: oblique - - - - - - - -
    - -
    -

    ...it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill.

    -
    - -
    - - - - - -
    - -
    - - - - + + + + + Variable fonts: oblique + + + + + + + +
    +
    +

    + ...it would not be wonderful to meet a Megalosaurus, forty feet long + or so, waddling like an elephantine lizard up Holborn Hill. +

    +
    +
    + + + + + +
    + +
    + + + + diff --git a/variable-fonts/optical-sizing.html b/variable-fonts/optical-sizing.html index be8aa8a4..e4ccd491 100644 --- a/variable-fonts/optical-sizing.html +++ b/variable-fonts/optical-sizing.html @@ -1,290 +1,305 @@ - + - - - - Variable Font example - optical sizing + + + + Variable Font example - optical sizing - - - - - - + .demo3 { + --text-axis: 64; + } + + + + + + - -
    -
    -
    -
    + +
    +
    +
    +

    Optical Size

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

    Optical Size

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

    Optical Size

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

    Optical Size

    +
    +
    + + +
    +
    -
    - - -
    -
    -
    -
    - -
    - - + // listen for changes + inputs.forEach((input) => input.addEventListener("change", handleUpdate)); + inputs.forEach((input) => + input.addEventListener("mousemove", handleUpdate), + ); + function handleUpdate(e) { + document + .querySelector(".demo3") + .style.setProperty(`--${this.id}`, this.value); + } + diff --git a/variable-fonts/sample-page.html b/variable-fonts/sample-page.html index a56fbd60..f5f2a43d 100644 --- a/variable-fonts/sample-page.html +++ b/variable-fonts/sample-page.html @@ -1,245 +1,256 @@ - + - - - - Variable Font example page (static CSS) + + + + Variable Font example page (static CSS) - - - - + .container * { + margin: 0.5rem auto 1rem; + max-width: 42rem; + } + + + + - -
    -
    -
    -
    -

    Moby Dick

    -

    CHAPTER 1. Loomings.

    -

    - Call me Ishmael. Some years ago—never mind how long precisely–having - little or no money in my purse, and nothing particular to interest me on - shore, I thought I would sail about a little and see the watery part of - the world. It is a way I have of driving off the spleen and regulating the - circulation. Whenever I find myself growing grim about the mouth; whenever - it is a damp, drizzly November in my soul; whenever I find myself - involuntarily pausing before coffin warehouses, and bringing up the rear - of every funeral I meet; and especially whenever my hypos get such an - upper hand of me, that it requires a strong moral principle to prevent me - from deliberately stepping into the street, and methodically knocking - people’s hats off —then, I account it high time to get to sea as soon - as I can. This is my substitute for pistol and ball. With a philosophical - flourish Cato throws himself upon his sword; I quietly take to the ship. - There is nothing surprising in this. If they but knew it, almost all men - in their degree, some time or other, cherish very nearly the same feelings - towards the ocean with me. -

    -
    -
    - - -
    -
    -
    -
    -

    Moby Dick

    -

    CHAPTER 1. (hover here)

    -

    - Call me Ishmael. Some years ago—never mind how long precisely–having - little or no money in my purse, and nothing particular to interest me on - shore, I thought I would sail about a little and see the watery part of - the world. It is a way I have of driving off the spleen and regulating the - circulation. Whenever I find myself growing grim about the mouth; whenever - it is a damp, drizzly November in my soul; whenever I find myself - involuntarily pausing before coffin warehouses, and bringing up the rear - of every funeral I meet; and especially whenever my hypos get such an - upper hand of me, that it requires a strong moral principle to prevent me - from deliberately stepping into the street, and methodically knocking - people’s hats off —then, I account it high time to get to sea as soon - as I can. This is my substitute for pistol and ball. With a philosophical - flourish Cato throws himself upon his sword; I quietly take to the ship. - There is nothing surprising in this. If they but knew it, almost all men - in their degree, some time or other, cherish very nearly the same feelings - towards the ocean with me. -

    -
    -
    - + +
    +
    +
    +
    +

    Moby Dick

    +

    CHAPTER 1. (hover here)

    +

    + Call me Ishmael. Some years ago—never mind how long + precisely–having little or no money in my purse, and nothing + particular to interest me on shore, I thought I would sail about a + little and see the watery part of the world. It is a way I have of + driving off the spleen and regulating the circulation. Whenever I + find myself growing grim about the mouth; whenever it is a damp, + drizzly November in my soul; whenever I find myself involuntarily + pausing before coffin warehouses, and bringing up the rear of + every funeral I meet; and especially whenever my hypos get such an + upper hand of me, that it requires a strong moral principle to + prevent me from deliberately stepping into the street, and + methodically knocking people’s hats off —then, I account it high + time to get to sea as soon as I can. This is my substitute for + pistol and ball. With a philosophical flourish Cato throws himself + upon his sword; I quietly take to the ship. There is nothing + surprising in this. If they but knew it, almost all men in their + degree, some time or other, cherish very nearly the same feelings + towards the ocean with me. +

    +
    +
    + - + + +
    - -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML1.value = htmlCode1; + textareaCSS1.value = cssCode1; + textareaHTML2.value = htmlCode2; + textareaCSS2.value = cssCode2; + fillCode(); + }); + textareaHTML1.addEventListener("input", fillCode); + textareaCSS1.addEventListener("input", fillCode); + textareaHTML2.addEventListener("input", fillCode); + textareaCSS2.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/variable-fonts/slant.html b/variable-fonts/slant.html index 850288f7..019a8511 100644 --- a/variable-fonts/slant.html +++ b/variable-fonts/slant.html @@ -1,254 +1,266 @@ - + - - - - Variable Font example - slant - - - - - - - - -
    -
    -
    -
    + .section input { + display: block; + margin: 5px; + } + + .container * { + font-size: 4rem; + margin: 1.5rem 0; + } + + .demo3 { + --text-axis: 0; + } + } + + + + + + + +
    +
    +
    +

    Slant

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

    Slant

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

    Slant

    +
    +
    + + +
    +
    -
    - - -
    -
    -
    -
    - -
    - - +
    + +
    + + diff --git a/variable-fonts/weight.html b/variable-fonts/weight.html index 8096eeea..d3d60741 100644 --- a/variable-fonts/weight.html +++ b/variable-fonts/weight.html @@ -1,253 +1,268 @@ - + - - - - Variable Font example - weight - - + + + + - - - - - - - -
    -
    -
    -
    + +
    +
    +
    +

    Weight

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

    Weight

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

    Weight

    +
    +
    + + +
    +
    -
    - - -
    -
    -
    -
    - -
    - - +
    + +
    + + diff --git a/variable-fonts/width.html b/variable-fonts/width.html index d2adaadf..4dad4bd7 100644 --- a/variable-fonts/width.html +++ b/variable-fonts/width.html @@ -1,261 +1,276 @@ - + - - - - Variable Font example - width + + + + Variable Font example - width - - - - - + .demo3 { + --text-axis: 100; + } + + + + + - -
    -
    -
    -
    + +
    +
    +
    +

    Width

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

    Width

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

    Width

    +
    +
    + + +
    +
    -
    - - -
    -
    -
    -
    - -
    - - + // listen for changes + inputs.forEach((input) => input.addEventListener("change", handleUpdate)); + inputs.forEach((input) => + input.addEventListener("mousemove", handleUpdate), + ); + function handleUpdate(e) { + document + .querySelector(".demo3") + .style.setProperty(`--${this.id}`, this.value); + } + diff --git a/visual-formatting/anonymous-block.html b/visual-formatting/anonymous-block.html index 2a15b6ea..66b6110a 100644 --- a/visual-formatting/anonymous-block.html +++ b/visual-formatting/anonymous-block.html @@ -1,4 +1,4 @@ - + @@ -7,7 +7,10 @@ - - - This is Bitstream Vera Serif Bold. - + body { + font-family: "Bitstream Vera Serif Bold", serif; + } + + + + This is Bitstream Vera Serif Bold. + From 64d018e1992d8d747799b0bfc51b87ad8e8bdabb Mon Sep 17 00:00:00 2001 From: Madhu Roshan Date: Wed, 25 Oct 2023 22:40:36 +0530 Subject: [PATCH 155/188] fix(animation-frames-timing-function): replace frames() which is not a timing function (#150) * fixing animation-options * Update animation-frames-timing-function/index-waa.html * Update index-waa.html Format using Prettier playground link. --------- Co-authored-by: Claas Augner <495429+caugner@users.noreply.github.com> --- animation-frames-timing-function/index-waa.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/animation-frames-timing-function/index-waa.html b/animation-frames-timing-function/index-waa.html index 1c21bb77..b21d7c29 100644 --- a/animation-frames-timing-function/index-waa.html +++ b/animation-frames-timing-function/index-waa.html @@ -27,7 +27,7 @@
    -

    transition-timing-function: frames(10)

    +

    transition-timing-function: steps(5)

    @@ -40,7 +40,7 @@
    +} + + + +
    + +
    + + + diff --git a/learn/backgrounds-borders/borders.html b/learn/backgrounds-borders/borders.html index d62301a1..314439cf 100644 --- a/learn/backgrounds-borders/borders.html +++ b/learn/backgrounds-borders/borders.html @@ -1,43 +1,45 @@ - - - Backgrounds and Borders: border - - - - + .box { + width: 500px; + padding: 0.5em; + } + - -
    -
    -

    Borders

    -

    Try changing the borders.

    -
    -
    + + + + +
    +
    +

    Borders

    +

    Try changing the borders.

    +
    +
    + + + border-bottom: 1em double rgb(24 163 78); +} - + + +
    + +
    + + -
    - -
    - - diff --git a/learn/backgrounds-borders/color.html b/learn/backgrounds-borders/color.html index ae24b177..bdbe199a 100644 --- a/learn/backgrounds-borders/color.html +++ b/learn/backgrounds-borders/color.html @@ -1,44 +1,46 @@ - - - Backgrounds and Borders: background-color - - - - span { - background-color: rgba(255, 255, 255, 0.5); - } - - + + + + +
    +
    +

    Background Colors

    +

    Try changing the background colors.

    +
    +
    + + + background-color: rgb(255 255 255 / 50%); +} - + + +
    + +
    + + -
    - -
    - - diff --git a/learn/backgrounds-borders/gradients.html b/learn/backgrounds-borders/gradients.html index 2d1957d0..a3500837 100644 --- a/learn/backgrounds-borders/gradients.html +++ b/learn/backgrounds-borders/gradients.html @@ -1,75 +1,72 @@ - - - Backgrounds and Borders: gradients - - + .wrapper { + display: flex; + } - - .b { - background-image: radial-gradient( - circle, - rgba(0, 249, 255, 1) 39%, - rgba(51, 56, 57, 1) 96% - ); - background-size: 100px 50px; + - + + - -
    -
    -
    -
    -
    -
    + +
    +
    +
    +
    +
    +
    - - + + +
    + +
    + + -
    - -
    - - diff --git a/learn/box-model/border.html b/learn/box-model/border.html index a33b6ba5..d3ae86d0 100644 --- a/learn/box-model/border.html +++ b/learn/box-model/border.html @@ -1,49 +1,50 @@ - - - Box Model: Borders - - + + + Box Model: Borders + + - .box { - border: 1px solid #333333; - border-top-style: dotted; - border-right-width: 20px; - border-bottom-color: hotpink; - } - - + + - - + + +
    + +
    + + -
    - -
    - - diff --git a/learn/box-model/inline-block-nav.html b/learn/box-model/inline-block-nav.html index aa4b3c56..82622a95 100644 --- a/learn/box-model/inline-block-nav.html +++ b/learn/box-model/inline-block-nav.html @@ -1,74 +1,75 @@ - - - Box Model: Inline block for navigation items - - + + + Box Model: Inline block for navigation items + + - .links-list a:hover { - background-color: rgb(66, 28, 40); - color: #fff; - } - - + + - - + + +
    + +
    + + -
    - -
    - - diff --git a/learn/images/filter-text.html b/learn/images/filter-text.html index 98b0c9bb..d413c495 100644 --- a/learn/images/filter-text.html +++ b/learn/images/filter-text.html @@ -1,63 +1,65 @@ - - - Images and other unusual elements: filters - - - - - - - -
    -

    Filter

    -

    Box shadow

    -
    - - + box-shadow: 5px 5px 1px rgb(0 0 0 / 70%); +} - - -
    - -
    - - +

    Box shadow

    + +
    + +
    + + + diff --git a/learn/inspecting/inspecting.html b/learn/inspecting/inspecting.html index 832ce265..5a75affc 100644 --- a/learn/inspecting/inspecting.html +++ b/learn/inspecting/inspecting.html @@ -1,80 +1,82 @@ - - - - Inspecting CSS - - + .special { + color: orange; + } - -
    -
    -

    - Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh - onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. -

    -
    + em { + color: hotpink; + font-weight: bold; + } + + -
    -

    - Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot - courgette tatsoi pea sprouts fava bean collard greens dandelion okra - wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. -

    -
    + +
    +
    +

    + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh + onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. +

    +
    +

    - Turnip greens yarrow ricebean rutabaga endive - cauliflower sea lettuce kohlrabi amaranth water spinach avocado - daikon napa cabbage asparagus winter purslane kale. Celery potato - scallion desert raisin horseradish spinach carrot soko. + Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot + courgette tatsoi pea sprouts fava bean collard greens dandelion okra + wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    - + +

    + Turnip greens yarrow ricebean rutabaga endive + cauliflower sea lettuce kohlrabi amaranth water spinach avocado + daikon napa cabbage asparagus winter purslane kale. Celery potato + scallion desert raisin horseradish spinach carrot soko. +

    +
    + + diff --git a/learn/media-queries/grid.html b/learn/media-queries/grid.html index 954d6ec1..5cd1df93 100644 --- a/learn/media-queries/grid.html +++ b/learn/media-queries/grid.html @@ -1,220 +1,216 @@ - - - - - Media Queries: a simple mobile first design, adding a grid component - - - - - -
    -
    - -
    -
    -
    -
    -

    Veggies!

    -

    - Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi - welsh onion daikon amaranth tatsoi tomatillo melon azuki bean - garlic. -

    - -

    - Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot - courgette tatsoi pea sprouts fava bean collard greens dandelion - okra wakame tomato. Dandelion cucumber earthnut pea peanut soko - zucchini. -

    - -
      -
    • -

      Card 1

      -

      - Turnip greens yarrow ricebean rutabaga endive cauliflower sea - lettuce kohlrabi amaranth water spinach avocado daikon napa - cabbage asparagus winter purslane kale. -

      -
      • -
    • -

      Card 2

      -

      - Celery potato scallion desert raisin horseradish spinach - carrot soko. -

      -
      • -
    • -

      Card 3

      -

      - Lotus root water spinach fennel kombu maize bamboo shoot green - bean swiss chard seakale pumpkin onion chickpea gram corn pea. -

      -
      • -
    • -

      Card 4

      -

      - Brussels sprout coriander water chestnut gourd swiss chard - wakame kohlrabi beetroot carrot watercress. -

      -
      • -
    • -

      Card 5

      -

      - Corn amaranth salsify bunya nuts nori azuki bean chickweed - potato bell pepper artichoke. -

      -
      • -
    -
    - -
    - -
    + +
    +

    ©2019

    +
    +
    + -

    ©2019

    -
    - diff --git a/learn/media-queries/step1.html b/learn/media-queries/step1.html index 36f5e01f..c53f46aa 100644 --- a/learn/media-queries/step1.html +++ b/learn/media-queries/step1.html @@ -1,148 +1,144 @@ - - - - Media Queries: a simple mobile first design, step 1 - - - - -
    -
    - -
    -
    -
    -
    -

    Veggies!

    -

    - Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi - welsh onion daikon amaranth tatsoi tomatillo melon azuki bean - garlic. -

    - -

    - Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot - courgette tatsoi pea sprouts fava bean collard greens dandelion - okra wakame tomato. Dandelion cucumber earthnut pea peanut soko - zucchini. -

    - -

    - Turnip greens yarrow ricebean rutabaga endive cauliflower sea - lettuce kohlrabi amaranth water spinach avocado daikon napa - cabbage asparagus winter purslane kale. Celery potato scallion - desert raisin horseradish spinach carrot soko. Lotus root water - spinach fennel kombu maize bamboo shoot green bean swiss chard - seakale pumpkin onion chickpea gram corn pea. Brussels sprout - coriander water chestnut gourd swiss chard wakame kohlrabi - beetroot carrot watercress. Corn amaranth salsify bunya nuts nori - azuki bean chickweed potato bell pepper artichoke. -

    - -

    - Nori grape silver beet broccoli kombu beet greens fava bean potato - quandong celery. Bunya nuts black-eyed pea prairie turnip leek - lentil turnip greens parsnip. Sea lettuce lettuce water chestnut - eggplant winter purslane fennel azuki bean earthnut pea sierra - leone bologi leek soko chicory celtuce parsley jícama salsify. -

    -
    - -
    - -
    + +
    +

    ©2019

    +
    +
    + -

    ©2019

    - - diff --git a/learn/media-queries/step2.html b/learn/media-queries/step2.html index e99bc752..23072652 100644 --- a/learn/media-queries/step2.html +++ b/learn/media-queries/step2.html @@ -1,164 +1,160 @@ - - - - Media Queries: a simple mobile first design, step 2 - - - - -
    -
    - -
    -
    -
    -
    -

    Veggies!

    -

    - Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi - welsh onion daikon amaranth tatsoi tomatillo melon azuki bean - garlic. -

    - -

    - Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot - courgette tatsoi pea sprouts fava bean collard greens dandelion - okra wakame tomato. Dandelion cucumber earthnut pea peanut soko - zucchini. -

    - -

    - Turnip greens yarrow ricebean rutabaga endive cauliflower sea - lettuce kohlrabi amaranth water spinach avocado daikon napa - cabbage asparagus winter purslane kale. Celery potato scallion - desert raisin horseradish spinach carrot soko. Lotus root water - spinach fennel kombu maize bamboo shoot green bean swiss chard - seakale pumpkin onion chickpea gram corn pea. Brussels sprout - coriander water chestnut gourd swiss chard wakame kohlrabi - beetroot carrot watercress. Corn amaranth salsify bunya nuts nori - azuki bean chickweed potato bell pepper artichoke. -

    - -

    - Nori grape silver beet broccoli kombu beet greens fava bean potato - quandong celery. Bunya nuts black-eyed pea prairie turnip leek - lentil turnip greens parsnip. Sea lettuce lettuce water chestnut - eggplant winter purslane fennel azuki bean earthnut pea sierra - leone bologi leek soko chicory celtuce parsley jícama salsify. -

    -
    - -
    - -
    + +
    +

    ©2019

    +
    +
    + -

    ©2019

    - - diff --git a/learn/media-queries/step3.html b/learn/media-queries/step3.html index 12765abe..67c859f9 100644 --- a/learn/media-queries/step3.html +++ b/learn/media-queries/step3.html @@ -1,181 +1,177 @@ - - - - Media Queries: a simple mobile first design, step 3 - - - - -
    -
    - -
    -
    -
    -
    -

    Veggies!

    -

    - Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi - welsh onion daikon amaranth tatsoi tomatillo melon azuki bean - garlic. -

    - -

    - Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot - courgette tatsoi pea sprouts fava bean collard greens dandelion - okra wakame tomato. Dandelion cucumber earthnut pea peanut soko - zucchini. -

    - -

    - Turnip greens yarrow ricebean rutabaga endive cauliflower sea - lettuce kohlrabi amaranth water spinach avocado daikon napa - cabbage asparagus winter purslane kale. Celery potato scallion - desert raisin horseradish spinach carrot soko. Lotus root water - spinach fennel kombu maize bamboo shoot green bean swiss chard - seakale pumpkin onion chickpea gram corn pea. Brussels sprout - coriander water chestnut gourd swiss chard wakame kohlrabi - beetroot carrot watercress. Corn amaranth salsify bunya nuts nori - azuki bean chickweed potato bell pepper artichoke. -

    - -

    - Nori grape silver beet broccoli kombu beet greens fava bean potato - quandong celery. Bunya nuts black-eyed pea prairie turnip leek - lentil turnip greens parsnip. Sea lettuce lettuce water chestnut - eggplant winter purslane fennel azuki bean earthnut pea sierra - leone bologi leek soko chicory celtuce parsley jícama salsify. -

    -
    - -
    - -
    + +
    +

    ©2019

    +
    +
    + -

    ©2019

    - - diff --git a/learn/solutions.md b/learn/solutions.md index 072c85a9..56856a7c 100644 --- a/learn/solutions.md +++ b/learn/solutions.md @@ -10,7 +10,7 @@ Task: Write a declaration in a new rule that will reset the background color bac One possible solution is as follows: -``` +```css #outer #inner a { background-color: initial; } @@ -28,7 +28,7 @@ Task: Target the `` element with a title attribute and make the border pink ( To select elements with a title attribute we can add `title` inside the square brackets, which will select the second link, which is the only one with a title attribute. -``` +```css a[title] { border-color: pink; } @@ -38,7 +38,7 @@ Target the `` element with an href attribute which contains the word contact There are two things we want to match here, the href value "/contact" and also "../contact". So we need to match the string "contact" anywhere in the value using `*=`. This will select the third and fourth links. -``` +```css a[href*="contact"] { border-color: orange; } @@ -48,7 +48,7 @@ Target the `` element with an href value starting with https and give it a gr Here we can look for an href value which starts with "https" and so use `^=`, this will only select the first link. -``` +```css a[href^="https"] { border-color: green; } @@ -60,7 +60,7 @@ a[href^="https"] { Task: Change the size of the second box (by adding CSS to the .alternate class) to make it match the first box in width and height. -``` +```css .alternate { box-sizing: border-box; width: 390px; @@ -74,7 +74,7 @@ You will need to increase the height and width of the second block, to add the s To style the box we add a border, using the `border` property. Round the corners with `border-radius` and then add the background image setting the size to `contain`. -``` +```css .box { border: 5px solid #000; border-radius: 10px; @@ -83,11 +83,11 @@ To style the box we add a border, using the `border` property. Round the corners } ``` -I used rgba colors to add a background color to the heading which is semi-transparent. +We've used {{CSSXref("color_value/rgb", "rgb()")}} colors to add a background color to the heading which is semi-transparent. -``` +```css h2 { - background-color: rgba(0,0,0,.5); + background-color: rgb(0 0 0 50%); color: white; } ``` diff --git a/learn/styles.css b/learn/styles.css index 11945fee..61e023a4 100644 --- a/learn/styles.css +++ b/learn/styles.css @@ -1,19 +1,15 @@ /* Some default styling for cookbook examples */ /* -rgb(53,43,34) -rgb(75,70,74) -rgb(95,97,110) -rgb(137,151,188) -rgb(160,178,226) +rgb(53 43 34) +rgb(75 70 74) +rgb(95 97 110) +rgb(137 151 188) +rgb(160 178 226) */ body { background-color: #fff; color: #333; - font: - 1.2em / 1.5 Helvetica Neue, - Helvetica, - Arial, - sans-serif; + font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif; padding: 0; margin: 0; } diff --git a/learn/tasks/backgrounds/marking.md b/learn/tasks/backgrounds/marking.md index 8202ea36..a0427a5b 100644 --- a/learn/tasks/backgrounds/marking.md +++ b/learn/tasks/backgrounds/marking.md @@ -4,9 +4,9 @@ The aim of the tasks are to demonstrate an understanding of the properties cover ## Task 1 -This task covers understanding of `border`, `border-radius`, `background-image`, and `background-size`. Also, it checks that the student understands how to use RGBa colors to make a background color partly transparent. +This task covers understanding of `border`, `border-radius`, `background-image`, and `background-size`. Also, it checks that the student understands how to use RGB colors to make a background color partly transparent. -``` +```css .box { border: 5px solid #000; border-radius: 10px; @@ -15,7 +15,7 @@ This task covers understanding of `border`, `border-radius`, `background-image`, } h2 { - background-color: rgba(0,0,0,.5); + background-color: rgb(0 0 0 / 50%); color: #fff; } ``` @@ -33,7 +33,7 @@ There are also some elements which link back to earlier lessons: - They need to add padding to the heading in order that it doesn't overlay the star image - this links back to learning from the earlier Box Model lesson. - The text with be aligned with the `text-align` property. -``` +```css .box { border: 5px solid lightblue; border-top-left-radius: 20px; diff --git a/learn/tasks/float/float3-download.html b/learn/tasks/float/float3-download.html index d66c43b2..717f88e1 100644 --- a/learn/tasks/float/float3-download.html +++ b/learn/tasks/float/float3-download.html @@ -1,50 +1,55 @@ - - - Float: Task 3 - - - + + + Float: Task 3 + + + + + +
    +
    Float
    +

    This sentence appears next to the float.

    +
    + - -
    -
    Float
    -

    This sentence appears next to the float.

    -
    - diff --git a/learn/tasks/float/float3.html b/learn/tasks/float/float3.html index 22d2dca1..84a0b539 100644 --- a/learn/tasks/float/float3.html +++ b/learn/tasks/float/float3.html @@ -1,55 +1,58 @@ - - - Float: Task 3 - - + + + Float: Task 3 + + - + .box { + width: 500px; + padding: 0.5em; + } - -
    -
    -
    Float
    -

    This sentence appears next to the float.

    -
    -
    + .float { + margin: 15px; + width: 150px; + height: 150px; + border-radius: 5px; + background-color: rgb(207 232 220); + padding: 1em; + } - - + + +
    + +
    + + -
    - -
    - - diff --git a/learn/tasks/grid/grid2-download.html b/learn/tasks/grid/grid2-download.html index 66340843..4ce1e221 100644 --- a/learn/tasks/grid/grid2-download.html +++ b/learn/tasks/grid/grid2-download.html @@ -1,56 +1,58 @@ - - - - - Grid: task 2 - - - - - - - -
    -
    One
    -
    Two
    -
    - + + + + + + Grid: task 2 + + + + + + + +
    +
    One
    +
    Two
    +
    + + diff --git a/learn/tasks/grid/grid2.html b/learn/tasks/grid/grid2.html index 8e65f62f..33a7f143 100644 --- a/learn/tasks/grid/grid2.html +++ b/learn/tasks/grid/grid2.html @@ -1,57 +1,56 @@ - - - - - Grid: task 2 - - - - - - - - - -
    -
    -
    One
    -
    Two
    -
    -
    - - + - + + +
    + +
    + + -
    - -
    - - diff --git a/learn/tasks/position/position1-download.html b/learn/tasks/position/position1-download.html index 78ed5e05..23a97ba4 100644 --- a/learn/tasks/position/position1-download.html +++ b/learn/tasks/position/position1-download.html @@ -1,50 +1,55 @@ - - - Position: Task 1 - - - -
    -

    - Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh - onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. -

    -
    Target
    -

    - Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot - courgette tatsoi pea sprouts fava bean collard greens dandelion okra - wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. -

    -
    - + + + Position: Task 1 + + + + +
    +

    + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh + onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. +

    +
    Target
    +

    + Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot + courgette tatsoi pea sprouts fava bean collard greens dandelion okra + wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. +

    +
    + + diff --git a/learn/tasks/position/position1.html b/learn/tasks/position/position1.html index cee9fba9..7031c36f 100644 --- a/learn/tasks/position/position1.html +++ b/learn/tasks/position/position1.html @@ -1,53 +1,54 @@ - - - Position: Task 1 - - - - + .container { + width: 500px; + padding: 0.5em; + border: 5px solid #ccc; + } - -
    -
    -

    - Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh - onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. -

    -
    Target
    -

    - Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot - courgette tatsoi pea sprouts fava bean collard greens dandelion okra - wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. -

    -
    -
    + .target { + width: 150px; + height: 150px; + border-radius: 5px; + background-color: rgb(207 232 220); + padding: 1em; + } + - - + + +
    + +
    + + -
    - -
    - - diff --git a/learn/tasks/position/position2-download.html b/learn/tasks/position/position2-download.html index 2a41455f..6f2370d1 100644 --- a/learn/tasks/position/position2-download.html +++ b/learn/tasks/position/position2-download.html @@ -1,73 +1,79 @@ - - - Position: Task 2 - - - -
    -
    -

    - This is the sidebar. It should remain in position as the content - scrolls. -

    -
    -
    -

    - Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh - onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. -

    -

    - Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot - courgette tatsoi pea sprouts fava bean collard greens dandelion okra - wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. -

    -

    - Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce - kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus - winter purslane kale. Celery potato scallion desert raisin horseradish - spinach carrot soko. Lotus root water spinach fennel kombu maize - bamboo shoot green bean swiss chard seakale pumpkin onion chickpea - gram corn pea. Brussels sprout coriander water chestnut gourd swiss - chard wakame kohlrabi beetroot carrot watercress. Corn amaranth - salsify bunya nuts nori azuki bean chickweed potato bell pepper - artichoke. -

    -
    + + + Position: Task 2 + + + + +
    +
    +

    + This is the sidebar. It should remain in position as the content + scrolls. +

    +
    +
    +

    + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh + onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. +

    +

    + Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot + courgette tatsoi pea sprouts fava bean collard greens dandelion okra + wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. +

    +

    + Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce + kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus + winter purslane kale. Celery potato scallion desert raisin horseradish + spinach carrot soko. Lotus root water spinach fennel kombu maize + bamboo shoot green bean swiss chard seakale pumpkin onion chickpea + gram corn pea. Brussels sprout coriander water chestnut gourd swiss + chard wakame kohlrabi beetroot carrot watercress. Corn amaranth + salsify bunya nuts nori azuki bean chickweed potato bell pepper + artichoke. +

    - +
    + + diff --git a/learn/tasks/position/position2.html b/learn/tasks/position/position2.html index 991650dd..b323ef28 100644 --- a/learn/tasks/position/position2.html +++ b/learn/tasks/position/position2.html @@ -1,77 +1,79 @@ - - - Position: Task 2 - - - - + .container { + width: 550px; + height: 400px; + padding: 0.5em; + border: 5px solid #ccc; + overflow: auto; + } - -
    -
    -
    -

    - This is the sidebar. It should remain in position as the content - scrolls. -

    -
    -
    -

    - Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi - welsh onion daikon amaranth tatsoi tomatillo melon azuki bean - garlic. -

    -

    - Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot - courgette tatsoi pea sprouts fava bean collard greens dandelion okra - wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. -

    -

    - Turnip greens yarrow ricebean rutabaga endive cauliflower sea - lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage - asparagus winter purslane kale. Celery potato scallion desert raisin - horseradish spinach carrot soko. Lotus root water spinach fennel - kombu maize bamboo shoot green bean swiss chard seakale pumpkin - onion chickpea gram corn pea. Brussels sprout coriander water - chestnut gourd swiss chard wakame kohlrabi beetroot carrot - watercress. Corn amaranth salsify bunya nuts nori azuki bean - chickweed potato bell pepper artichoke. -

    -
    + .sidebar { + background-color: rgb(207 232 220); + padding: 1em; + float: left; + width: 150px; + } + + .content { + padding: 1em; + margin-left: 160px; + } + + + + + + +
    +
    +
    +

    + This is the sidebar. It should remain in position as the content + scrolls. +

    +
    +
    +

    + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi + welsh onion daikon amaranth tatsoi tomatillo melon azuki bean + garlic. +

    +

    + Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot + courgette tatsoi pea sprouts fava bean collard greens dandelion okra + wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. +

    +

    + Turnip greens yarrow ricebean rutabaga endive cauliflower sea + lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage + asparagus winter purslane kale. Celery potato scallion desert raisin + horseradish spinach carrot soko. Lotus root water spinach fennel + kombu maize bamboo shoot green bean swiss chard seakale pumpkin + onion chickpea gram corn pea. Brussels sprout coriander water + chestnut gourd swiss chard wakame kohlrabi beetroot carrot + watercress. Corn amaranth salsify bunya nuts nori azuki bean + chickweed potato bell pepper artichoke. +

    -
    +
    +
    - - +
    -
    - -
    - - - +
    + +
    + + + + \ No newline at end of file diff --git a/learn/tasks/styles.css b/learn/tasks/styles.css index 11945fee..61e023a4 100644 --- a/learn/tasks/styles.css +++ b/learn/tasks/styles.css @@ -1,19 +1,15 @@ /* Some default styling for cookbook examples */ /* -rgb(53,43,34) -rgb(75,70,74) -rgb(95,97,110) -rgb(137,151,188) -rgb(160,178,226) +rgb(53 43 34) +rgb(75 70 74) +rgb(95 97 110) +rgb(137 151 188) +rgb(160 178 226) */ body { background-color: #fff; color: #333; - font: - 1.2em / 1.5 Helvetica Neue, - Helvetica, - Arial, - sans-serif; + font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif; padding: 0; margin: 0; } diff --git a/learn/tasks/values/marking.md b/learn/tasks/values/marking.md index 331b09fc..77cb365c 100644 --- a/learn/tasks/values/marking.md +++ b/learn/tasks/values/marking.md @@ -6,21 +6,21 @@ The student needs to take a color which is a hex code and add the same color to They have a link to [a color conversion tool](https://convertingcolors.com/hex-color-86DEFA.html), so they just need to know what the different values look like. -``` +```css .hex { background-color: #86DEFA; } .rgb { - background-color: rgb(134, 222, 250); + background-color: rgb(134 222 250); } .hsl { - background-color: hsl(194, 92%, 75%); + background-color: hsl(194 92% 75%); } .transparency { - background-color: rgba(134, 222, 250, .6); + background-color: rgb(134 222 250 / 60%); } ``` @@ -28,7 +28,7 @@ They have a link to [a color conversion tool](https://convertingcolors.com/hex-c The student is asked to use a variety of length units to size some boxes. -``` +```css h1 { font-size: 50px; } @@ -50,7 +50,7 @@ h1+p { In this task the students needs to use a keyword and a percentage to change the position of the background image. -``` +```css .box { background-image: url(star.png); background-repeat: no-repeat; diff --git a/learn/values-units/color-hsl.html b/learn/values-units/color-hsl.html index ee68e726..b24c94ca 100644 --- a/learn/values-units/color-hsl.html +++ b/learn/values-units/color-hsl.html @@ -1,68 +1,70 @@ - - - Values and Units: color hsl codes - - - - .three { - background-color: hsl(174, 77%, 31%); - } - - + + + + +
    +
    +
    hsl(188 97% 28%)
    +
    hsl(321 47% 57%)
    +
    hsl(174 77% 31%)
    +
    +
    + + - +
    hsl(188 97% 28%)
    +
    hsl(321 47% 57%)
    +
    hsl(174 77% 31%)
    + + +
    + +
    + + -
    - -
    - - diff --git a/learn/values-units/color-rgba.html b/learn/values-units/color-rgba.html index 929e665f..fde33e3e 100644 --- a/learn/values-units/color-rgba.html +++ b/learn/values-units/color-rgba.html @@ -1,49 +1,52 @@ - - - Values and Units: color rgba codes - - - - + .box { + padding: 10px; + margin: 1em 0; + border-radius: 0.5em; + } + - -
    -
    -
    rgb(2 121 139 / .3)
    -
    rgb(197 93 161 / .7)
    -
    rgb(18 138 125 / .9)
    -
    -
    + + + + +
    +
    +
    rgb(2 121 139 / .3)
    +
    rgb(197 93 161 / .7)
    +
    rgb(18 138 125 / .9)
    +
    +
    + + - + + +
    + +
    + + -
    - -
    - - diff --git a/learn/values-units/image.html b/learn/values-units/image.html index 9d7644cf..8594c64a 100644 --- a/learn/values-units/image.html +++ b/learn/values-units/image.html @@ -1,60 +1,59 @@ - - - Values and Units: image - - - - - - - -
    -
    -
    -
    - - - - -
    - -
    - - +
    + +
    + +
    + + + From b97efcc16e89a6cd8e6c19a727ae499356ab7a8b Mon Sep 17 00:00:00 2001 From: Onkar Ruikar <87750369+OnkarRuikar@users.noreply.github.com> Date: Thu, 7 Dec 2023 14:46:35 +0530 Subject: [PATCH 159/188] run prettier on html, css, and html files (#162) --- backdrop/index.html | 3 +- css-cookbook/list-group-badges.html | 3 +- css-text/hyphens.html | 3 +- css-text/inline-overflow-hidden.html | 5 +- css-text/inline-overflow.html | 3 +- css-text/min-content.html | 3 +- css-text/overflow-wrap.html | 3 +- css-text/wbr.html | 3 +- css-text/word-break-checkbox.html | 3 +- css-text/word-break.html | 3 +- editable-samples-2/css/editable.css | 20 +- editable-samples-2/css/prism.css | 82 ++-- editable-samples-2/js/editable.js | 20 +- .../pages/border-top-color/index.html | 25 +- editable-samples-2/pages/filter/index.html | 18 +- editable-samples-2/pages/font/css/element.css | 2 +- editable-samples-2/pages/font/index.html | 32 +- editable-samples-2/pages/transform/index.html | 22 +- editable-samples/codemirror/mode/css/gss.html | 2 +- .../codemirror/mode/css/index.html | 2 +- .../codemirror/mode/css/less.html | 8 +- .../codemirror/mode/css/scss.html | 2 +- editable-samples/css/editable-old.css | 2 +- editable-samples/css/editable.css | 16 +- editable-samples/js/editable-old.js | 53 +-- editable-samples/js/editable.js | 12 +- .../pages/border-top-color/index-old.html | 13 +- .../pages/border-top-color/index.html | 14 +- .../border-top-color/js/border-top-color.js | 2 +- editable-samples/pages/filter/index-old.html | 20 +- editable-samples/pages/filter/index.html | 21 +- editable-samples/pages/filter/js/filter.js | 2 +- editable-samples/pages/font/css/element.css | 2 +- editable-samples/pages/font/index-old.html | 36 +- editable-samples/pages/font/index.html | 44 +- editable-samples/pages/font/js/font.js | 2 +- .../pages/transform/index-old.html | 20 +- editable-samples/pages/transform/index.html | 21 +- .../pages/transform/js/transform.js | 2 +- feature-queries/not.html | 3 +- feature-queries/or.html | 3 +- feature-queries/simple.html | 3 +- feature-queries/step1.html | 3 +- feature-queries/step2.html | 3 +- feature-queries/step3.html | 3 +- feature-queries/step4.html | 3 +- flexbox/use-cases/label-input-button.html | 3 +- font-features/font-kerning.html | 6 +- font-features/font-variant-alternates.html | 6 +- font-features/font-variant-caps.html | 6 +- font-features/font-variant-east-asian.html | 38 +- font-features/font-variant-ligatures.html | 6 +- .../font-variant-numeric-example.html | 3 +- font-features/font-variant-numeric-frac.html | 6 +- font-features/font-variant-numeric.html | 6 +- font-features/font-variant-position.html | 6 +- font-features/font-variant.html | 6 +- grid/docs/autoplacement.html | 3 +- grid/masonry/inline-axis.html | 3 +- grid/masonry/justify-tracks.html | 3 +- grid/masonry/masonry-auto-flow.html | 3 +- grid/masonry/positioned.html | 3 +- grid/masonry/spanners.html | 9 +- grid/subgrid/adding-line-names.html | 3 +- grid/subgrid/both.html | 3 +- grid/subgrid/columns.html | 3 +- grid/subgrid/gap.html | 3 +- grid/subgrid/implicit.html | 3 +- grid/subgrid/line-names.html | 3 +- grid/subgrid/no-implicit.html | 3 +- grid/subgrid/rows.html | 3 +- howto/box-shadow-button.html | 3 +- howto/center.html | 3 +- howto/highlight_first_line.html | 3 +- howto/highlight_first_line2.html | 3 +- howto/highlight_first_para.html | 3 +- howto/highlight_h1_plus_para.html | 3 +- howto/object-fit.html | 3 +- howto/opacity.html | 3 +- howto/transition-button.html | 3 +- images/image-set-type.html | 3 +- images/image-set.html | 3 +- .../background-blend-mode.html | 3 +- .../backgrounds-borders/background-image.html | 3 +- learn/backgrounds-borders/background.html | 95 ++--- learn/backgrounds-borders/borders.html | 88 ++-- learn/backgrounds-borders/color.html | 88 ++-- learn/backgrounds-borders/corners.html | 3 +- learn/backgrounds-borders/gradients.html | 102 ++--- learn/backgrounds-borders/mix-blend-mode.html | 3 +- .../multiple-background-image.html | 3 +- learn/backgrounds-borders/position.html | 3 +- learn/backgrounds-borders/repeat.html | 3 +- learn/backgrounds-borders/size.html | 3 +- learn/box-model/border.html | 90 ++-- learn/box-model/box-models.html | 3 +- learn/box-model/inline-block-nav.html | 98 ++--- learn/box-model/margin-collapse.html | 3 +- learn/box-model/margin.html | 3 +- learn/box-model/padding.html | 3 +- learn/images/filter-text.html | 86 ++-- learn/images/layout.html | 3 +- learn/inspecting/inspecting.html | 132 +++--- learn/layers/layer-order.html | 3 +- learn/layers/layer-precedence.html | 3 +- learn/layers/media-order.html | 3 +- learn/media-queries/grid.html | 388 +++++++++--------- learn/media-queries/step1.html | 284 ++++++------- learn/media-queries/step2.html | 304 +++++++------- learn/media-queries/step3.html | 324 ++++++++------- learn/overflow/auto.html | 3 +- learn/overflow/block-overflow.html | 3 +- learn/overflow/hidden.html | 3 +- learn/overflow/inline-overflow.html | 3 +- learn/overflow/scroll-x.html | 3 +- learn/overflow/scroll-y.html | 3 +- learn/overflow/scroll.html | 3 +- learn/selectors/class-many.html | 3 +- learn/selectors/class.html | 3 +- learn/selectors/descendant.html | 3 +- learn/selectors/first-child.html | 3 +- learn/selectors/universal.html | 3 +- learn/sizing/height.html | 3 +- learn/sizing/intrinsic-text.html | 3 +- learn/sizing/max-width.html | 3 +- learn/sizing/min-height.html | 3 +- learn/sizing/percent-mp.html | 3 +- learn/sizing/percent-width.html | 3 +- learn/sizing/vw-vh.html | 3 +- learn/styles.css | 6 +- learn/tasks/box-model/box-models.html | 3 +- learn/tasks/box-model/inline-block.html | 3 +- learn/tasks/box-model/mbp.html | 3 +- learn/tasks/cascade/cascadelayer.html | 3 +- learn/tasks/float/float1.html | 3 +- learn/tasks/float/float2.html | 3 +- learn/tasks/float/float3-download.html | 92 ++--- learn/tasks/float/float3.html | 109 ++--- learn/tasks/grid/grid2-download.html | 106 +++-- learn/tasks/grid/grid2.html | 120 +++--- learn/tasks/images/form.html | 3 +- learn/tasks/multicol/multicol1.html | 3 +- learn/tasks/multicol/multicol2.html | 3 +- learn/tasks/overflow/overflow-hidden.html | 3 +- learn/tasks/overflow/overflow-scroll.html | 3 +- learn/tasks/position/position1-download.html | 94 +++-- learn/tasks/position/position1.html | 106 ++--- learn/tasks/position/position2-download.html | 138 +++---- learn/tasks/position/position2.html | 154 +++---- learn/tasks/sizing/height-min-height.html | 3 +- learn/tasks/sizing/percentages.html | 3 +- learn/tasks/styles.css | 6 +- learn/tasks/values/color.html | 3 +- learn/tasks/values/position.html | 3 +- learn/tasks/writing-modes/logical-mbp.html | 3 +- .../writing-modes/logical-width-height.html | 3 +- learn/tasks/writing-modes/writing-mode.html | 3 +- learn/values-units/color-hex.html | 3 +- learn/values-units/color-hsl.html | 90 ++-- learn/values-units/color-hsla.html | 3 +- learn/values-units/color-keywords.html | 3 +- learn/values-units/color-rgb.html | 3 +- learn/values-units/color-rgba.html | 98 ++--- learn/values-units/image.html | 96 ++--- learn/values-units/length.html | 3 +- learn/values-units/opacity.html | 3 +- learn/values-units/percentage.html | 3 +- learn/values-units/position.html | 3 +- learn/values-units/strings-idents.html | 3 +- learn/writing-modes/block-inline.html | 3 +- learn/writing-modes/inline-size.html | 3 +- learn/writing-modes/width.html | 3 +- logical/intro-feature-queries.html | 3 +- logical/intro-grid-example.html | 3 +- masking/mask-border.html | 3 +- masking/mask-composite.html | 3 +- masking/mask-origin.html | 3 +- masking/mask-repeat.html | 3 +- masking/mask-size.html | 3 +- modules/animation.html | 3 +- modules/colors.html | 3 +- modules/compositing.html | 10 +- modules/filters.html | 33 +- modules/multicol.html | 6 +- modules/scroll_snap.html | 6 +- moz-context-properties/index.html | 9 +- object-fit-basics/index.html | 28 +- overscroll-behavior/index.html | 3 +- target-text/index.html | 6 +- time/current.html | 3 +- time/future.html | 3 +- time/past.html | 3 +- tools/border-image-generator/index.html | 24 +- tools/border-radius-generator/index.html | 54 +-- tools/box-shadow-generator/index.html | 168 +++----- tools/color-picker/index.html | 3 +- variable-fonts/font-stretch.html | 3 +- variable-fonts/grade.html | 3 +- variable-fonts/italic.html | 3 +- variable-fonts/optical-sizing.html | 3 +- variable-fonts/slant.html | 167 ++++---- variable-fonts/weight.html | 3 +- variable-fonts/width.html | 3 +- 203 files changed, 2420 insertions(+), 2383 deletions(-) diff --git a/backdrop/index.html b/backdrop/index.html index 2d9d8474..61df9a65 100644 --- a/backdrop/index.html +++ b/backdrop/index.html @@ -20,8 +20,7 @@ controls src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4" poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217" - width="620" - > + width="620"> Sorry, your browser doesn't support embedded videos. Time to upgrade! diff --git a/css-cookbook/list-group-badges.html b/css-cookbook/list-group-badges.html index 88bc6dae..fb0a441f 100644 --- a/css-cookbook/list-group-badges.html +++ b/css-cookbook/list-group-badges.html @@ -72,7 +72,8 @@ display: flex; justify-content: space-between; align-items: center; -} +} +} +} - +} +} +} +} +} +} +
    - London. Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's Inn Hall. Implacable November weather. As much mud in the streets as if the waters had but newly retired from the face of the earth, and it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill. Smoke lowering down from chimney-pots, making a soft black drizzle, with flakes of soot in it as big as full-grown snowflakes—gone into mourning, one might imagine, for the death of the sun. Dogs, undistinguishable in mire. Horses, scarcely better; splashed to their very blinkers. Foot passengers, jostling one another's umbrellas in a general infection of ill temper, and losing their foot-hold at street-corners, where tens of thousands of other foot passengers have been slipping and sliding since the day broke (if this day ever broke), adding new deposits to the crust upon crust of mud, sticking at those points tenaciously to the pavement, and accumulating at compound interest. + London. Michaelmas term lately over, and the Lord Chancellor sitting in + Lincoln's Inn Hall. Implacable November weather. As much mud in the + streets as if the waters had but newly retired from the face of the + earth, and it would not be wonderful to meet a Megalosaurus, forty feet + long or so, waddling like an elephantine lizard up Holborn Hill. Smoke + lowering down from chimney-pots, making a soft black drizzle, with + flakes of soot in it as big as full-grown snowflakes—gone into mourning, + one might imagine, for the death of the sun. Dogs, undistinguishable in + mire. Horses, scarcely better; splashed to their very blinkers. Foot + passengers, jostling one another's umbrellas in a general infection of + ill temper, and losing their foot-hold at street-corners, where tens of + thousands of other foot passengers have been slipping and sliding since + the day broke (if this day ever broke), adding new deposits to the crust + upon crust of mud, sticking at those points tenaciously to the pavement, + and accumulating at compound interest.
    - + - - - + diff --git a/editable-samples/pages/font/js/font.js b/editable-samples/pages/font/js/font.js index 4390e579..87605075 100644 --- a/editable-samples/pages/font/js/font.js +++ b/editable-samples/pages/font/js/font.js @@ -1 +1 @@ -var cmInitContent = 'font: italic 1.5em cursive;\n\n'; +var cmInitContent = "font: italic 1.5em cursive;\n\n"; diff --git a/editable-samples/pages/transform/index-old.html b/editable-samples/pages/transform/index-old.html index 03b6db02..5c9bf751 100644 --- a/editable-samples/pages/transform/index-old.html +++ b/editable-samples/pages/transform/index-old.html @@ -1,20 +1,20 @@ - + - + - - - + + + - +
    - +
    @@ -26,10 +26,8 @@ - + - - - + diff --git a/editable-samples/pages/transform/index.html b/editable-samples/pages/transform/index.html index b79fe3ee..f646eca0 100644 --- a/editable-samples/pages/transform/index.html +++ b/editable-samples/pages/transform/index.html @@ -1,36 +1,33 @@ - + - + - - - + + + - + -
    - +
    - + - - - + diff --git a/editable-samples/pages/transform/js/transform.js b/editable-samples/pages/transform/js/transform.js index 2ed178fe..ff876721 100644 --- a/editable-samples/pages/transform/js/transform.js +++ b/editable-samples/pages/transform/js/transform.js @@ -1 +1 @@ -var cmInitContent = 'transform: skew(30deg, 20deg);\n\n'; +var cmInitContent = "transform: skew(30deg, 20deg);\n\n"; diff --git a/feature-queries/not.html b/feature-queries/not.html index dc5eda8b..19eca9bd 100644 --- a/feature-queries/not.html +++ b/feature-queries/not.html @@ -39,7 +39,8 @@ border: 4px solid red; color: red; } -} +} +} +} +} +} +} +} +} + checked />
    @@ -213,8 +212,7 @@ name="demo2_control" id="demo2_control" value="on" - checked - /> + checked />
    diff --git a/font-features/font-variant-numeric.html b/font-features/font-variant-numeric.html index 6951caca..36e0412a 100644 --- a/font-features/font-variant-numeric.html +++ b/font-features/font-variant-numeric.html @@ -161,8 +161,7 @@ name="demo1_control" id="demo1_control" value="on" - checked - /> + checked />
    @@ -195,8 +194,7 @@ name="demo2_control" id="demo2_control" value="on" - checked - /> + checked />
    diff --git a/font-features/font-variant-position.html b/font-features/font-variant-position.html index 0cac0e16..61751a62 100644 --- a/font-features/font-variant-position.html +++ b/font-features/font-variant-position.html @@ -165,8 +165,7 @@ name="demo1_control" id="demo1_control" value="on" - checked - /> + checked />
    @@ -201,8 +200,7 @@ name="demo2_control" id="demo2_control" value="on" - checked - /> + checked />
    diff --git a/font-features/font-variant.html b/font-features/font-variant.html index da690ed2..e697c355 100644 --- a/font-features/font-variant.html +++ b/font-features/font-variant.html @@ -152,8 +152,7 @@ name="demo1_control" id="demo1_control" value="on" - checked - /> + checked />
    @@ -181,8 +180,7 @@ name="demo2_control" id="demo2_control" value="on" - checked - /> + checked />
    diff --git a/grid/docs/autoplacement.html b/grid/docs/autoplacement.html index 8ae6ee09..eb60ecd9 100644 --- a/grid/docs/autoplacement.html +++ b/grid/docs/autoplacement.html @@ -65,7 +65,8 @@ .wrapper li.landscape { grid-column-end: span 2; -} +} +} +} +} +} +} +} +} +} +} +} +} +} +} +} +} +} +} +} +} +} +} +} +} +} +} +} - - - -
    - -
    - - - +} + + + +
    + +
    + + diff --git a/learn/backgrounds-borders/borders.html b/learn/backgrounds-borders/borders.html index 314439cf..53e1a9d1 100644 --- a/learn/backgrounds-borders/borders.html +++ b/learn/backgrounds-borders/borders.html @@ -1,45 +1,44 @@ + + + Backgrounds and Borders: border + + - .box { - width: 500px; - padding: 0.5em; - } - + + - h2 { - border-top: 2px dotted rebeccapurple; - border-bottom: 1em double rgb(24 163 78); - } - - + +
    +
    +

    Borders

    +

    Try changing the borders.

    +
    +
    - -
    -
    -

    Borders

    -

    Try changing the borders.

    -
    -
    - - +} - - -
    - -
    - - + +
    + +
    + + diff --git a/learn/backgrounds-borders/color.html b/learn/backgrounds-borders/color.html index bdbe199a..5b9bc9dd 100644 --- a/learn/backgrounds-borders/color.html +++ b/learn/backgrounds-borders/color.html @@ -1,46 +1,45 @@ + + + Backgrounds and Borders: background-color + + - .box { - width: 500px; - padding: 0.5em; - } - + + - span { - background-color: rgb(255 255 255 / 50%); - } - - + +
    +
    +

    Background Colors

    +

    Try changing the background colors.

    +
    +
    - -
    -
    -

    Background Colors

    -

    Try changing the background colors.

    -
    -
    - - +} - - -
    - -
    - - + +
    + +
    + + diff --git a/learn/backgrounds-borders/corners.html b/learn/backgrounds-borders/corners.html index a448dd8f..9fb32312 100644 --- a/learn/backgrounds-borders/corners.html +++ b/learn/backgrounds-borders/corners.html @@ -36,7 +36,8 @@

    Borders

    border: 10px solid rebeccapurple; border-radius: 1em; border-top-right-radius: 10% 30%; -} +} +} - - -
    - -
    - - + +
    + +
    + + diff --git a/learn/backgrounds-borders/mix-blend-mode.html b/learn/backgrounds-borders/mix-blend-mode.html index 1883c8a2..8bf90b50 100644 --- a/learn/backgrounds-borders/mix-blend-mode.html +++ b/learn/backgrounds-borders/mix-blend-mode.html @@ -78,7 +78,8 @@ .multiply-mix { mix-blend-mode: multiply; -} +} +} +} +} +} + + + Box Model: Borders + + - .box { - padding: 20px; - background-color: lightgray; - } - + + - .box { - border: 1px solid #333333; - border-top-style: dotted; - border-right-width: 20px; - border-bottom-color: hotpink; - } - - + +
    +
    +
    Change my borders.
    +
    +
    - -
    -
    -
    Change my borders.
    -
    -
    - - +} - - -
    - -
    - - + +
    + +
    + + diff --git a/learn/box-model/box-models.html b/learn/box-model/box-models.html index 4ccf23ef..d026bfc2 100644 --- a/learn/box-model/box-models.html +++ b/learn/box-model/box-models.html @@ -40,7 +40,8 @@ .alternate { box-sizing: border-box; -} +} +} - - -
    - -
    - - + +
    + +
    + + diff --git a/learn/box-model/margin-collapse.html b/learn/box-model/margin-collapse.html index 04383b50..c33419d8 100644 --- a/learn/box-model/margin-collapse.html +++ b/learn/box-model/margin-collapse.html @@ -43,7 +43,8 @@ .two { margin-top: 30px; -} +} +} +} +} - - -
    - -
    - - +

    Box shadow

    +
    + +
    + + diff --git a/learn/images/layout.html b/learn/images/layout.html index 7d21d56e..8eb01544 100644 --- a/learn/images/layout.html +++ b/learn/images/layout.html @@ -46,7 +46,8 @@ .wrapper > div { background-color: rebeccapurple; border-radius: .5em; -} +} +@layer site, page; font-style: italic; font-weight: bold !important; } -} +} +} + + + + + Media Queries: a simple mobile first design, adding a grid component + + - - - -
    -
    - -
    -
    -
    -
    -

    Veggies!

    -

    - Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi - welsh onion daikon amaranth tatsoi tomatillo melon azuki bean - garlic. -

    - -

    - Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot - courgette tatsoi pea sprouts fava bean collard greens dandelion - okra wakame tomato. Dandelion cucumber earthnut pea peanut soko - zucchini. -

    - -
      -
    • -

      Card 1

      -

      - Turnip greens yarrow ricebean rutabaga endive cauliflower sea - lettuce kohlrabi amaranth water spinach avocado daikon napa - cabbage asparagus winter purslane kale. -

      -
      • -
    • -

      Card 2

      -

      - Celery potato scallion desert raisin horseradish spinach - carrot soko. -

      -
      • + + @media screen and (min-width: 40em) { + article { + display: grid; + grid-template-columns: 3fr 1fr; + column-gap: 20px; + } + + nav ul { + display: flex; + } + + nav li { + flex: 1; + } + } + + @media screen and (min-width: 70em) { + main { + display: grid; + grid-template-columns: 3fr 1fr; + column-gap: 20px; + } + + article { + margin-bottom: 0; + } + + footer { + border-top: 1px solid #ccc; + margin-top: 2em; + } + } + + + + +
      +
      + +
      +
      +
      +
      +

      Veggies!

      +

      + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi + welsh onion daikon amaranth tatsoi tomatillo melon azuki bean + garlic. +

      + +

      + Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot + courgette tatsoi pea sprouts fava bean collard greens dandelion + okra wakame tomato. Dandelion cucumber earthnut pea peanut soko + zucchini. +

      + +
        +
      • +

        Card 1

        +

        + Turnip greens yarrow ricebean rutabaga endive cauliflower sea + lettuce kohlrabi amaranth water spinach avocado daikon napa + cabbage asparagus winter purslane kale. +

        +
        • +
      • +

        Card 2

        +

        + Celery potato scallion desert raisin horseradish spinach + carrot soko. +

        +
        • +
      • +

        Card 3

        +

        + Lotus root water spinach fennel kombu maize bamboo shoot green + bean swiss chard seakale pumpkin onion chickpea gram corn pea. +

        +
        • +
      • +

        Card 4

        +

        + Brussels sprout coriander water chestnut gourd swiss chard + wakame kohlrabi beetroot carrot watercress. +

        +
        • +
      • +

        Card 5

        +

        + Corn amaranth salsify bunya nuts nori azuki bean chickweed + potato bell pepper artichoke. +

        +
        • +
      +
      + +
      + +
      - -
    - - -
    - -
    -

    ©2019

    -
    -
    - + +
    +

    ©2019

    +
    + + diff --git a/learn/media-queries/step1.html b/learn/media-queries/step1.html index c53f46aa..59458ae6 100644 --- a/learn/media-queries/step1.html +++ b/learn/media-queries/step1.html @@ -1,144 +1,150 @@ - - - - - Media Queries: a simple mobile first design, step 1 - - - - -
    -
    - -
    -
    -
    -
    -

    Veggies!

    -

    - Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi - welsh onion daikon amaranth tatsoi tomatillo melon azuki bean - garlic. -

    - -

    - Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot - courgette tatsoi pea sprouts fava bean collard greens dandelion - okra wakame tomato. Dandelion cucumber earthnut pea peanut soko - zucchini. -

    - -

    - Turnip greens yarrow ricebean rutabaga endive cauliflower sea - lettuce kohlrabi amaranth water spinach avocado daikon napa - cabbage asparagus winter purslane kale. Celery potato scallion - desert raisin horseradish spinach carrot soko. Lotus root water - spinach fennel kombu maize bamboo shoot green bean swiss chard - seakale pumpkin onion chickpea gram corn pea. Brussels sprout - coriander water chestnut gourd swiss chard wakame kohlrabi - beetroot carrot watercress. Corn amaranth salsify bunya nuts nori - azuki bean chickweed potato bell pepper artichoke. -

    - -

    - Nori grape silver beet broccoli kombu beet greens fava bean potato - quandong celery. Bunya nuts black-eyed pea prairie turnip leek - lentil turnip greens parsnip. Sea lettuce lettuce water chestnut - eggplant winter purslane fennel azuki bean earthnut pea sierra - leone bologi leek soko chicory celtuce parsley jícama salsify. -

    -
    -
    - - -
    - -
    -

    ©2019

    -
    -
    - + +
    +

    ©2019

    +
    + + diff --git a/learn/media-queries/step2.html b/learn/media-queries/step2.html index 23072652..7d52b07a 100644 --- a/learn/media-queries/step2.html +++ b/learn/media-queries/step2.html @@ -1,160 +1,166 @@ + + + + Media Queries: a simple mobile first design, step 2 + - - - -
    -
    - -
    -
    -
    -
    -

    Veggies!

    -

    - Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi - welsh onion daikon amaranth tatsoi tomatillo melon azuki bean - garlic. -

    - -

    - Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot - courgette tatsoi pea sprouts fava bean collard greens dandelion - okra wakame tomato. Dandelion cucumber earthnut pea peanut soko - zucchini. -

    - -

    - Turnip greens yarrow ricebean rutabaga endive cauliflower sea - lettuce kohlrabi amaranth water spinach avocado daikon napa - cabbage asparagus winter purslane kale. Celery potato scallion - desert raisin horseradish spinach carrot soko. Lotus root water - spinach fennel kombu maize bamboo shoot green bean swiss chard - seakale pumpkin onion chickpea gram corn pea. Brussels sprout - coriander water chestnut gourd swiss chard wakame kohlrabi - beetroot carrot watercress. Corn amaranth salsify bunya nuts nori - azuki bean chickweed potato bell pepper artichoke. -

    - -

    - Nori grape silver beet broccoli kombu beet greens fava bean potato - quandong celery. Bunya nuts black-eyed pea prairie turnip leek - lentil turnip greens parsnip. Sea lettuce lettuce water chestnut - eggplant winter purslane fennel azuki bean earthnut pea sierra - leone bologi leek soko chicory celtuce parsley jícama salsify. -

    -
    -
    - - -
    - -
    -

    ©2019

    -
    -
    - + +
    +

    ©2019

    +
    + + diff --git a/learn/media-queries/step3.html b/learn/media-queries/step3.html index 67c859f9..654e351d 100644 --- a/learn/media-queries/step3.html +++ b/learn/media-queries/step3.html @@ -1,177 +1,183 @@ + + + + Media Queries: a simple mobile first design, step 3 + - - - -
    -
    - -
    -
    -
    -
    -

    Veggies!

    -

    - Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi - welsh onion daikon amaranth tatsoi tomatillo melon azuki bean - garlic. -

    - -

    - Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot - courgette tatsoi pea sprouts fava bean collard greens dandelion - okra wakame tomato. Dandelion cucumber earthnut pea peanut soko - zucchini. -

    - -

    - Turnip greens yarrow ricebean rutabaga endive cauliflower sea - lettuce kohlrabi amaranth water spinach avocado daikon napa - cabbage asparagus winter purslane kale. Celery potato scallion - desert raisin horseradish spinach carrot soko. Lotus root water - spinach fennel kombu maize bamboo shoot green bean swiss chard - seakale pumpkin onion chickpea gram corn pea. Brussels sprout - coriander water chestnut gourd swiss chard wakame kohlrabi - beetroot carrot watercress. Corn amaranth salsify bunya nuts nori - azuki bean chickweed potato bell pepper artichoke. -

    - -

    - Nori grape silver beet broccoli kombu beet greens fava bean potato - quandong celery. Bunya nuts black-eyed pea prairie turnip leek - lentil turnip greens parsnip. Sea lettuce lettuce water chestnut - eggplant winter purslane fennel azuki bean earthnut pea sierra - leone bologi leek soko chicory celtuce parsley jícama salsify. -

    -
    -
    - - -
    - -
    -

    ©2019

    -
    -
    - + +
    +

    ©2019

    +
    + + diff --git a/learn/overflow/auto.html b/learn/overflow/auto.html index 0133ba70..7caf0c78 100644 --- a/learn/overflow/auto.html +++ b/learn/overflow/auto.html @@ -32,7 +32,8 @@ width: 350px; height: 100px; overflow: auto; -} +} +} +} +} +} +} +} +} +} +} +} +} +} +} +} +} +} +} +} +} +} +} +} +} +} +} - - -
    - -
    - - + +
    + +
    + + diff --git a/learn/tasks/grid/grid2-download.html b/learn/tasks/grid/grid2-download.html index 4ce1e221..f84b1ccd 100644 --- a/learn/tasks/grid/grid2-download.html +++ b/learn/tasks/grid/grid2-download.html @@ -1,58 +1,56 @@ - - - - - - Grid: task 2 - - - - - - - -
    -
    One
    -
    Two
    -
    - - + + + + + Grid: task 2 + + + + + + + +
    +
    One
    +
    Two
    +
    + diff --git a/learn/tasks/grid/grid2.html b/learn/tasks/grid/grid2.html index 33a7f143..9f0fd4c4 100644 --- a/learn/tasks/grid/grid2.html +++ b/learn/tasks/grid/grid2.html @@ -1,56 +1,57 @@ - - - - - - Grid: task 2 - - - - - - - - - -
    -
    -
    One
    -
    Two
    -
    -
    - - + - - -
    - -
    - - + +
    + +
    + + diff --git a/learn/tasks/images/form.html b/learn/tasks/images/form.html index 204e2685..2791be11 100644 --- a/learn/tasks/images/form.html +++ b/learn/tasks/images/form.html @@ -34,7 +34,8 @@ .myform { border: 2px solid #000; padding: 5px; -} +} +} +} +} +} +} - - -
    - -
    - - + +
    + +
    + + diff --git a/learn/tasks/position/position2-download.html b/learn/tasks/position/position2-download.html index 6f2370d1..6afdc105 100644 --- a/learn/tasks/position/position2-download.html +++ b/learn/tasks/position/position2-download.html @@ -1,79 +1,77 @@ + + + Position: Task 2 + + - .content { - padding: 1em; - margin-left: 160px; - } - - - - -
    -
    -

    - This is the sidebar. It should remain in position as the content - scrolls. -

    -
    -
    -

    - Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh - onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. -

    -

    - Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot - courgette tatsoi pea sprouts fava bean collard greens dandelion okra - wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. -

    -

    - Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce - kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus - winter purslane kale. Celery potato scallion desert raisin horseradish - spinach carrot soko. Lotus root water spinach fennel kombu maize - bamboo shoot green bean swiss chard seakale pumpkin onion chickpea - gram corn pea. Brussels sprout coriander water chestnut gourd swiss - chard wakame kohlrabi beetroot carrot watercress. Corn amaranth - salsify bunya nuts nori azuki bean chickweed potato bell pepper - artichoke. -

    + +
    +
    +

    + This is the sidebar. It should remain in position as the content + scrolls. +

    +
    +
    +

    + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh + onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. +

    +

    + Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot + courgette tatsoi pea sprouts fava bean collard greens dandelion okra + wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. +

    +

    + Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce + kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus + winter purslane kale. Celery potato scallion desert raisin horseradish + spinach carrot soko. Lotus root water spinach fennel kombu maize + bamboo shoot green bean swiss chard seakale pumpkin onion chickpea + gram corn pea. Brussels sprout coriander water chestnut gourd swiss + chard wakame kohlrabi beetroot carrot watercress. Corn amaranth + salsify bunya nuts nori azuki bean chickweed potato bell pepper + artichoke. +

    +
    -
    - - + diff --git a/learn/tasks/position/position2.html b/learn/tasks/position/position2.html index b323ef28..2cbef90e 100644 --- a/learn/tasks/position/position2.html +++ b/learn/tasks/position/position2.html @@ -1,88 +1,90 @@ + + + Position: Task 2 + + - .content { - padding: 1em; - margin-left: 160px; - } - + + - .sidebar {} - - - - -
    -
    -
    -

    - This is the sidebar. It should remain in position as the content - scrolls. -

    -
    -
    -

    - Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi - welsh onion daikon amaranth tatsoi tomatillo melon azuki bean - garlic. -

    -

    - Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot - courgette tatsoi pea sprouts fava bean collard greens dandelion okra - wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. -

    -

    - Turnip greens yarrow ricebean rutabaga endive cauliflower sea - lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage - asparagus winter purslane kale. Celery potato scallion desert raisin - horseradish spinach carrot soko. Lotus root water spinach fennel - kombu maize bamboo shoot green bean swiss chard seakale pumpkin - onion chickpea gram corn pea. Brussels sprout coriander water - chestnut gourd swiss chard wakame kohlrabi beetroot carrot - watercress. Corn amaranth salsify bunya nuts nori azuki bean - chickweed potato bell pepper artichoke. -

    + +
    +
    +
    +

    + This is the sidebar. It should remain in position as the content + scrolls. +

    +
    +
    +

    + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi + welsh onion daikon amaranth tatsoi tomatillo melon azuki bean + garlic. +

    +

    + Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot + courgette tatsoi pea sprouts fava bean collard greens dandelion okra + wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. +

    +

    + Turnip greens yarrow ricebean rutabaga endive cauliflower sea + lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage + asparagus winter purslane kale. Celery potato scallion desert raisin + horseradish spinach carrot soko. Lotus root water spinach fennel + kombu maize bamboo shoot green bean swiss chard seakale pumpkin + onion chickpea gram corn pea. Brussels sprout coriander water + chestnut gourd swiss chard wakame kohlrabi beetroot carrot + watercress. Corn amaranth salsify bunya nuts nori azuki bean + chickweed potato bell pepper artichoke. +

    +
    -
    -
    + - +} - +
    -
    - -
    - - - - \ No newline at end of file +
    + +
    + + + diff --git a/learn/tasks/sizing/height-min-height.html b/learn/tasks/sizing/height-min-height.html index 33d947fb..6c2299c2 100644 --- a/learn/tasks/sizing/height-min-height.html +++ b/learn/tasks/sizing/height-min-height.html @@ -51,7 +51,8 @@ .box2 { -} +} +} +} +} +} +} +} +} +} - - -
    - -
    - - + +
    + +
    + + diff --git a/learn/values-units/color-hsla.html b/learn/values-units/color-hsla.html index 93d40320..b9b08ae0 100644 --- a/learn/values-units/color-hsla.html +++ b/learn/values-units/color-hsla.html @@ -54,7 +54,8 @@ .three { background-color: hsl(174 77% 31% / .9); -} +} +} +} +} - - -
    - -
    - - + +
    + +
    + + diff --git a/learn/values-units/image.html b/learn/values-units/image.html index 8594c64a..11fc8ac7 100644 --- a/learn/values-units/image.html +++ b/learn/values-units/image.html @@ -1,59 +1,61 @@ - - - - Values and Units: image - - - - + + - - - -
    -
    -
    -
    - - +} - - -
    - -
    - - - +
    + +
    + +
    + + diff --git a/learn/values-units/length.html b/learn/values-units/length.html index 05031eac..4111ada4 100644 --- a/learn/values-units/length.html +++ b/learn/values-units/length.html @@ -59,7 +59,8 @@ .em { width: 10em; -} +} +} +} +} +} Heading .vertical { writing-mode: vertical-rl; -} +} +} +} +} +} +} diff --git a/masking/mask-composite.html b/masking/mask-composite.html index cef0408c..764c1928 100644 --- a/masking/mask-composite.html +++ b/masking/mask-composite.html @@ -90,7 +90,8 @@ mask-size: 100% 100%; -webkit-mask-composite: source-over; mask-composite: add; -} +} diff --git a/masking/mask-origin.html b/masking/mask-origin.html index 7196af3b..548e389c 100644 --- a/masking/mask-origin.html +++ b/masking/mask-origin.html @@ -89,7 +89,8 @@ mask-image: url(star.svg); -webkit-mask-origin: border-box; mask-origin: border-box; -} +} diff --git a/masking/mask-repeat.html b/masking/mask-repeat.html index 098d0579..4e34d06e 100644 --- a/masking/mask-repeat.html +++ b/masking/mask-repeat.html @@ -87,7 +87,8 @@ mask-image: url(star.svg); -webkit-mask-repeat: repeat; mask-repeat: repeat; -} +} diff --git a/masking/mask-size.html b/masking/mask-size.html index 4f88f497..ebab107a 100644 --- a/masking/mask-size.html +++ b/masking/mask-size.html @@ -87,7 +87,8 @@ mask-image: url(MDN.svg); -webkit-mask-size: 50%; mask-size: 50%; -} +} diff --git a/modules/animation.html b/modules/animation.html index 68e85a12..36611e87 100644 --- a/modules/animation.html +++ b/modules/animation.html @@ -217,8 +217,7 @@ + aria-label="Toggle the play state of the animation" />
    + step="0.1" />

    diff --git a/modules/compositing.html b/modules/compositing.html index 79f0d4d4..b71a8b3c 100644 --- a/modules/compositing.html +++ b/modules/compositing.html @@ -9,11 +9,17 @@ div { width: 200px; height: 200px; - background-image: repeating-linear-gradient(45deg, red 0 15px,pink 15px 30px), + background-image: repeating-linear-gradient( + 45deg, + red 0 15px, + pink 15px 30px + ), repeating-linear-gradient(-45deg, blue 0 15px, lightblue 15px 30px); background-size: 150px 150px; background-repeat: no-repeat; - background-position: top left, bottom right; + background-position: + top left, + bottom right; background-color: palegoldenrod; text-align: center; padding-top: 150px; diff --git a/modules/filters.html b/modules/filters.html index fa9c14bd..b079e20e 100644 --- a/modules/filters.html +++ b/modules/filters.html @@ -35,8 +35,7 @@ src="assets/george_floyd_memorial_sm.jpg" width="600" height="400" - alt="A colorful memorial honoring George Floyd and the Black Lives Matter movement" - /> + alt="A colorful memorial honoring George Floyd and the Black Lives Matter movement" />
    Select your filters @@ -47,8 +46,7 @@ value="0" min="0" max="1" - step="0.1" - /> + step="0.1" /> blur() diff --git a/modules/multicol.html b/modules/multicol.html index 443a56e1..64df5bb3 100644 --- a/modules/multicol.html +++ b/modules/multicol.html @@ -170,8 +170,7 @@

    A Lament for Confederation

    max="40" value="10" step="2" - id="colWidth" - /> + id="colWidth" />

    @@ -181,8 +180,7 @@

    A Lament for Confederation

    max="10" value="1" step="0.5" - id="gapSize" - /> + id="gapSize" />

    diff --git a/modules/scroll_snap.html b/modules/scroll_snap.html index b095079d..c5c3320e 100644 --- a/modules/scroll_snap.html +++ b/modules/scroll_snap.html @@ -148,8 +148,7 @@ max="2" value="1" list="places" - id="block" - /> + id="block" /> block position

    @@ -161,8 +160,7 @@ max="2" value="1" list="places" - id="inline" - /> + id="inline" /> inline position

    diff --git a/moz-context-properties/index.html b/moz-context-properties/index.html index 34203ea3..cb6b183b 100644 --- a/moz-context-properties/index.html +++ b/moz-context-properties/index.html @@ -32,19 +32,16 @@ class="img1" src="data:image/svg+xml;utf8, " - /> + fill='context-fill red' stroke='context-stroke' fill-opacity='0.5'/>" /> + fill='context-fill yellow' stroke='context-stroke'/>" /> + fill='context-stroke' stroke='context-fill red'/>" /> diff --git a/object-fit-basics/index.html b/object-fit-basics/index.html index 271a5558..20cefda9 100644 --- a/object-fit-basics/index.html +++ b/object-fit-basics/index.html @@ -5,9 +5,8 @@ Object-fit basics + href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" + rel="stylesheet" /> @@ -16,7 +15,7 @@

    Object fit basics

    This page illustrates different object-fit settings. It is part of the - Exploring object-fit Mozilla Hacks post. @@ -32,8 +31,7 @@

    object-fit: contain

    with object-fit contain, the image is trapped inside the image element, retaining aspect ratio. + alt="with object-fit contain, the image is trapped inside the image element, retaining aspect ratio." />

    object-fit: cover

    @@ -46,8 +44,7 @@

    object-fit: cover

    with object-fit cover, the image completely covers the image element and is cropped along the longest dimension + alt="with object-fit cover, the image completely covers the image element and is cropped along the longest dimension" />

    object-fit: fill

    @@ -63,8 +60,7 @@

    object-fit: fill

    src="windowsill.webm" width="426" height="240" - class="fill" - > + class="fill">

    HTML5 video not supported?

    @@ -82,8 +78,7 @@

    object-fit: none

    src="flowers.jpg" class="none" alt="when hovered over the image element expands to reveal more of the image" - tabindex="0" - /> + tabindex="0" />

    object-position

    @@ -97,20 +92,17 @@

    object-position

    when hovered over the image element expands to reveal more of the image + alt="when hovered over the image element expands to reveal more of the image" /> when hovered over the image element expands to reveal more of the image + alt="when hovered over the image element expands to reveal more of the image" /> when hovered over the image element expands to reveal more of the image + alt="when hovered over the image element expands to reveal more of the image" /> diff --git a/variable-fonts/font-stretch.html b/variable-fonts/font-stretch.html index dac37a68..271bd43d 100644 --- a/variable-fonts/font-stretch.html +++ b/variable-fonts/font-stretch.html @@ -72,7 +72,8 @@ .expanded { font-stretch: 200%; -} +}
    - Adjust Slant: + max="12" />
    diff --git a/variable-fonts/weight.html b/variable-fonts/weight.html index d3d60741..2feb481c 100644 --- a/variable-fonts/weight.html +++ b/variable-fonts/weight.html @@ -188,8 +188,7 @@ id="text-axis" class="controls--slider" min="300" - max="900" - /> + max="900" /> diff --git a/variable-fonts/width.html b/variable-fonts/width.html index 4dad4bd7..b1106de8 100644 --- a/variable-fonts/width.html +++ b/variable-fonts/width.html @@ -196,8 +196,7 @@ id="text-axis" class="controls--slider" min="55" - max="100" - /> + max="100" /> From 484774a0310a27cc8e4239771bebef6d74f84332 Mon Sep 17 00:00:00 2001 From: Onkar Ruikar <87750369+OnkarRuikar@users.noreply.github.com> Date: Thu, 7 Dec 2023 15:01:56 +0530 Subject: [PATCH 160/188] fix: various code issues (#161) * http -> https * un used namespace * remove redundant `` tags * fix label for attributes * provide generic fallback fonts * remove overridden properties in same rule * language issues * provide function instead of an object as argument * fix remaining closing tags * fix remaining closing tags * Update target-text/index.html * Update target-text/index.html --------- Co-authored-by: Jean-Yves Perrier --- backdrop/script.js | 2 +- counter-style-demo/css/style.css | 4 ++-- css-cookbook/sharp-account_box-24px.svg | 2 +- editable-samples-2/pages/filter/svg/example.svg | 3 +-- editable-samples/codemirror/mode/css/gss.html | 8 ++++---- editable-samples/codemirror/mode/css/index.html | 8 ++++---- editable-samples/codemirror/mode/css/less.html | 6 +++--- editable-samples/codemirror/mode/css/scss.html | 6 +++--- .../pages/border-top-color/index-old.html | 12 ++++++------ editable-samples/pages/border-top-color/index.html | 12 ++++++------ flexbox/use-cases/MDN.svg | 3 +-- font-features/font-variant-alternates.html | 2 +- font-features/font-variant-numeric-example.html | 2 +- learn/getting-started--download.html | 2 +- learn/getting-started/biog-download.html | 2 +- learn/getting-started/biog.html | 2 +- learn/getting-started/started1.html | 2 +- learn/getting-started/started2.html | 2 +- learn/getting-started/started3.html | 2 +- learn/selectors/attribute-links.html | 2 +- learn/tasks/float/marking.md | 2 +- learn/tasks/selectors/attribute-links-download.html | 2 +- learn/tasks/selectors/attribute-links.html | 2 +- learn/tasks/selectors/pseudo.html | 2 +- logical/size-max.html | 2 +- masking/MDN.svg | 3 +-- masking/star.svg | 3 +-- scroll-snap/mandatory-y-old-spec.html | 1 - tools/border-image-generator/styles.css | 5 +---- tools/border-radius-generator/styles.css | 1 - tools/color-picker/styles.css | 3 --- variable-fonts/grade.html | 2 +- variable-fonts/italic.html | 2 +- variable-fonts/optical-sizing.html | 4 ++-- variable-fonts/weight.html | 2 +- variable-fonts/width.html | 2 +- 36 files changed, 55 insertions(+), 67 deletions(-) diff --git a/backdrop/script.js b/backdrop/script.js index 404a2958..3f99bd9b 100644 --- a/backdrop/script.js +++ b/backdrop/script.js @@ -36,7 +36,7 @@ function toggleFullscreen() { if (!document.fullscreenElement) { elem .requestFullscreen() - .then({}) + .then(() => {}) .catch((err) => { alert( `Error attempting to enable full-screen mode: ${err.message} (${err.name})`, diff --git a/counter-style-demo/css/style.css b/counter-style-demo/css/style.css index e2a45d57..686e1d53 100644 --- a/counter-style-demo/css/style.css +++ b/counter-style-demo/css/style.css @@ -28,7 +28,7 @@ body { .header h1 { margin: 0; padding: 0; - font-family: Ubuntu, Arial, Tahoma, "Sans Serif"; + font-family: Ubuntu, Arial, Tahoma, sans-serif; } .header { @@ -41,7 +41,7 @@ body { .notes-section { margin: 10px; color: #4d4e53; - font-family: Ubuntu, Arial, Tahoma, "Sans Serif"; + font-family: Ubuntu, Arial, Tahoma, sans-serif; float: left; } diff --git a/css-cookbook/sharp-account_box-24px.svg b/css-cookbook/sharp-account_box-24px.svg index 0cc9b561..4767e28d 100644 --- a/css-cookbook/sharp-account_box-24px.svg +++ b/css-cookbook/sharp-account_box-24px.svg @@ -1,6 +1,6 @@ - diff --git a/editable-samples-2/pages/filter/svg/example.svg b/editable-samples-2/pages/filter/svg/example.svg index c728169f..8a0d4b53 100644 --- a/editable-samples-2/pages/filter/svg/example.svg +++ b/editable-samples-2/pages/filter/svg/example.svg @@ -1,6 +1,5 @@ + xmlns="http://www.w3.org/2000/svg"> diff --git a/editable-samples/codemirror/mode/css/gss.html b/editable-samples/codemirror/mode/css/gss.html index 232fe8c1..df24e4f5 100644 --- a/editable-samples/codemirror/mode/css/gss.html +++ b/editable-samples/codemirror/mode/css/gss.html @@ -2,17 +2,17 @@ CodeMirror: Closure Stylesheets (GSS) mode - + - - + +