Bg pattern on body animate

10 years ago · 88ed78f493
3 changed files with 97 additions and 39 deletions
--- a/server/files/javascript/semantic.js
+++ b/server/files/javascript/semantic.js
@ -551,29 +551,6 @@ semantic.ready = function() {
      }
    },
    menu: {
      mouseenter: function() {
        $(this)
          .stop()
          .animate({
            width: '135px'
          }, 300, function() {
            $(this).find('.text').show();
          })
        ;
      },
      mouseleave: function(event) {
        $(this).find('.text').hide();
        $(this)
          .stop()
          .animate({
            width: '60px'
          }, 300)
        ;
    }
    },
    peek: function() {
      var
        $body     = $('html, body'),
@ -742,10 +719,6 @@ semantic.ready = function() {
    handler.makeCode();
  }
  $sidebarButton
    .on('mouseenter', handler.menu.mouseenter)
    .on('mouseleave', handler.menu.mouseleave)
  ;
  $menu
    .sidebar({
      animation: 'scale down'
--- a/server/files/stylesheets/semantic.css
+++ b/server/files/stylesheets/semantic.css
@ -256,6 +256,12 @@ a:hover {
     Pushed
 ---------------*/
 #example.hide .attached.launch.button,
 #example.show .attached.launch.button {
  transition: none !important;
  pointer-events: none !important;
 }
 /*--------------
     Intro
 ---------------*/
@ -295,6 +301,45 @@ body.guide .main.container > * {
 #example .masthead .ui.tag.label:after {
  background-color: #000000 !important;
 }
 body#example {
  position: absolute;
  background: #191919 url(../images/icons.png) !important;
  -moz-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-animation-name: masthead;
  -moz-animation-name: masthead;
  -o-animation-name: masthead;
  animation-name: masthead;
  opacity: 1;
  -webkit-animation-duration: 30s;
  -moz-animation-duration: 30s;
  -ms-animation-duration: 30s;
  -o-animation-duration: 30s;
  animation-duration: 30s;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  transform: rotateZ(0deg);
 }
 #example .masthead:before {
  position: absolute;
  z-index: 1;
@ -558,18 +603,62 @@ body.guide .main.container > * {
 #example .stripe .message {
  margin: 2em 0em;
 }
 #example .attached.launch.button {
  position: fixed;
  top: 63px;
  left: 0px;
  z-index: 500;
  width: 55px;
  height: 50px;
  overflow: hidden;
  -webkit-transition:
    0.3s width ease
  ;
  -moz-transition:
    0.3s width ease
  ;
  -o-transition:
    0.3s width ease
  ;
  -ms-transition:
    0.3s width ease
  ;
  transition:
    0.3s width ease
  ;
 }
 #example .attached.launch.button .text {
  position: absolute;
  top: 15px;
  left: 54px;
  opacity: 0;
  -webkit-transition:
    0.3s opacity 0.3s
  ;
  -moz-transition:
    0.3s opacity 0.3s
  ;
  -o-transition:
    0.3s opacity 0.3s
  ;
  -ms-transition:
    0.3s opacity 0.3s
  ;
  transition:
    0.3s opacity 0.3s
  ;
 }
 #example .attached.launch.button:hover {
  width: 130px;
 }
 #example .attached.launch.button:hover .text {
  opacity: 1;
 }
 #example .shortcuts {
  float: right;
  clear: both;
 }
 #example .launch.button {
  position: fixed;
  top: 63px;
  z-index: 500;
  width: 60px;
 }
 #example .launch.button .icon {
  margin-left: 0px;
 }
@ -582,10 +671,6 @@ body.guide .main.container > * {
 #example.index .attached.launch.button {
  top: 96px;
 }
 #example .launch.button .text {
  display: inline-block;
  display: none;
 }
 #example .main.container {
  position: relative;
--- a/server/layouts/default.html.eco
+++ b/server/layouts/default.html.eco
@ -147,7 +147,7 @@
  </script>
 </head>
 <body id="example" class="<%= @document.css %>" ontouchstart="">
 <body id="example" class="pushable <%= @document.css %>" ontouchstart="">
  <div class="ui vertical inverted labeled icon sidebar menu" id="menu">
    <a class="hide item">
      <i class="close icon"></i> Close Menu