src/scss/toolkit/modules/showcase.scss in titon-toolkit-0.9.4 vs src/scss/toolkit/modules/showcase.scss in titon-toolkit-0.10.0
- old
+ new
@@ -1,166 +1,166 @@
/**
- * @copyright Copyright 2010-2013, The Titon Project
- * @license http://opensource.org/licenses/bsd-license.php
- * @link http://titon.io
+ * @copyright 2010-2013, The Titon Project
+ * @license http://opensource.org/licenses/bsd-license.php
+ * @link http://titon.io
*/
@import "../common";
/**
* Should be used in conjunction with the JavaScript Titon.Showcase module.
*
- * <div class="showcase">
- * <div class="showcase-inner">
- * <ul class="showcase-items"></u>
- * <ol class="showcase-tabs"></ol>
- * <a href="javascript:;" class="showcase-prev showcase-event-prev"><span class="icon-chevron-sign-left"></span></a>
- * <a href="javascript:;" class="showcase-next showcase-event-next"><span class="icon-chevron-sign-right"></span></a>
- * <button type="button" class="close showcase-event-close">
- * <span class="x">×</span>
- * </button>
- * </div>
- * </div>
+ * <div class="showcase">
+ * <div class="showcase-inner">
+ * <ul class="showcase-items"></u>
+ * <ol class="showcase-tabs"></ol>
+ * <a href="javascript:;" class="showcase-prev showcase-event-prev"><span class="icon-chevron-sign-left"></span></a>
+ * <a href="javascript:;" class="showcase-next showcase-event-next"><span class="icon-chevron-sign-right"></span></a>
+ * <button type="button" class="close showcase-event-close">
+ * <span class="x">×</span>
+ * </button>
+ * </div>
+ * </div>
*/
.showcase {
- position: fixed;
- top: 50%;
- left: 50%;
- width: auto;
- height: auto;
- margin: 0;
- padding: 0;
- z-index: 610; // higher than blackout
- visibility: hidden;
- backface-visibility: hidden;
- @include transform(translateX(-50%) translateY(-50%));
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ width: auto;
+ height: auto;
+ margin: 0;
+ padding: 0;
+ z-index: 610; // higher than blackout
+ visibility: hidden;
+ backface-visibility: hidden;
+ @include transform(translateX(-50%) translateY(-50%));
- .close {
- position: absolute;
- top: -1px;
- right: -35px;
- }
+ .close {
+ position: absolute;
+ top: -1px;
+ right: -35px;
+ }
- &.is-loading,
- &.is-single {
- .showcase-prev,
- .showcase-next,
- .showcase-tabs {
- display: none !important;
- }
+ &.is-loading,
+ &.is-single {
+ .showcase-prev,
+ .showcase-next,
+ .showcase-tabs {
+ display: none !important;
+ }
- .showcase-inner {
- background: $gray url("../../../img/loader.gif") 50% 50% no-repeat;
- }
- }
+ .showcase-inner {
+ background: $gray url("../../../img/loader.gif") 50% 50% no-repeat;
+ }
+ }
}
.showcase-inner {
- position: relative;
- padding: $padding;
- background: $gray;
- border: 1px solid $gray-dark;
+ position: relative;
+ padding: $padding;
+ background: $gray;
+ border: 1px solid $gray-dark;
}
.showcase-items {
- list-style: none;
- padding: 0;
- margin: 0;
- width: 100px;
- height: 100px;
- max-width: 1024px;
- position: relative;
- overflow: hidden;
- @include transition(width .3s, height .3s);
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ width: 100px;
+ height: 100px;
+ max-width: 1024px;
+ position: relative;
+ overflow: hidden;
+ @include transition(width .3s, height .3s);
- > li {
- position: absolute;
- top: 0;
- left: 0;
- opacity: 0;
- @include transition(opacity .3s);
+ > li {
+ position: absolute;
+ top: 0;
+ left: 0;
+ opacity: 0;
+ @include transition(opacity .3s);
- > img {
- max-width: 100%;
- width: 100%;
- height: auto;
- display: block;
- }
+ > img {
+ max-width: 100%;
+ width: 100%;
+ height: auto;
+ display: block;
+ }
- &.show {
- .showcase-caption {
- display: block;
- }
- }
- }
+ &.show {
+ .showcase-caption {
+ display: block;
+ }
+ }
+ }
}
.showcase-caption {
- position: absolute;
- bottom: 0;
- left: 0;
- width: 100%;
- padding: $padding;
- color: #fff;
- background: black(.70);
- display: none;
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ padding: $padding;
+ color: #fff;
+ background: black(.70);
+ display: none;
}
.showcase-prev,
.showcase-next {
- display: block;
- position: absolute;
- padding: $padding;
- width: auto;
- height: auto;
- z-index: 5;
- font-size: 28px;
- color: #fff;
- opacity: .65;
- top: 50%;
- @include transform(translateY(-50%)); // move up 50% of their height
+ display: block;
+ position: absolute;
+ padding: $padding;
+ width: auto;
+ height: auto;
+ z-index: 5;
+ font-size: 28px;
+ color: #fff;
+ opacity: .65;
+ top: 50%;
+ @include transform(translateY(-50%)); // move up 50% of their height
- &:hover {
- color: #fff;
- opacity: 1;
- }
+ &:hover {
+ color: #fff;
+ opacity: 1;
+ }
- &:focus {
- outline: none;
- }
+ &:focus {
+ outline: none;
+ }
}
.showcase-prev { left: $padding; }
.showcase-next { right: $padding; }
.showcase-tabs {
- list-style: none;
- line-height: 100%;
- margin: 0;
- padding: $padding;
- position: absolute;
- top: $padding;
- left: 50%;
- z-index: 5;
- @include transform(translateX(-50%)); // move left 50% of their width
+ list-style: none;
+ line-height: 100%;
+ margin: 0;
+ padding: $padding;
+ position: absolute;
+ top: $padding;
+ left: 50%;
+ z-index: 5;
+ @include transform(translateX(-50%)); // move left 50% of their width
- li {
- display: inline-block;
- margin: 0 3px;
- }
+ li {
+ display: inline-block;
+ margin: 0 3px;
+ }
- a {
- display: inline-block;
- border: 2px solid #fff;
- height: 10px;
- width: 10px;
- border-radius: 50%;
- opacity: .65;
+ a {
+ display: inline-block;
+ border: 2px solid #fff;
+ height: 10px;
+ width: 10px;
+ border-radius: 50%;
+ opacity: .65;
- &:hover { opacity: 1; }
- &.is-active { background: #fff; }
- }
+ &:hover { opacity: 1; }
+ &.is-active { background: #fff; }
+ }
- // Hide if no tabs
- &:empty { display: none; }
+ // Hide if no tabs
+ &:empty { display: none; }
}
\ No newline at end of file