src/scss/toolkit/modules/modal.scss in titon-toolkit-0.9.4 vs src/scss/toolkit/modules/modal.scss in titon-toolkit-0.10.0
- old
+ new
@@ -1,243 +1,243 @@
/**
- * @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.Modal module.
*
- * <div class="modal">
- * <div class="modal-outer">
- * <div class="modal-inner">
- * Custom content here
- * </div>
- * <button type="button" class="modal-close"></button>
- * </div>
- * </div>
+ * <div class="modal">
+ * <div class="modal-outer">
+ * <div class="modal-inner">
+ * Custom content here
+ * </div>
+ * <button type="button" class="modal-close"></button>
+ * </div>
+ * </div>
*/
.modal {
- position: fixed;
- top: 50%;
- left: 50%;
- width: 50%;
- height: auto;
- margin: 0;
- padding: 0;
- z-index: 610; // higher than blackout
- max-width: 700px;
- min-width: 350px;
- visibility: hidden;
- backface-visibility: hidden;
- @include transform(translateX(-50%) translateY(-50%));
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ width: 50%;
+ height: auto;
+ margin: 0;
+ padding: 0;
+ z-index: 610; // higher than blackout
+ max-width: 700px;
+ min-width: 350px;
+ 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 {
- .close { display: none; }
+ &.is-loading {
+ .close { display: none; }
- .modal-outer {
- background: $gray url("../../../img/loader.gif") 50% 50% no-repeat;
- }
- }
+ .modal-outer {
+ background: $gray url("../../../img/loader.gif") 50% 50% no-repeat;
+ }
+ }
}
// Used for animations, should also contain the styles
.modal-outer {
- position: relative;
- margin: 0 auto;
- background: $gray;
- border: 1px solid $gray-dark;
+ position: relative;
+ margin: 0 auto;
+ background: $gray;
+ border: 1px solid $gray-dark;
}
// Reset draggable cursor
.modal.is-draggable {
- .modal-inner { cursor: default; }
- .modal-head { cursor: move; }
+ .modal-inner { cursor: default; }
+ .modal-head { cursor: move; }
}
// Apply block padding
.modal-head,
.modal-body,
.modal-foot,
.modal-loading,
.modal-error {
- padding: $padding;
+ padding: $padding;
}
// Remove margins from text elements
.modal-body {
- @include content-spacing;
+ @include content-spacing;
}
//-------------------- Animations --------------------//
.modal {
- &.from-above,
- &.from-below,
- &.slide-in-top,
- &.slide-in-bottom,
- &.slide-in-left,
- &.slide-in-right,
- &.flip,
- &.flip-vert {
- .modal-outer {
- opacity: 0;
- @include transition(all 0.3s);
- }
+ &.from-above,
+ &.from-below,
+ &.slide-in-top,
+ &.slide-in-bottom,
+ &.slide-in-left,
+ &.slide-in-right,
+ &.flip,
+ &.flip-vert {
+ .modal-outer {
+ opacity: 0;
+ @include transition(all 0.3s);
+ }
- &.show .modal-outer {
- opacity: 1;
- }
- }
+ &.show .modal-outer {
+ opacity: 1;
+ }
+ }
- &.fade {
- opacity: 0;
- @include transition(opacity 0.3s);
- }
+ &.fade {
+ opacity: 0;
+ @include transition(opacity 0.3s);
+ }
- &.from-above {
- .modal-outer {
- @include transform(scale(1.3));
- }
+ &.from-above {
+ .modal-outer {
+ @include transform(scale(1.3));
+ }
- &.show .modal-outer {
- @include transform(scale(1));
- }
- }
+ &.show .modal-outer {
+ @include transform(scale(1));
+ }
+ }
- &.from-below {
- .modal-outer {
- @include transform(scale(0.7));
- }
+ &.from-below {
+ .modal-outer {
+ @include transform(scale(0.7));
+ }
- &.show .modal-outer {
- @include transform(scale(1));
- }
- }
+ &.show .modal-outer {
+ @include transform(scale(1));
+ }
+ }
- &.slide-in-top {
- .modal-outer {
- @include transform(translateY(-50%));
- }
+ &.slide-in-top {
+ .modal-outer {
+ @include transform(translateY(-50%));
+ }
- &.show .modal-outer {
- @include transform(translateY(0));
- }
- }
+ &.show .modal-outer {
+ @include transform(translateY(0));
+ }
+ }
- &.slide-in-bottom {
- .modal-outer {
- @include transform(translateY(50%));
- }
+ &.slide-in-bottom {
+ .modal-outer {
+ @include transform(translateY(50%));
+ }
- &.show .modal-outer {
- @include transform(translateY(0));
- }
- }
+ &.show .modal-outer {
+ @include transform(translateY(0));
+ }
+ }
- &.slide-in-left {
- .modal-outer {
- @include transition(all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9));
- @include transform(translateX(-50%));
- }
+ &.slide-in-left {
+ .modal-outer {
+ @include transition(all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9));
+ @include transform(translateX(-50%));
+ }
- &.show .modal-outer {
- @include transform(translateX(0));
- }
- }
+ &.show .modal-outer {
+ @include transform(translateX(0));
+ }
+ }
- &.slide-in-right {
- .modal-outer {
- @include transition(all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9));
- @include transform(translateX(50%));
- }
+ &.slide-in-right {
+ .modal-outer {
+ @include transition(all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9));
+ @include transform(translateX(50%));
+ }
- &.show .modal-outer {
- @include transform(translateX(0));
- }
- }
+ &.show .modal-outer {
+ @include transform(translateX(0));
+ }
+ }
- &.sticky-top {
- top: -100%;
- opacity: 0;
- @include transition(all 0.3s);
- @include transform(translateX(-50%)); // reset to x
+ &.sticky-top {
+ top: -100%;
+ opacity: 0;
+ @include transition(all 0.3s);
+ @include transform(translateX(-50%)); // reset to x
- &.show {
- top: 0;
- opacity: 1;
- }
- }
+ &.show {
+ top: 0;
+ opacity: 1;
+ }
+ }
- &.sticky-bottom {
- top: auto;
- bottom: -100%;
- opacity: 0;
- @include transition(all 0.3s);
- @include transform(translateX(-50%)); // reset to x
+ &.sticky-bottom {
+ top: auto;
+ bottom: -100%;
+ opacity: 0;
+ @include transition(all 0.3s);
+ @include transform(translateX(-50%)); // reset to x
- &.show {
- bottom: 0;
- opacity: 1;
- }
- }
+ &.show {
+ bottom: 0;
+ opacity: 1;
+ }
+ }
- &.sticky-left {
- left: -100%;
- opacity: 0;
- @include transition(all 0.3s);
- @include transform(translate(0, -50%));
+ &.sticky-left {
+ left: -100%;
+ opacity: 0;
+ @include transition(all 0.3s);
+ @include transform(translate(0, -50%));
- &.show {
- left: 0;
- opacity: 1;
- }
- }
+ &.show {
+ left: 0;
+ opacity: 1;
+ }
+ }
- &.sticky-right {
- left: auto;
- right: -100%;
- opacity: 0;
- @include transition(all 0.3s);
- @include transform(translate(0, -50%));
+ &.sticky-right {
+ left: auto;
+ right: -100%;
+ opacity: 0;
+ @include transition(all 0.3s);
+ @include transform(translate(0, -50%));
- &.show {
- right: 0;
- opacity: 1;
- }
- }
+ &.show {
+ right: 0;
+ opacity: 1;
+ }
+ }
- &.flip {
- @include perspective(1300px);
+ &.flip {
+ @include perspective(1300px);
- .modal-outer {
- @include transform-style(preserve-3d);
- @include transform(rotateY(-70deg));
- }
+ .modal-outer {
+ @include transform-style(preserve-3d);
+ @include transform(rotateY(-70deg));
+ }
- &.show .modal-outer {
- @include transform(rotateY(0deg));
- }
- }
+ &.show .modal-outer {
+ @include transform(rotateY(0deg));
+ }
+ }
- &.flip-vert {
- @include perspective(1300px);
+ &.flip-vert {
+ @include perspective(1300px);
- .modal-outer {
- @include transform-style(preserve-3d);
- @include transform(rotateX(-70deg));
- }
+ .modal-outer {
+ @include transform-style(preserve-3d);
+ @include transform(rotateX(-70deg));
+ }
- &.show .modal-outer {
- @include transform(rotateX(0deg));
- }
- }
+ &.show .modal-outer {
+ @include transform(rotateX(0deg));
+ }
+ }
}
\ No newline at end of file