semantic-ui-canjs/demo/semantic-popup.css

CanJS wrapper around SemanticUI Modules

/*!
 * # Semantic UI - Popup
 * http://github.com/semantic-org/semantic-ui/
 *
 *
 * Copyright 2015 Contributors
 * Released under the MIT license
 * http://opensource.org/licenses/MIT
 *
 */.ui.popup{display:none;position:absolute;top:0;right:0;min-width:min-content;z-index:1900;border:1px solid #D4D4D5;line-height:1.4285em;max-width:250px;background:#FFF;padding:.833em 1em;font-weight:400;font-style:normal;color:rgba(0,0,0,.87);border-radius:.28571429rem;box-shadow:0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.08)}.ui.popup>.header{padding:0;font-family:Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;font-size:1.125em;line-height:1.2;font-weight:700}.ui.popup>.header+.content{padding-top:.5em}.ui.popup:before{position:absolute;content:'';width:.75em;height:.75em;background:#FFF;transform:rotate(45deg);z-index:2;box-shadow:1px 1px 0 0 #bababc}.ui.popup{margin:0}.ui.top.popup{margin:0 0 .75em}.ui.top.left.popup{transform-origin:left bottom}.ui.top.center.popup{transform-origin:center bottom}.ui.top.right.popup{transform-origin:right bottom}.ui.left.center.popup{margin:0 .75em 0 0;transform-origin:right 50%}.ui.right.center.popup{margin:0 0 0 .75em;transform-origin:left 50%}.ui.bottom.popup{margin:.75em 0 0}.ui.bottom.left.popup{transform-origin:left top}.ui.bottom.center.popup{transform-origin:center top}.ui.bottom.right.popup{transform-origin:right top}.ui.bottom.center.popup:before{margin-left:-.325em;top:-.325em;left:50%;right:auto;bottom:auto;box-shadow:-1px -1px 0 0 #bababc}.ui.bottom.left.popup{margin-left:0}.ui.bottom.left.popup:before{top:-.325em;left:1em;right:auto;bottom:auto;margin-left:0;box-shadow:-1px -1px 0 0 #bababc}.ui.bottom.right.popup{margin-right:0}.ui.bottom.right.popup:before{top:-.325em;right:1em;bottom:auto;left:auto;margin-left:0;box-shadow:-1px -1px 0 0 #bababc}.ui.top.center.popup:before{top:auto;right:auto;bottom:-.325em;left:50%;margin-left:-.325em}.ui.top.left.popup{margin-left:0}.ui.top.left.popup:before{bottom:-.325em;left:1em;top:auto;right:auto;margin-left:0}.ui.top.right.popup{margin-right:0}.ui.top.right.popup:before{bottom:-.325em;right:1em;top:auto;left:auto;margin-left:0}.ui.left.center.popup:before{top:50%;right:-.325em;bottom:auto;left:auto;margin-top:-.325em;box-shadow:1px -1px 0 0 #bababc}.ui.right.center.popup:before{top:50%;left:-.325em;bottom:auto;right:auto;margin-top:-.325em;box-shadow:-1px 1px 0 0 #bababc}.ui.bottom.popup:before{background:#FFF}.ui.left.center.popup:before,.ui.right.center.popup:before{background:#FFF}.ui.top.popup:before{background:#FFF}.ui.inverted.bottom.popup:before{background:#1B1C1D}.ui.inverted.left.center.popup:before,.ui.inverted.right.center.popup:before{background:#1B1C1D}.ui.inverted.top.popup:before{background:#1B1C1D}.ui.popup>.ui.grid:not(.padded){width:calc(100% + 1.75rem);margin:-.7rem -.875rem}.ui.loading.popup{display:block;visibility:hidden;z-index:-1}.ui.animating.popup,.ui.visible.popup{display:block}.ui.visible.popup{transform:translateZ(0);backface-visibility:hidden}.ui.basic.popup:before{display:none}.ui.wide.popup{max-width:350px}.ui[class*="very wide"].popup{max-width:550px}@media only screen and (max-width:767px){.ui.wide.popup,.ui[class*="very wide"].popup{max-width:250px}}.ui.fluid.popup{width:100%;max-width:none}.ui.inverted.popup{background:#1B1C1D;color:#FFF;border:none;box-shadow:none}.ui.inverted.popup .header{background-color:none;color:#FFF}.ui.inverted.popup:before{background-color:#1B1C1D;box-shadow:none!important}.ui.flowing.popup{max-width:none}.ui.mini.popup{font-size:.71428571rem}.ui.tiny.popup{font-size:.85714286rem}.ui.small.popup{font-size:.92857143rem}.ui.popup{font-size:1rem}.ui.large.popup{font-size:1.14285714rem}.ui.huge.popup{font-size:1.42857143rem}/*!
 * # Semantic UI - Transition
 * http://github.com/semantic-org/semantic-ui/
 *
 *
 * Copyright 2015 Contributors
 * Released under the MIT license
 * http://opensource.org/licenses/MIT
 *
 */.transition{animation-iteration-count:1;animation-duration:.3s;animation-timing-function:ease;animation-fill-mode:both}.animating.transition{backface-visibility:hidden;visibility:visible!important}.loading.transition{position:absolute;top:-99999px;left:-99999px}.hidden.transition{display:none;visibility:hidden}.visible.transition{display:block!important;visibility:visible!important}.disabled.transition{animation-play-state:paused}.looping.transition{animation-iteration-count:infinite}.transition.browse{animation-duration:.5s}.transition.browse.in{animation-name:browseIn}.transition.browse.left.out,.transition.browse.out{animation-name:browseOutLeft}.transition.browse.right.out{animation-name:browseOutRight}@keyframes browseIn{0%{transform:scale(.8) translateZ(0);z-index:-1}10%{transform:scale(.8) translateZ(0);z-index:-1;opacity:.7}80%{transform:scale(1.05) translateZ(0);opacity:1;z-index:999}100%{transform:scale(1) translateZ(0);z-index:999}}@keyframes browseOutLeft{0%{z-index:999;transform:translateX(0) rotateY(0) rotateX(0)}50%{z-index:-1;transform:translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px)}80%{opacity:1}100%{z-index:-1;transform:translateX(0) rotateY(0) rotateX(0) translateZ(-10px);opacity:0}}@keyframes browseOutRight{0%{z-index:999;transform:translateX(0) rotateY(0) rotateX(0)}50%{z-index:1;transform:translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px)}80%{opacity:1}100%{z-index:1;transform:translateX(0) rotateY(0) rotateX(0) translateZ(-10px);opacity:0}}.drop.transition{transform-origin:top center;animation-duration:.4s;animation-timing-function:cubic-bezier(.34,1.61,.7,1)}.drop.transition.in{animation-name:dropIn}.drop.transition.out{animation-name:dropOut}@keyframes dropIn{0%{opacity:0;transform:scale(0)}100%{opacity:1;transform:scale(1)}}@keyframes dropOut{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(0)}}.transition.fade.in{animation-name:fadeIn}.transition[class*="fade up"].in{animation-name:fadeInUp}.transition[class*="fade down"].in{animation-name:fadeInDown}.transition[class*="fade left"].in{animation-name:fadeInLeft}.transition[class*="fade right"].in{animation-name:fadeInRight}.transition.fade.out{animation-name:fadeOut}.transition[class*="fade up"].out{animation-name:fadeOutUp}.transition[class*="fade down"].out{animation-name:fadeOutDown}.transition[class*="fade left"].out{animation-name:fadeOutLeft}.transition[class*="fade right"].out{animation-name:fadeOutRight}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(10%)}100%{opacity:1;transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-10%)}100%{opacity:1;transform:translateY(0)}}@keyframes fadeInLeft{0%{opacity:0;transform:translateX(10%)}100%{opacity:1;transform:translateX(0)}}@keyframes fadeInRight{0%{opacity:0;transform:translateX(-10%)}100%{opacity:1;transform:translateX(0)}}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}@keyframes fadeOutUp{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(5%)}}@keyframes fadeOutDown{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-5%)}}@keyframes fadeOutLeft{0%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(5%)}}@keyframes fadeOutRight{0%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(-5%)}}.flip.transition.in,.flip.transition.out{animation-duration:.6s}.horizontal.flip.transition.in{animation-name:horizontalFlipIn}.horizontal.flip.transition.out{animation-name:horizontalFlipOut}.vertical.flip.transition.in{animation-name:verticalFlipIn}.vertical.flip.transition.out{animation-name:verticalFlipOut}@keyframes horizontalFlipIn{0%{transform:perspective(2000px) rotateY(-90deg);opacity:0}100%{transform:perspective(2000px) rotateY(0);opacity:1}}@keyframes verticalFlipIn{0%{transform:perspective(2000px) rotateX(-90deg);opacity:0}100%{transform:perspective(2000px) rotateX(0);opacity:1}}@keyframes horizontalFlipOut{0%{transform:perspective(2000px) rotateY(0);opacity:1}100%{transform:perspective(2000px) rotateY(90deg);opacity:0}}@keyframes verticalFlipOut{0%{transform:perspective(2000px) rotateX(0);opacity:1}100%{transform:perspective(2000px) rotateX(-90deg);opacity:0}}.scale.transition.in{animation-name:scaleIn}.scale.transition.out{animation-name:scaleOut}@keyframes scaleIn{0%{opacity:0;transform:scale(.8)}100%{opacity:1;transform:scale(1)}}@keyframes scaleOut{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.9)}}.transition.fly{animation-duration:.6s;transition-timing-function:cubic-bezier(.215,.61,.355,1)}.transition.fly.in{animation-name:flyIn}.transition[class*="fly up"].in{animation-name:flyInUp}.transition[class*="fly down"].in{animation-name:flyInDown}.transition[class*="fly left"].in{animation-name:flyInLeft}.transition[class*="fly right"].in{animation-name:flyInRight}.transition.fly.out{animation-name:flyOut}.transition[class*="fly up"].out{animation-name:flyOutUp}.transition[class*="fly down"].out{animation-name:flyOutDown}.transition[class*="fly left"].out{animation-name:flyOutLeft}.transition[class*="fly right"].out{animation-name:flyOutRight}@keyframes flyIn{0%{opacity:0;transform:scale3d(.3,.3,.3)}20%{transform:scale3d(1.1,1.1,1.1)}40%{transform:scale3d(.9,.9,.9)}60%{opacity:1;transform:scale3d(1.03,1.03,1.03)}80%{transform:scale3d(.97,.97,.97)}100%{opacity:1;transform:scale3d(1,1,1)}}@keyframes flyInUp{0%{opacity:0;transform:translate3d(0,1500px,0)}60%{opacity:1;transform:translate3d(0,-20px,0)}75%{transform:translate3d(0,10px,0)}90%{transform:translate3d(0,-5px,0)}100%{transform:translate3d(0,0,0)}}@keyframes flyInDown{0%{opacity:0;transform:translate3d(0,-1500px,0)}60%{opacity:1;transform:translate3d(0,25px,0)}75%{transform:translate3d(0,-10px,0)}90%{transform:translate3d(0,5px,0)}100%{transform:none}}@keyframes flyInLeft{0%{opacity:0;transform:translate3d(1500px,0,0)}60%{opacity:1;transform:translate3d(-25px,0,0)}75%{transform:translate3d(10px,0,0)}90%{transform:translate3d(-5px,0,0)}100%{transform:none}}@keyframes flyInRight{0%{opacity:0;transform:translate3d(-1500px,0,0)}60%{opacity:1;transform:translate3d(25px,0,0)}75%{transform:translate3d(-10px,0,0)}90%{transform:translate3d(5px,0,0)}100%{transform:none}}@keyframes flyOut{20%{transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;transform:scale3d(1.1,1.1,1.1)}100%{opacity:0;transform:scale3d(.3,.3,.3)}}@keyframes flyOutUp{20%{transform:translate3d(0,10px,0)}40%,45%{opacity:1;transform:translate3d(0,-20px,0)}100%{opacity:0;transform:translate3d(0,2000px,0)}}@keyframes flyOutDown{20%{transform:translate3d(0,-10px,0)}40%,45%{opacity:1;transform:translate3d(0,20px,0)}100%{opacity:0;transform:translate3d(0,-2000px,0)}}@keyframes flyOutRight{20%{opacity:1;transform:translate3d(20px,0,0)}100%{opacity:0;transform:translate3d(-2000px,0,0)}}@keyframes flyOutLeft{20%{opacity:1;transform:translate3d(-20px,0,0)}100%{opacity:0;transform:translate3d(2000px,0,0)}}.transition.slide.in,.transition[class*="slide down"].in{animation-name:slideInY;transform-origin:top center}.transition[class*="slide up"].in{animation-name:slideInY;transform-origin:bottom center}.transition[class*="slide left"].in{animation-name:slideInX;transform-origin:center right}.transition[class*="slide right"].in{animation-name:slideInX;transform-origin:center left}.transition.slide.out,.transition[class*="slide down"].out{animation-name:slideOutY;transform-origin:top center}.transition[class*="slide up"].out{animation-name:slideOutY;transform-origin:bottom center}.transition[class*="slide left"].out{animation-name:slideOutX;transform-origin:center right}.transition[class*="slide right"].out{animation-name:slideOutX;transform-origin:center left}@keyframes slideInY{0%{opacity:0;transform:scaleY(0)}100%{opacity:1;transform:scaleY(1)}}@keyframes slideInX{0%{opacity:0;transform:scaleX(0)}100%{opacity:1;transform:scaleX(1)}}@keyframes slideOutY{0%{opacity:1;transform:scaleY(1)}100%{opacity:0;transform:scaleY(0)}}@keyframes slideOutX{0%{opacity:1;transform:scaleX(1)}100%{opacity:0;transform:scaleX(0)}}.transition.swing{animation-duration:.8s}.transition[class*="swing down"].in{animation-name:swingInX;transform-origin:top center}.transition[class*="swing up"].in{animation-name:swingInX;transform-origin:bottom center}.transition[class*="swing left"].in{animation-name:swingInY;transform-origin:center right}.transition[class*="swing right"].in{animation-name:swingInY;transform-origin:center left}.transition.swing.out,.transition[class*="swing down"].out{animation-name:swingOutX;transform-origin:top center}.transition[class*="swing up"].out{animation-name:swingOutX;transform-origin:bottom center}.transition[class*="swing left"].out{animation-name:swingOutY;transform-origin:center right}.transition[class*="swing right"].out{animation-name:swingOutY;transform-origin:center left}@keyframes swingInX{0%{transform:perspective(1000px) rotateX(90deg);opacity:0}40%{transform:perspective(1000px) rotateX(-30deg);opacity:1}60%{transform:perspective(1000px) rotateX(15deg)}80%{transform:perspective(1000px) rotateX(-7.5deg)}100%{transform:perspective(1000px) rotateX(0)}}@keyframes swingInY{0%{transform:perspective(1000px) rotateY(-90deg);opacity:0}40%{transform:perspective(1000px) rotateY(30deg);opacity:1}60%{transform:perspective(1000px) rotateY(-17.5deg)}80%{transform:perspective(1000px) rotateY(7.5deg)}100%{transform:perspective(1000px) rotateY(0)}}@keyframes swingOutX{0%{transform:perspective(1000px) rotateX(0)}40%{transform:perspective(1000px) rotateX(-7.5deg)}60%{transform:perspective(1000px) rotateX(17.5deg)}80%{transform:perspective(1000px) rotateX(-30deg);opacity:1}100%{transform:perspective(1000px) rotateX(90deg);opacity:0}}@keyframes swingOutY{0%{transform:perspective(1000px) rotateY(0)}40%{transform:perspective(1000px) rotateY(7.5deg)}60%{transform:perspective(1000px) rotateY(-10deg)}80%{transform:perspective(1000px) rotateY(30deg);opacity:1}100%{transform:perspective(1000px) rotateY(-90deg);opacity:0}}.flash.transition{animation-duration:750ms;animation-name:flash}.shake.transition{animation-duration:750ms;animation-name:shake}.bounce.transition{animation-duration:750ms;animation-name:bounce}.tada.transition{animation-duration:750ms;animation-name:tada}.pulse.transition{animation-duration:.5s;animation-name:pulse}.jiggle.transition{animation-duration:750ms;animation-name:jiggle}@keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}@keyframes shake{0%,100%{transform:translateX(0)}10%,30%,50%,70%,90%{transform:translateX(-10px)}20%,40%,60%,80%{transform:translateX(10px)}}@keyframes bounce{0%,100%,20%,50%,80%{transform:translateY(0)}40%{transform:translateY(-30px)}60%{transform:translateY(-15px)}}@keyframes tada{0%{transform:scale(1)}10%,20%{transform:scale(.9) rotate(-3deg)}30%,50%,70%,90%{transform:scale(1.1) rotate(3deg)}40%,60%,80%{transform:scale(1.1) rotate(-3deg)}100%{transform:scale(1) rotate(0)}}@keyframes pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(.9);opacity:.7}100%{transform:scale(1);opacity:1}}@keyframes jiggle{0%{transform:scale3d(1,1,1)}30%{transform:scale3d(1.25,.75,1)}40%{transform:scale3d(.75,1.25,1)}50%{transform:scale3d(1.15,.85,1)}65%{transform:scale3d(.95,1.05,1)}75%{transform:scale3d(1.05,.95,1)}100%{transform:scale3d(1,1,1)}}