diff options
1 files changed, 26 insertions, 19 deletions
| -rw-r--r-- | docs/experimentals.html | 45 |
diff --git a/docs/experimentals.html b/docs/experimentals.html index 8821f15..5a5cdec 100644 --- a/docs/experimentals.html +++ b/docs/experimentals.html @@ -9,8 +9,8 @@ <title>Experimentals - Spectre.css</title> <link rel="stylesheet" href="css/spectre.css" /> <link rel="stylesheet" href="css/spectre-exp.css" /> + <link rel="stylesheet" href="css/spectre-icons.css" /> <link rel="stylesheet" href="css/docs.css" /> - <link rel="stylesheet" href="font/style.css" /> </head> <body> <section class="section section-header bg-gray"> @@ -92,11 +92,11 @@ <div class="calendar"> <div class="calendar-nav navbar"> <button class="btn btn-action btn-link btn-lg"> - <i class="icon icon-keyboard_arrow_left"></i> + <i class="icon icon-arrow-left"></i> </button> <div class="navbar-primary">March 2017</div> <button class="btn btn-action btn-link btn-lg"> - <i class="icon icon-keyboard_arrow_right"></i> + <i class="icon icon-arrow-right"></i> </button> </div> <div class="calendar-container"> @@ -157,11 +157,11 @@ <div class="calendar calendar-lg"> <div class="calendar-nav navbar"> <button class="btn btn-action btn-link btn-lg"> - <i class="icon icon-keyboard_arrow_left"></i> + <i class="icon icon-arrow-left"></i> </button> <div class="navbar-primary">March 2017</div> <button class="btn btn-action btn-link btn-lg"> - <i class="icon icon-keyboard_arrow_right"></i> + <i class="icon icon-arrow-right"></i> </button> </div> <div class="calendar-container"> @@ -186,7 +186,7 @@ <div class="calendar-date current-month"><button class="date-item">1</button></div> <div class="calendar-date current-month"><button class="date-item">2</button></div> <div class="calendar-date current-month"><button class="date-item">3</button></div> - <div class="calendar-date current-month"><button class="date-item date-today">4</button></div> + <div class="calendar-date current-month tooltip" data-tooltip="Today"><button class="date-item date-today">4</button></div> <div class="calendar-date current-month"><button class="date-item" disabled>5</button></div> <div class="calendar-date current-month"><button class="date-item">6</button></div> <div class="calendar-date current-month"><button class="date-item">7</button></div> @@ -260,40 +260,40 @@ <div class="carousel-container"> <figure class="carousel-item"> <label class="item-prev btn btn-action btn-lg" for="slide-4"> - <i class="icon icon-keyboard_arrow_left"></i> + <i class="icon icon-arrow-left"></i> </label> <label class="item-next btn btn-action btn-lg" for="slide-2"> - <i class="icon icon-keyboard_arrow_right"></i> + <i class="icon icon-arrow-right"></i> </label> <img src="img/osx-yosemite.jpg" class="img-responsive rounded" alt="macOS Yosemite Wallpaper" /> </figure> <figure class="carousel-item"> <label class="item-prev btn btn-action btn-lg" for="slide-1"> - <i class="icon icon-keyboard_arrow_left"></i> + <i class="icon icon-arrow-left"></i> </label> <label class="item-next btn btn-action btn-lg" for="slide-3"> - <i class="icon icon-keyboard_arrow_right"></i> + <i class="icon icon-arrow-right"></i> </label> <img src="img/osx-yosemite-2.jpg" class="img-responsive rounded" alt="macOS Yosemite Wallpaper" /> </figure> <figure class="carousel-item"> <label class="item-prev btn btn-action btn-lg" for="slide-2"> - <i class="icon icon-keyboard_arrow_left"></i> + <i class="icon icon-arrow-left"></i> </label> <label class="item-next btn btn-action btn-lg" for="slide-4"> - <i class="icon icon-keyboard_arrow_right"></i> + <i class="icon icon-arrow-right"></i> </label> <img src="img/osx-el-capitan.jpg" class="img-responsive rounded" alt="macOS Yosemite Wallpaper" /> </figure> <figure class="carousel-item"> <label class="item-prev btn btn-action btn-lg" for="slide-3"> - <i class="icon icon-keyboard_arrow_left"></i> + <i class="icon icon-arrow-left"></i> </label> <label class="item-next btn btn-action btn-lg" for="slide-1"> - <i class="icon icon-keyboard_arrow_right"></i> + <i class="icon icon-arrow-right"></i> </label> <img src="img/osx-el-capitan-2.jpg" class="img-responsive rounded" alt="macOS Yosemite Wallpaper" /> </figure> @@ -358,14 +358,16 @@ <div class="parallax-bottom-left"></div> <div class="parallax-bottom-right"></div> <div class="parallax-content"> - <img src="img/osx-yosemite-2.jpg" class="img-responsive rounded" alt="macOS Yosemite Wallpaper" /> + <div class="parallax-front"> + <h2>tvOS parallax demo</h2> + </div> + <div class="parallax-back"> + <img src="img/osx-yosemite-2.jpg" class="img-responsive rounded" alt="macOS Yosemite Wallpaper" /> + </div> </div> </div> </div> </div> - <section class="notes"> - <p></p> - </section> <!-- parallax example --> <pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"parallax"</span>> @@ -374,7 +376,12 @@ <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"parallax-bottom-left"</span>><<span class="tag">/div</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"parallax-bottom-right"</span>><<span class="tag">/div</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"parallax-content"</span>> - <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/osx-el-capitan.jpg"</span> <span class="atn">class</span>=<span class="atv">"img-responsive rounded"</span> <span class="atn">alt</span>=<span class="atv">"macOS El Capitan Wallpaper"</span> /> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"parallax-front"</span>> + <<span class="tag">h2</span>>tvOS parallax demo<<span class="tag">/h2</span>> + <<span class="tag">/div</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"parallax-back"</span>> + <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/osx-el-capitan.jpg"</span> <span class="atn">class</span>=<span class="atv">"img-responsive rounded"</span> <span class="atn">alt</span>=<span class="atv">"macOS El Capitan Wallpaper"</span> /> + <<span class="tag">/div</span>> <<span class="tag">/div</span>> <<span class="tag">/div</span>> </code></pre> |