docs(tutorials): add foreignObject tutorial (#2075)

clientIO · Apr 28, 2023 · 3f9e195 · 3f9e195
1 parent 8ae30b4
commit 3f9e195
Show file tree

Hide file tree

Showing 3 changed files with 1,005 additions and 0 deletions.
diff --git a/tutorials/css/foreign-object.css b/tutorials/css/foreign-object.css
@@ -0,0 +1,69 @@
+/* 
+   ---------------------------
+   FORM EXAMPLE
+   ---------------------------
+*/
+
+.outer {
+   background: linear-gradient(92.05deg, hsl(355, 100%, 68%) 12.09%, hsl(355, 100%, 63%) 42.58%, hsl(355, 85%, 54%) 84.96%);
+   padding: 6px;
+   width: 100%;
+   height: 100%;
+}
+
+.inner {
+   background-color: hsl(210, 37%, 14%);
+   width: 100%;
+   height: 100%;
+}
+
+.form {
+   display: flex;
+   font-family: sans-serif;
+   flex-direction: column;
+   justify-content: space-evenly;
+   padding: 0 32px;
+   width: 100%;
+   height: 100%;
+}
+
+input {
+   all: unset;
+   background: hsl(218, 80%, 2%);
+   color: white;
+   cursor: text;
+   font-size: 1rem;
+   height: 56px; 
+   outline-color: hsl(355, 100%, 63%);
+   outline-style: solid;
+   outline-width: thin;
+   padding: 0 32px;
+}
+
+input::placeholder {
+   color: hsl(0, 0%, 50%);
+}
+
+button {
+   background-color: hsl(218, 80%, 2%);
+   border: unset;
+   cursor: pointer;
+   display: flex;
+   justify-content: center;
+   align-items: center;
+   font-family: sans-serif;
+   font-size: 1rem;
+   font-weight: 600;
+   height: 56px;
+   outline-color: hsl(355, 100%, 63%);
+   outline-style: solid;
+   outline-width: thin;
+}
+
+button span {
+   background: linear-gradient(92.05deg, hsl(355, 100%, 68%) 12.09%, hsl(355, 100%, 63%) 42.58%, hsl(355, 85%, 54%) 84.96%);
+   -webkit-background-clip: text;
+   background-clip: text; 
+   -webkit-text-fill-color: hsl(0deg 0% 0% / 0%);
+   font-size: 1.2rem;
+}