]> _ Git - Animations.git/commitdiff
wait #2508 @3
authornael <nael@cubedesigners.com>
Tue, 15 Jan 2019 10:26:06 +0000 (11:26 +0100)
committernael <nael@cubedesigners.com>
Tue, 15 Jan 2019 10:26:06 +0000 (11:26 +0100)
Fluidbook-presentation-btn/p35/Fluidbook-presentation-btn.zip [new file with mode: 0644]
Fluidbook-presentation-btn/p35/font.woff [new file with mode: 0644]
Fluidbook-presentation-btn/p35/index.html [new file with mode: 0644]
Fluidbook-presentation-btn/p35/main.js [new file with mode: 0644]
Fluidbook-presentation-btn/p35/style.css [new file with mode: 0644]
Fluidbook-presentation-btn/p35/style.css.map [new file with mode: 0644]
Fluidbook-presentation-btn/p35/style.sass [new file with mode: 0644]

diff --git a/Fluidbook-presentation-btn/p35/Fluidbook-presentation-btn.zip b/Fluidbook-presentation-btn/p35/Fluidbook-presentation-btn.zip
new file mode 100644 (file)
index 0000000..ea20a21
Binary files /dev/null and b/Fluidbook-presentation-btn/p35/Fluidbook-presentation-btn.zip differ
diff --git a/Fluidbook-presentation-btn/p35/font.woff b/Fluidbook-presentation-btn/p35/font.woff
new file mode 100644 (file)
index 0000000..8a054ad
Binary files /dev/null and b/Fluidbook-presentation-btn/p35/font.woff differ
diff --git a/Fluidbook-presentation-btn/p35/index.html b/Fluidbook-presentation-btn/p35/index.html
new file mode 100644 (file)
index 0000000..5ab4d88
--- /dev/null
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+<canvas id="canvas" width="146" height="43"></canvas>
+
+<div class="container">
+    <!--<img src="bg.png" alt="">-->
+    <button onclick="btnClick()" class="btn">
+        voir un exemple
+    </button>
+</div>
+
+<script src="main.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/Fluidbook-presentation-btn/p35/main.js b/Fluidbook-presentation-btn/p35/main.js
new file mode 100644 (file)
index 0000000..4c49b47
--- /dev/null
@@ -0,0 +1,3 @@
+function btnClick() {
+    parent.fluidbook.links.triggerLinkById('e28ee1f000');
+}
\ No newline at end of file
diff --git a/Fluidbook-presentation-btn/p35/style.css b/Fluidbook-presentation-btn/p35/style.css
new file mode 100644 (file)
index 0000000..849f660
--- /dev/null
@@ -0,0 +1,63 @@
+* {
+  margin: 0;
+  padding: 0; }
+
+#canvas {
+  display: none;
+  position: absolute; }
+
+@font-face {
+  font-family: font;
+  src: url("font.woff"); }
+.container {
+  width: 146px;
+  height: 43px; }
+
+.btn {
+  width: 146px;
+  height: 43px;
+  position: absolute;
+  border: 0;
+  background-image: linear-gradient(90deg, #41a6c9 0%, #63c2b7 100%);
+  text-transform: uppercase;
+  color: white;
+  font-size: 11px;
+  transition: all 300ms ease-out;
+  -webkit-transition: all 300ms ease-out;
+  cursor: pointer;
+  font-family: font;
+  font-weight: 600; }
+  .btn::before {
+    position: absolute;
+    content: "";
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-image: linear-gradient(to bottom, #ffffff, #ffffff);
+    z-index: -1;
+    -webkit-transition: all 300ms ease-out;
+    opacity: 0; }
+  .btn::after {
+    position: absolute;
+    content: "";
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    border: 2px solid;
+    border-image: linear-gradient(to left, #41A6C9 0%, #63C2B7 100%);
+    border-image-slice: 1;
+    -webkit-transition: all 300ms ease-out;
+    z-index: 3;
+    opacity: 0; }
+  .btn:hover {
+    color: #63C2B7;
+    -webkit-transition: all 300ms ease-out;
+    z-index: 2; }
+    .btn:hover::before {
+      opacity: 1; }
+    .btn:hover::after {
+      opacity: 1; }
+
+/*# sourceMappingURL=style.css.map */
diff --git a/Fluidbook-presentation-btn/p35/style.css.map b/Fluidbook-presentation-btn/p35/style.css.map
new file mode 100644 (file)
index 0000000..d0e1bab
--- /dev/null
@@ -0,0 +1,7 @@
+{
+"version": 3,
+"mappings": "AAAA,CAAC;EACC,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;;AAGZ,OAAO;EACL,OAAO,EAAE,IAAI;EACb,QAAQ,EAAE,QAAQ;;;EAElB,WAAW,EAAE,IAAI;EACjB,GAAG,EAAE,gBAAgB;AACvB,UAAU;EACR,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,IAAI;;AACd,IAAI;EACF,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,IAAI;EACZ,QAAQ,EAAE,QAAQ;EAClB,MAAM,EAAE,CAAC;EACT,gBAAgB,EAhBP,gDAAsE;EAiB/E,cAAc,EAAE,SAAS;EACzB,KAAK,EAAE,KAAK;EACZ,SAAS,EAAE,IAAI;EACf,UAAU,EAAG,kBAAkB;EAC/B,kBAAkB,EAAG,kBAAkB;EACvC,MAAM,EAAE,OAAO;EACf,WAAW,EAAE,IAAI;EACjB,WAAW,EAAE,GAAG;EAChB,YAAS;IACP,QAAQ,EAAE,QAAQ;IAClB,OAAO,EAAE,EAAE;IACX,GAAG,EAAE,CAAC;IACN,KAAK,EAAE,CAAC;IACR,MAAM,EAAE,CAAC;IACT,IAAI,EAAE,CAAC;IACP,gBAAgB,EAAE,4CAA4C;IAC9D,OAAO,EAAE,EAAE;IACX,kBAAkB,EAAE,kBAAkB;IACtC,OAAO,EAAE,CAAC;EACZ,WAAQ;IACN,QAAQ,EAAE,QAAQ;IAClB,OAAO,EAAE,EAAE;IACX,GAAG,EAAE,CAAC;IACN,KAAK,EAAE,CAAC;IACR,MAAM,EAAE,CAAC;IACT,IAAI,EAAE,CAAC;IACP,MAAM,EAAE,SAAS;IACjB,YAAY,EAAE,kDAAkD;IAChE,kBAAkB,EAAE,CAAC;IACrB,kBAAkB,EAAE,kBAAkB;IACtC,OAAO,EAAE,CAAC;IACV,OAAO,EAAE,CAAC;EACZ,UAAO;IACL,KAAK,EAAE,OAAO;IACd,kBAAkB,EAAE,kBAAkB;IACtC,OAAO,EAAE,CAAC;IACV,kBAAS;MACP,OAAO,EAAE,CAAC;IACZ,iBAAQ;MACN,OAAO,EAAE,CAAC",
+"sources": ["style.sass"],
+"names": [],
+"file": "style.css"
+}
\ No newline at end of file
diff --git a/Fluidbook-presentation-btn/p35/style.sass b/Fluidbook-presentation-btn/p35/style.sass
new file mode 100644 (file)
index 0000000..0df5732
--- /dev/null
@@ -0,0 +1,60 @@
+*
+  margin: 0
+  padding: 0
+$gradient: linear-gradient(90deg, rgba(65,166,201,1) 0%, rgba(99,194,183,1) 100%)
+
+#canvas
+  display: none
+  position: absolute
+@font-face
+  font-family: font
+  src: url("font.woff")
+.container
+  width: 146px
+  height: 43px
+.btn
+  width: 146px
+  height: 43px
+  position: absolute
+  border: 0
+  background-image: $gradient
+  text-transform: uppercase
+  color: white
+  font-size: 11px
+  transition:  all 300ms ease-out
+  -webkit-transition:  all 300ms ease-out
+  cursor: pointer
+  font-family: font
+  font-weight: 600
+  &::before
+    position: absolute
+    content: ""
+    top: 0
+    right: 0
+    bottom: 0
+    left: 0
+    background-image: linear-gradient(to bottom, #ffffff,#ffffff )
+    z-index: -1
+    -webkit-transition: all 300ms ease-out
+    opacity: 0
+  &::after
+    position: absolute
+    content: ""
+    top: 0
+    right: 0
+    bottom: 0
+    left: 0
+    border: 2px solid
+    border-image: linear-gradient(to left, #41A6C9 0%, #63C2B7 100%)
+    border-image-slice: 1
+    -webkit-transition: all 300ms ease-out
+    z-index: 3
+    opacity: 0
+  &:hover
+    color: #63C2B7
+    -webkit-transition: all 300ms ease-out
+    z-index: 2
+    &::before
+      opacity: 1
+    &::after
+      opacity: 1