use formatted constructables

WebKit · Jun 27, 2023 · b59abd2 · b59abd2
1 parent fd070ad
commit b59abd2
Show file tree

Hide file tree

Showing 7 changed files with 508 additions and 17 deletions.
diff --git a/resources/todomvc/vanilla-examples/javascript-web-components/src/styles/app.constructable.js b/resources/todomvc/vanilla-examples/javascript-web-components/src/styles/app.constructable.js
@@ -1,5 +1,15 @@
 const sheet = new CSSStyleSheet();
-sheet.replaceSync(
-    ":host {\n    display: block;\n\tbox-shadow: none !important;\n\tmin-height: 68px;\n}\n\n.app {\n\tbackground: #fff;\n\tmargin: 24px 16px 40px 16px;\n\tposition: relative;\n\tbox-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),\n\t            0 25px 50px 0 rgba(0, 0, 0, 0.1);\n}\n"
-);
+sheet.replaceSync(`:host {
+    display: block;
+    box-shadow: none !important;
+    min-height: 68px;
+}
+
+.app {
+    background: #fff;
+    margin: 24px 16px 40px 16px;
+    position: relative;
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
+}
+`);
 export default sheet;
diff --git a/.../todomvc/vanilla-examples/javascript-web-components/src/styles/bottombar.constructable.js b/.../todomvc/vanilla-examples/javascript-web-components/src/styles/bottombar.constructable.js
@@ -1,5 +1,158 @@
 const sheet = new CSSStyleSheet();
-sheet.replaceSync(
-    ':host {\n    display: block;\n\tbox-shadow: none !important;\n}\n\n.bottombar {\n\tpadding: 10px 0;\n\theight: 41px;\n\ttext-align: center;\n\tfont-size: 15px;\n\tborder-top: 1px solid #e6e6e6;\n\tposition: relative;\n}\n\n.bottombar::before {\n\tcontent: \'\';\n\tposition: absolute;\n\tright: 0;\n\tbottom: 0;\n\tleft: 0;\n\theight: 50px;\n\toverflow: hidden;\n\tpointer-events: none;\n\tbox-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),\n\t            0 8px 0 -3px #f6f6f6,\n\t            0 9px 1px -3px rgba(0, 0, 0, 0.2),\n\t            0 16px 0 -6px #f6f6f6,\n\t            0 17px 2px -6px rgba(0, 0, 0, 0.2);\n}\n\n.todo-status {\n\ttext-align: left;\n\tpadding: 3px;\n    height: 32px;\n    line-height: 26px;\n\tposition: absolute;\n\tleft: 12px;\n\ttop: 50%;\n    transform: translateY(-50%);\n}\n\n.todo-count {\n\tfont-weight: 300;\n}\n\n.filter-list {\n\tmargin: 0;\n\tpadding: 0;\n\tlist-style: none;\n\tdisplay: inline-block;\n\tposition: absolute;\n\tleft: 0;\n\tright: 0;\n\ttop: 50%;\n    transform: translateY(-50%);\n}\n\n.filter-item {\n\tdisplay: inline-block;\n}\n\n.filter-link {\n\tcolor: inherit;\n\tmargin: 3px;\n\tpadding: 0 7px;\n\ttext-decoration: none;\n\tborder: 1px solid transparent;\n\tborder-radius: 3px;\n\tcursor: pointer;\n\tdisplay: block;\n\theight: 26px;\n\tline-height: 26px;\n}\n\n.filter-link:hover {\n\tborder-color: #DB7676;\n}\n\n.filter-link.selected {\n\tborder-color: #CE4646;\n}\n\n.clear-completed-button,\n.clear-completed-button:active {\n\ttext-decoration: none;\n\tcursor: pointer;\n\tpadding: 3px;\n    height: 32px;\n    line-height: 26px;\n\tposition: absolute;\n\tright: 12px;\n\ttop: 50%;\n    transform: translateY(-50%);\n}\n\n.clear-completed-button:hover {\n\ttext-decoration: underline;\n}\n\n/* rtl support */\nhtml[dir="rtl"] .todo-status,\n:host([dir="rtl"]) .todo-status { \n\tright: 12px;\n\tleft: unset;\n}\n\nhtml[dir="rtl"] .clear-completed-button,\n:host([dir="rtl"]) .clear-completed-button { \n\tleft: 12px;\n\tright: unset;\n}\n\n@media (max-width: 430px) {\n\t.bottombar {\n\t\theight: 120px;\n\t}\n\n\t.todo-status {\n\t\tdisplay: block;\n\t\ttext-align: center;\n\t\tposition: relative;\n\t\tleft: unset;\n\t\tright: unset;\n\t\ttop: unset;\n\t\ttransform: unset;\n\t}\n\n\t.filter-list {\n\t\tdisplay: block;\n\t\tposition: relative;\n\t\tleft: unset;\n\t\tright: unset;\n\t\ttop: unset;\n\t\ttransform: unset;\n\t}\n\n\t.clear-completed-button,\n\t.clear-completed-button:active {\n\t\tdisplay: block;\n\t\tmargin: 0 auto;\n\t\tposition: relative;\n\t\tleft: unset;\n\t\tright: unset;\n\t\ttop: unset;\n\t\ttransform: unset;\n\t}\n\n\t/* rtl support */\n\thtml[dir="rtl"] .todo-status,\n\t:host([dir="rtl"]) .todo-status { \n\t\tright: unset;\n\t\tleft: unset;\n\t}\n\n\thtml[dir="rtl"] .clear-completed-button,\n\t:host([dir="rtl"]) .clear-completed-button { \n\t\tleft: unset;\n\t\tright: unset;\n\t}\n}\n'
-);
+sheet.replaceSync(`:host {
+    display: block;
+    box-shadow: none !important;
+}
+
+.bottombar {
+    padding: 10px 0;
+    height: 41px;
+    text-align: center;
+    font-size: 15px;
+    border-top: 1px solid #e6e6e6;
+    position: relative;
+}
+
+.bottombar::before {
+    content: "";
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    height: 50px;
+    overflow: hidden;
+    pointer-events: none;
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6, 0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6, 0 17px 2px -6px rgba(0, 0, 0, 0.2);
+}
+
+.todo-status {
+    text-align: left;
+    padding: 3px;
+    height: 32px;
+    line-height: 26px;
+    position: absolute;
+    left: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+.todo-count {
+    font-weight: 300;
+}
+
+.filter-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: inline-block;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+.filter-item {
+    display: inline-block;
+}
+
+.filter-link {
+    color: inherit;
+    margin: 3px;
+    padding: 0 7px;
+    text-decoration: none;
+    border: 1px solid transparent;
+    border-radius: 3px;
+    cursor: pointer;
+    display: block;
+    height: 26px;
+    line-height: 26px;
+}
+
+.filter-link:hover {
+    border-color: #db7676;
+}
+
+.filter-link.selected {
+    border-color: #ce4646;
+}
+
+.clear-completed-button,
+.clear-completed-button:active {
+    text-decoration: none;
+    cursor: pointer;
+    padding: 3px;
+    height: 32px;
+    line-height: 26px;
+    position: absolute;
+    right: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+.clear-completed-button:hover {
+    text-decoration: underline;
+}
+
+/* rtl support */
+html[dir="rtl"] .todo-status,
+:host([dir="rtl"]) .todo-status {
+    right: 12px;
+    left: unset;
+}
+
+html[dir="rtl"] .clear-completed-button,
+:host([dir="rtl"]) .clear-completed-button {
+    left: 12px;
+    right: unset;
+}
+
+@media (max-width: 430px) {
+    .bottombar {
+        height: 120px;
+    }
+
+    .todo-status {
+        display: block;
+        text-align: center;
+        position: relative;
+        left: unset;
+        right: unset;
+        top: unset;
+        transform: unset;
+    }
+
+    .filter-list {
+        display: block;
+        position: relative;
+        left: unset;
+        right: unset;
+        top: unset;
+        transform: unset;
+    }
+
+    .clear-completed-button,
+    .clear-completed-button:active {
+        display: block;
+        margin: 0 auto;
+        position: relative;
+        left: unset;
+        right: unset;
+        top: unset;
+        transform: unset;
+    }
+
+        html[dir="rtl"] .todo-status,
+    :host([dir="rtl"]) .todo-status {
+        right: unset;
+        left: unset;
+    }
+
+    html[dir="rtl"] .clear-completed-button,
+    :host([dir="rtl"]) .clear-completed-button {
+        left: unset;
+        right: unset;
+    }
+}
+`);
 export default sheet;
diff --git a/...ces/todomvc/vanilla-examples/javascript-web-components/src/styles/global.constructable.js b/...ces/todomvc/vanilla-examples/javascript-web-components/src/styles/global.constructable.js
@@ -1,5 +1,86 @@
 const sheet = new CSSStyleSheet();
-sheet.replaceSync(
-    "/** defaults */\n*, *::before, *::after {\n\tbox-sizing: border-box;\n}\n\nhtml,\nbody {\n\tmargin: 0;\n\tpadding: 0;\n}\n\nbody {\n\tfont: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;\n\tline-height: 1.4em;\n\tbackground: #f5f5f5;\n\tcolor: #111;\n\tmin-width: 300px;\n\tmax-width: 582px;\n\tmargin: 0 auto;\n\t-webkit-font-smoothing: antialiased;\n\t-moz-osx-font-smoothing: grayscale;\n\tfont-weight: 300;\n}\n\n:focus {\n\tbox-shadow: inset 0 0 2px 2px #CF7D7D !important;\n\toutline: 0 !important;\n}\n\n/** resets */\nbutton {\n\tmargin: 0;\n\tpadding: 0;\n\tborder: 0;\n\tbackground: none;\n\tfont-size: 100%;\n\tvertical-align: baseline;\n\tfont-family: inherit;\n\tfont-weight: inherit;\n\tcolor: inherit;\n\tappearance: none;\n\t-webkit-font-smoothing: antialiased;\n\t-moz-osx-font-smoothing: grayscale;\n}\n\ninput {\n\tposition: relative;\n\tmargin: 0;\n\tfont-size: inherit;\n\tfont-family: inherit;\n\tfont-weight: inherit;\n\tcolor: inherit;\n\tpadding: 0;\n\tborder: 0;\n\t-webkit-font-smoothing: antialiased;\n\t-moz-osx-font-smoothing: grayscale;\n}\n\ninput:placeholder-shown {\n\ttext-overflow: ellipsis;\n}\n\n/* utility classes */\n\n/* used for things that should be hidden in the ui,\nbut useful for people who use screen readers */\n.visually-hidden {\n    border: 0;\n    clip: rect(0 0 0 0);\n    clip-path: inset(50%);\n    height: 1px;\n    width: 1px;\n    margin: -1px;\n    padding: 0;\n    overflow: hidden;\n    position: absolute;\n    white-space: nowrap;\n}\n\n.truncate-singleline {\n    width: 100%;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    display: block !important;\n}\n"
-);
+sheet.replaceSync(`*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+html,
+body {
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
+    line-height: 1.4em;
+    background: #f5f5f5;
+    color: #111;
+    min-width: 300px;
+    max-width: 582px;
+    margin: 0 auto;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-weight: 300;
+}
+
+:focus {
+    box-shadow: inset 0 0 2px 2px #cf7d7d !important;
+    outline: 0 !important;
+}
+
+button {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: none;
+    font-size: 100%;
+    vertical-align: baseline;
+    font-family: inherit;
+    font-weight: inherit;
+    color: inherit;
+    appearance: none;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+input {
+    position: relative;
+    margin: 0;
+    font-size: inherit;
+    font-family: inherit;
+    font-weight: inherit;
+    color: inherit;
+    padding: 0;
+    border: 0;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+input:placeholder-shown {
+    text-overflow: ellipsis;
+}
+
+
+.visually-hidden {
+    border: 0;
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    height: 1px;
+    width: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+}
+
+.truncate-singleline {
+    width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: block !important;
+}
+`);
 export default sheet;
diff --git a/...urces/todomvc/vanilla-examples/javascript-web-components/src/styles/main.constructable.js b/...urces/todomvc/vanilla-examples/javascript-web-components/src/styles/main.constructable.js
@@ -1,3 +1,11 @@
 const sheet = new CSSStyleSheet();
-sheet.replaceSync(":host {\n    display: block;\n\tbox-shadow: none !important;\n}\n\n.main {\n\tposition: relative;\n}\n");
+sheet.replaceSync(`:host {
+    display: block;
+    box-shadow: none !important;
+}
+
+.main {
+    position: relative;
+}
+`);
 export default sheet;