Fixes to transition on inline-block element transitions

server/documents/index.html.eco

@@ -22,7 +22,7 @@ type   : 'Semantic'
       <div class="ui large inverted right floated secondary menu">
         <div class="ui language top right pointing dropdown item" id="languages">
           <i class="world icon"></i>
-          <div class="text">English</div>
+          <div class="text">Language</div>
           <div class="menu">
             <div class="item" data-percent="100" data-value="en">English</div>
             <div class="item" data-percent="19" data-value="nl">Nederlands</div>
@@ -48,26 +48,14 @@ type   : 'Semantic'
   <div class="ui page grid">
     <div class="column">
       <div class="introduction">
-        <h1 class="ui inverted header">Semantic UI
+        <h1 class="ui inverted header">
+          <b>UI</b>
+          <span class="text">is the DNA of the web.</span>
         </h1>
-        <h2 class="ui inverted header">
-          <b>UI</b> is the vocabulary of the web.
-        </h2>
         <div class="ui hidden divider"></div>
-        <div class="ui huge inverted buttons">
-          <a class="ui basic pink inverted view-ui button"><i class="cube icon"></i>UI Library</a>
-          <a class="ui basic red inverted button" data-title="Coming Soon">
-            <i class="theme icon"></i>
-            Themes
-          </a>
-          <a class="ui basic green inverted button" data-title="Coming Soon">
-            <i class="cubes icon"></i>
-            Layouts
-          </a>
-        </div>
-        <div class="ui hidden divider"></div>
-        <a class="ui huge basic inverted teal button" href="build/semantic.zip">
-          <i class="download icon"></i> Customize &amp; Download
+        <a href="build/semantic.zip" class="ui huge basic inverted teal download button">
+          Download Now
+          <i class="right chevron icon"></i>
         </a>
       </div>
       <div class="inverted advertisement">
@@ -83,28 +71,31 @@ type   : 'Semantic'
     </div>
   </div>
 </div>
-<div class="stripe">
-  <div class="ui three column relaxed stackable page grid">
+<div class="feature stripe">
+  <div class="ui three column equal height center aligned divided relaxed stackable page grid">
     <div class="column">
       <h2 class="ui icon header">
-        <img class="ui icon image" src="/images/icons/Book-2.png">
-        50+ UI Definitions
+        <img class="ui icon image" src="/images/icons/Brush.png">
+        3000+ CSS Variables
       </h2>
-      <p>Everything you need to make a website on your own without being a UI designer.</p>
+      <p>The only dogma from this framework: everything arbitrary is mutable.</p>
+      <div class="ui disabled button">View Themes</div>
     </div>
     <div class="column">
       <h2 class="ui icon header">
-        <img class="ui icon image" src="/images/icons/Brush.png">
-        3000+ CSS Variables
+        <img class="ui icon image" src="/images/icons/Book-2.png">
+        50+ UI Definitions
       </h2>
-      <p>Everything arbitrary is changable. Three levels of theming inheritance.</p>
+      <p>Build your entire site with one UI stack. Extend using a common style.</p>
+      <div class="ui primary button">Browse UI</div>
     </div>
     <div class="column">
       <h2 class="ui icon header">
         <img class="ui icon image" src="/images/icons/Glasses.png">
-        2+ Years in the Making
+        2200+ Commits
       </h2>
-      <p>Semantic is a mature tool, used in multiple large scale production environments like <a href="http://www.newrepublic.com" target="_blank">The New Republic</a> magazine.</p>
+      <p>Developed over several years. Already used in multiple large scale production environments you <a href="http://www.quirky.com" target="_blank">may</a> have <a href="http://www.newrepublic.com" target="_blank">heard</a> of.</p>
+      <a href="https://github.com/Semantic-Org/Semantic-UI/issues" class="ui button">Visit GitHub</a>
     </div>
   </div>
 </div>
@@ -132,9 +123,7 @@ type   : 'Semantic'
           <div data-value="GitHub" class="item">GitHub</div>
         </div>
       </div>
-
       <div class="ui divider"></div>
-
       <div class="ui button">
         View
       </div>
@@ -156,51 +145,69 @@ type   : 'Semantic'
     </div>
   </div>
 </div>
-<div class="inverted stripe">
-  <div class="ui stackable two column very relaxed page grid">
+<div class="email stripe">
+  <div class="ui center aligned page grid">
     <div class="column">
-      <div class="code" data-type="html">
-        <div class="ui stackable two column very relaxed page grid">
-          <div class="column">
-            <!-- Recursion Omitted !-->
-          </div>
-          <div class="column">
-            <h1 class="ui inverted header">Code Intuitively</h1>
-            <p>Semantic uses concepts like nouns (types), adjectives (variations), and tense (states) to create UI definitions</p>
-          </div>
+      <h2 class="ui header">
+        Get Updates
+      </h2>
+      <p>
+        Semantic is growing fast. Want to see just how much? Sign up and we'll let you know</p>
+      <form method="post" action="http://www.nogo.com">
+        <div class="ui huge input" style="margin:0 auto">
+          <input type="text" placeholder="E-mail">
         </div>
-      </div>
+        <button type="submit" class="ui huge secondary submit button">
+          Sign-up
+        </button>
+      </form>
     </div>
+  </div>
+</div>
+<div class="inverted stripe">
+  <div class="ui stackable one column center aligned very relaxed page grid">
     <div class="column">
       <h1 class="ui inverted icon header">
         <i class="conversation icon"></i>
         Code Intuitively
       </h1>
-      <p>Semantic uses concepts like nouns (types), adjectives (variations), and tense (states) to create UI definitions</p>
+      <p>Semantic uses concepts similar to nouns, adjectives , and tense to create UI definitions. Making your code highly scannable.</p>
+      <div class="code" data-type="html">
+        <div class="ui stackable one column center aligned very relaxed page grid">
+          <div class="column">
+            <h1 class="ui inverted icon header">
+              <i class="conversation icon"></i>
+              Code Intuitively
+            </h1>
+            <p>
+              Semantic uses concepts like nouns (types), adjectives (variations), and tense (states) to create UI definitions
+            </p>
+            <!-- Recursion Omitted (Turtles all the way down) !-->
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </div>
 <div class="stripe">
-  <div class="ui stackable page grid">
+  <div class="ui stackable center aligned page grid">
     <div class="ten wide column">
-      <h1 class="ui header">
-        <img class="ui inline image" src="/images/icons/Spaceship.png">
+      <h1 class="ui icon header">
+        <img class="ui inline icon image" src="/images/icons/Spaceship.png">
         Liberate your Development
       </h1>
-      <p></p>
-      <div class="ui two column vertically padded grid">
+      <div class="ui two column center aligned vertically padded grid">
         <div class="column">
           <h3 class="ui header">Enterprise Ready</h3>
           <p>Build tools, performance logging, support for custom definitions, multiple-levels of theme inheritanceance—a developer's wet dream.</p>
+          <a class="ui large button">View Expert Guide</a>
         </div>
         <div class="column">
           <h3 class="ui header">Beginner Friendly</h3>
           <p>Don't feel comfortable tweaking everything? Download free community designed themes and use our customizer to build a package fit for your needs.</p>
+          <a class="ui large button">View Basic Guide</a>
         </div>
       </div>
     </div>
-    <div class="six wide column">
-
-    </div>
   </div>
 </div>

server/files/javascript/semantic.js

@@ -977,19 +977,21 @@ semantic.ready = function() {
     $themeDropdown
       .dropdown('setting', 'action', 'activate')
     ;
-    $(window)
-      .one('scroll', function() {
-        $('.masthead').addClass('zoomed');
-      })
-    ;
-    $('.masthead')
-      .visibility({
-        continuous: true,
-        onPassing: function(calculations) {
-          //$(this).css('opacity', 1 - calculations.percentagePassed);
-        }
-      })
-    ;
+    $('.masthead').addClass('zoomed');
+    setTimeout(function() {
+      $('.masthead h1 b')
+        .transition('fade in', 2500)
+      ;
+    }, 0);
+    setTimeout(function() {
+      $('.masthead h1 span')
+        .transition('fade in', 1000)
+      ;
+      $('.masthead .download')
+        .transition('fade in', 1500)
+      ;
+    }, 2000);
+
     $('.fixed.launch.button')
       .visibility({
         offset: 50,

server/files/stylesheets/semantic.css

@@ -439,18 +439,18 @@ body#example.hide {
   -o-animation-name: masthead;
   animation-name: masthead;
 
-  -ms-transition: transform 3s ease-in-out;
-  -webkit-transition: transform 3s ease-in-out;
-  -moz-transition: transform 3s ease-in-out;
-  transition: transform 3s ease-in-out;
+  -ms-transition: transform 5s ease-in-out;
+  -webkit-transition: transform 5s ease-in-out;
+  -moz-transition: transform 5s ease-in-out;
+  transition: transform 5s ease-in-out;
 
-  opacity: 0.12;
+  opacity: 0.15;
 
-  -webkit-animation-duration: 30s;
-  -moz-animation-duration: 30s;
-  -ms-animation-duration: 30s;
-  -o-animation-duration: 30s;
-  animation-duration: 30s;
+  -webkit-animation-duration: 15s;
+  -moz-animation-duration: 15s;
+  -ms-animation-duration: 15s;
+  -o-animation-duration: 15s;
+  animation-duration: 15s;
 
   -webkit-animation-fill-mode: both;
   -moz-animation-fill-mode: both;
@@ -467,13 +467,14 @@ body#example.hide {
   -o-animation-iteration-count: infinite;
   animation-iteration-count: infinite;
 
-  -webkit-transform: rotateX(0deg) rotateZ(0deg) rotateY(0deg) translateZ(0px);
-  transform: rotateX(0deg) rotateZ(0deg) rotateY(0deg) translateZ(0px);
+  -webkit-transform: rotateX(50deg) rotateZ(0deg) rotateY(0deg) translateY(-14%) translateX(-2%) translateZ(300px);
+  -moz-transform: rotateX(50deg) rotateZ(0deg) rotateY(0deg) translateY(-14%) translateX(-2%) translateZ(300px);
+  transform: rotateX(50deg) rotateZ(0deg) rotateY(0deg) translateY(-14%) translateX(-2%) translateZ(300px);
 }
 #example .masthead.zoomed:before {
-  -webkit-transform: rotateX(50deg) rotateZ(0deg) rotateY(0deg) translateZ(200px);
-  -moz-transform: rotateX(50deg) rotateZ(0deg) rotateY(0deg) translateZ(200px);
-  transform: rotateX(50deg) rotateZ(0deg) rotateY(0deg) translateZ(200px);
+  -webkit-transform: rotateX(0deg) rotateZ(0deg) rotateY(0deg) translateZ(0px);
+  -moz-transform: rotateX(0deg) rotateZ(0deg) rotateY(0deg) translateZ(0px);
+  transform: rotateX(0deg) rotateZ(0deg) rotateY(0deg) translateZ(0px);
 }
 
 @keyframes masthead {
@@ -524,24 +525,35 @@ body#example.hide {
  }
 
 }
+#example.index .masthead.segment h1 .text,
+#example.index .masthead.segment h1 b,
+#example.index .masthead.segment .download.button {
+  visibility: hidden;
+}
 #example.index .masthead {
   position: relative;
   overflow: hidden;
-  background: #191919;
+  background: linear-gradient(#081919, #001c1c) #191919;
+  background-color: #191919;
   padding: 3em 0px 3em;
   color: rgba(255, 255, 255, 0.9);
   margin-bottom: 0px;
   border-bottom: none;
 }
 #example.index .masthead.segment h1 {
-  font-size: 5em;
-  color: #FFFFFF;
+  font-size: 3em;
+  color: rgba(255, 255, 255, 0.5);
   line-height: 1.2;
-  margin: -20px 0px 0px;
+  margin: 0px 0px 0px;
   padding-bottom: 0px;
 }
-#example.index .masthead strike {
-  color: rgba(0, 0, 0, 0.2);
+#example.index .masthead.segment h1 b {
+  display: inline-block;
+  font-weight: bold;
+  color: #FFFFFF;
+}
+#example.index .masthead.segment h1 .text {
+  display: inline-block;
 }
 #example.index .masthead h2 {
   font-weight: normal;
@@ -564,12 +576,15 @@ body#example.hide {
 #example.index .introduction {
   position: relative;
   clear: both;
-  margin: 7rem 0rem 3rem;
+  margin: 15rem 0rem;
 }
 #example.index .logo {
   float: left;
   width: 35px;
 }
+#example.index .ui.header {
+  font-weight: normal;
+}
 
 #example.index .introduction .buttons {
   margin-top: 3em;
@@ -594,7 +609,6 @@ body#example.hide {
 #example.index pre.console {
   height: 120px;
 }
-
 #example .masthead .grid {
   position: relative;
   z-index: 2;
@@ -653,6 +667,9 @@ body#example.hide {
 #example.index .stripe .grid .row {
   margin: 2rem 0rem;
 }
+#example.index .feature.stripe p {
+  min-height: 100px;
+}
 #example.index .inverted.stripe {
   background-color: #1B1C1D;
 }
@@ -673,6 +690,19 @@ body#example.hide {
   font-size: 2em;
 }
 
+#example.index .email.stripe {
+  padding: 2em 0em;
+}
+#example.index .email.stripe p {
+  margin: -0.5em 0em 1em;
+}
+#example.index .email.stripe .input {
+  width: 450px;
+}
+#example.index .email.stripe .submit.button {
+  margin-left: 1em;
+}
+
 /* content */
 #example .solid,
 #example .stripe {

src/definitions/collections/menu.less

@@ -255,7 +255,7 @@
   min-width: ~"calc(100% - 1px)";
   box-shadow: @dropdownBoxShadow;
 }
-.ui.menu .pointing.dropdown.item .menu {
+.ui.menu:not(.secondary) .pointing.dropdown.item .menu {
   margin-top: @dropdownPointingDistance;
   border-top-left-radius: 0em;
   border-top-right-radius: 0em;

src/definitions/elements/button.less

@@ -1141,7 +1141,7 @@
 /* Basic */
 .ui.basic.black.buttons .button,
 .ui.basic.black.button {
-  box-shadow: 0px 0px 0px @basicColoredBorderSize @solidBorderColor inset !important;
+  box-shadow: 0px 0px 0px @basicColoredBorderSize @borderColor inset !important;
   color: @textColor !important;
 }
 .ui.basic.black.buttons .button:hover,
@@ -1256,7 +1256,7 @@
 /* Basic */
 .ui.basic.blue.buttons .button,
 .ui.basic.blue.button {
-  box-shadow: 0px 0px 0px @basicColoredBorderSize @solidBorderColor inset !important;
+  box-shadow: 0px 0px 0px @basicColoredBorderSize @borderColor inset !important;
   color: @textColor !important;
 }
 .ui.basic.blue.buttons .button:hover,
@@ -1369,7 +1369,7 @@
 /* Basic */
 .ui.basic.green.buttons .button,
 .ui.basic.green.button {
-  box-shadow: 0px 0px 0px @basicColoredBorderSize @solidBorderColor inset !important;
+  box-shadow: 0px 0px 0px @basicColoredBorderSize @borderColor inset !important;
   color: @textColor !important;
 }
 .ui.basic.green.buttons .button:hover,
@@ -1481,7 +1481,7 @@
 /* Basic */
 .ui.basic.orange.buttons .button,
 .ui.basic.orange.button {
-  box-shadow: 0px 0px 0px @basicColoredBorderSize @solidBorderColor inset !important;
+  box-shadow: 0px 0px 0px @basicColoredBorderSize @borderColor inset !important;
   color: @textColor !important;
 }
 .ui.basic.orange.buttons .button:hover,
@@ -1593,7 +1593,7 @@
 /* Basic */
 .ui.basic.pink.buttons .button,
 .ui.basic.pink.button {
-  box-shadow: 0px 0px 0px @basicColoredBorderSize @solidBorderColor inset !important;
+  box-shadow: 0px 0px 0px @basicColoredBorderSize @borderColor inset !important;
   color: @textColor !important;
 }
 .ui.basic.pink.buttons .button:hover,
@@ -1705,7 +1705,7 @@
 /* Basic */
 .ui.basic.purple.buttons .button,
 .ui.basic.purple.button {
-  box-shadow: 0px 0px 0px @basicColoredBorderSize @solidBorderColor inset !important;
+  box-shadow: 0px 0px 0px @basicColoredBorderSize @borderColor inset !important;
   color: @textColor !important;
 }
 .ui.basic.purple.buttons .button:hover,
@@ -1817,7 +1817,7 @@
 /* Basic */
 .ui.basic.red.buttons .button,
 .ui.basic.red.button {
-  box-shadow: 0px 0px 0px @basicColoredBorderSize @solidBorderColor inset !important;
+  box-shadow: 0px 0px 0px @basicColoredBorderSize @borderColor inset !important;
   color: @textColor !important;
 }
 .ui.basic.red.buttons .button:hover,
@@ -1930,7 +1930,7 @@
 /* Basic */
 .ui.basic.teal.buttons .button,
 .ui.basic.teal.button {
-  box-shadow: 0px 0px 0px @basicColoredBorderSize @solidBorderColor inset !important;
+  box-shadow: 0px 0px 0px @basicColoredBorderSize @borderColor inset !important;
   color: @textColor !important;
 }
 .ui.basic.teal.buttons .button:hover,
@@ -2043,7 +2043,7 @@
 /* Basic */
 .ui.basic.yellow.buttons .button,
 .ui.basic.yellow.button {
-  box-shadow: 0px 0px 0px @basicColoredBorderSize @solidBorderColor inset !important;
+  box-shadow: 0px 0px 0px @basicColoredBorderSize @borderColor inset !important;
   color: @textColor !important;
 }
 .ui.basic.yellow.buttons .button:hover,

src/definitions/modules/transition.js

@@ -509,6 +509,7 @@ $.fn.transition = function() {
           transition: function() {
             var
               elementClass     = $module.attr('class'),
+              tagName          = $module.prop('tagName'),
               animation        = settings.animation,
               transitionExists = module.get.transitionExists(settings.animation),
               $clone,
@@ -518,7 +519,7 @@ $.fn.transition = function() {
             ;
             if( transitionExists === undefined || instance.displayType === undefined) {
               module.verbose('Determining whether animation exists');
-              $clone = $('<div>').addClass( elementClass ).appendTo($('body'));
+              $clone = $('<' + tagName + ' />').addClass( elementClass ).insertAfter($module);
               currentAnimation = $clone
                 .removeClass(className.inward)
                 .removeClass(className.outward)
@@ -536,6 +537,7 @@ $.fn.transition = function() {
                 .show()
                 .css('display')
               ;
+              console.log($clone, $clone.parent(), $clone.attr('class'), displayType);
               module.verbose('Determining final display state', displayType);
               if(currentAnimation != inAnimation) {
                 module.debug('Transition exists for animation', animation);

src/definitions/modules/transition.less

@@ -41,7 +41,6 @@
 *******************************/
 
 .animating.transition {
-  display: block !important;
   backface-visibility: @backfaceVisibility;
   transform: @use3DAcceleration;
   visibility: visible !important;