semantic-ui-rails 0.12.5 → 0.13.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: c627e89622c93980863d2fe44593f893fc849ab6
-  data.tar.gz: 98c754e90492f6ed9befc0eb0ac7e4655e7221c3
+  metadata.gz: 9ac3c70a3425c1e899374ba741aef7cacaa66947
+  data.tar.gz: 5e095b5d61ff22ab3dfbe959e7d8a98e2dd72da7
 SHA512:
-  metadata.gz: efe391fe94831f65d19fa2524a30aa2ef4716924d49a34f232d37b5817f793dcbe35d912d8d2a35ca7f45dbd4e72fc9d5914c2f2baf0233e81aaa56d17eb2efb
-  data.tar.gz: 9a0d29082abdb988ee5f522beea60bd63106ba7b90c179b10b090f9084f428a905ffc7968da7419487f43fad3f59a034210e464b71927a906c981dfcb42d4dcc
+  metadata.gz: 0ddf04c8efb5d77eadaf20edc100ffdb63093c15fec60f0aff9dfd7010e322ab729e98e09a7392534b490e10a89d140b17f2bda44129591d3d5acd93e93046d2
+  data.tar.gz: 693bb020f98fb03458b658e6e77ad23d3ccd8fb1d1e87557155c6c52417dfd341276507dd1ac956aa7493024454d21f7fa9a9fb7691251e9e965e609dfe9e89c

data/app/assets/javascripts/semantic-ui/modules/accordion.js

@@ -85,15 +85,23 @@ $.fn.accordion = function(parameters) {
             ;
             module.toggle(index);
           },
-          resetStyle: function() {
-            module.verbose('Resetting styles on element', this);
-            $(this)
-              .attr('style', '')
-              .removeAttr('style')
-              .children()
+          resetDisplay: function() {
+            $(this).css('display', '');
+            if( $(this).attr('style') == '') {
+              $(this)
                 .attr('style', '')
                 .removeAttr('style')
-            ;
+              ;
+            }
+          },
+          resetOpacity: function() {
+            $(this).css('opacity', '');
+            if( $(this).attr('style') == '') {
+              $(this)
+                .attr('style', '')
+                .removeAttr('style')
+              ;
+            }
           }
         },
 
@@ -134,19 +142,17 @@ $.fn.accordion = function(parameters) {
               $previousContent
                 .stop()
                 .children()
+                  .stop()
                   .animate({
                     opacity: 0
-                  }, settings.duration, module.event.resetStyle)
+                  }, settings.duration, module.event.resetOpacity)
                   .end()
                 .slideUp(settings.duration , settings.easing, function() {
                   $previousContent
                     .removeClass(className.active)
-                    .attr('style', '')
-                    .removeAttr('style')
                     .children()
-                      .attr('style', '')
-                      .removeAttr('style')
                   ;
+                  $.proxy(module.event.resetDisplay, this)();
                 })
               ;
             }
@@ -156,15 +162,16 @@ $.fn.accordion = function(parameters) {
             $activeContent
               .stop()
               .children()
-                .attr('style', '')
-                .removeAttr('style')
+                .stop()
+                .animate({
+                  opacity: 1
+                }, settings.duration)
                 .end()
               .slideDown(settings.duration, settings.easing, function() {
                 $activeContent
                   .addClass(className.active)
-                  .attr('style', '')
-                  .removeAttr('style')
                 ;
+                $.proxy(module.event.resetDisplay, this)();
                 $.proxy(settings.onOpen, $activeContent)();
                 $.proxy(settings.onChange, $activeContent)();
               })
@@ -186,15 +193,13 @@ $.fn.accordion = function(parameters) {
             .show()
             .stop()
             .children()
+              .stop()
               .animate({
                 opacity: 0
-              }, settings.duration, module.event.resetStyle)
+              }, settings.duration, module.event.resetOpacity)
               .end()
             .slideUp(settings.duration, settings.easing, function(){
-              $activeContent
-                .attr('style', '')
-                .removeAttr('style')
-              ;
+              $.proxy(module.event.resetDisplay, this)();
               $.proxy(settings.onClose, $activeContent)();
               $.proxy(settings.onChange, $activeContent)();
             })

data/app/assets/javascripts/semantic-ui/modules/behavior/form.js

@@ -58,23 +58,7 @@ $.fn.form = function(fields, parameters) {
 
         initialize: function() {
           module.verbose('Initializing form validation', $module, validation, settings);
-          if(settings.keyboardShortcuts) {
-            $field
-              .on('keydown' + eventNamespace, module.event.field.keydown)
-            ;
-          }
-          $module
-            .on('submit' + eventNamespace, module.validate.form)
-          ;
-          $field
-            .on('blur' + eventNamespace, module.event.field.blur)
-          ;
-          $submit
-            .on('click' + eventNamespace, module.submit)
-          ;
-          $field
-            .on(module.get.changeEvent() + eventNamespace, module.event.field.change)
-          ;
+          module.bindEvents();
           module.instantiate();
         },
 
@@ -88,8 +72,8 @@ $.fn.form = function(fields, parameters) {
 
         destroy: function() {
           module.verbose('Destroying previous module', instance);
+          module.removeEvents();
           $module
-            .off(eventNamespace)
             .removeData(moduleNamespace)
           ;
         },
@@ -106,6 +90,51 @@ $.fn.form = function(fields, parameters) {
           ;
         },
 
+        bindEvents: function() {
+          if(settings.keyboardShortcuts) {
+            $field
+              .on('keydown' + eventNamespace, module.event.field.keydown)
+            ;
+          }
+          $module
+            .on('submit' + eventNamespace, module.validate.form)
+          ;
+          $field
+            .on('blur' + eventNamespace, module.event.field.blur)
+          ;
+          $submit
+            .on('click' + eventNamespace, module.submit)
+          ;
+          $field
+            .each(function() {
+              var  
+                type       = $(this).prop('type'),
+                inputEvent = module.get.changeEvent(type)
+              ;
+              if(settings.inline == true) {
+              }
+              $(this)
+                .on(inputEvent + eventNamespace, module.event.field.change)
+              ;
+            })
+          ;
+        },
+
+        removeEvents: function() {
+          $module
+            .off(eventNamespace)
+          ;
+          $field
+            .off(eventNamespace)
+          ;
+          $submit
+            .off(eventNamespace)
+          ;
+          $field
+            .off(eventNamespace)
+          ;
+        },
+
         event: {
           field: {
             keydown: function(event) {
@@ -171,13 +200,18 @@ $.fn.form = function(fields, parameters) {
         },
 
         get: {
-          changeEvent: function() {
-            return (document.createElement('input').oninput !== undefined)
-              ? 'input'
-              : (document.createElement('input').onpropertychange !== undefined)
-                ? 'propertychange'
-                : 'keyup'
-            ;
+          changeEvent: function(type) {
+            if(type == 'checkbox' || type == 'radio') {
+              return 'change';
+            }
+            else {
+              return (document.createElement('input').oninput !== undefined)
+                ? 'input'
+                : (document.createElement('input').onpropertychange !== undefined)
+                  ? 'propertychange'
+                  : 'keyup'
+              ;
+            }
           },
           field: function(identifier) {
             module.verbose('Finding field with identifier', identifier);

data/app/assets/javascripts/semantic-ui/modules/checkbox.js

@@ -112,6 +112,7 @@ $.fn.checkbox = function(parameters) {
           module.debug('Enabling checkbox', $input);
           $input
             .prop('checked', true)
+            .trigger('change')
           ;
           $.proxy(settings.onChange, $input.get())();
           $.proxy(settings.onEnable, $input.get())();
@@ -121,6 +122,7 @@ $.fn.checkbox = function(parameters) {
           module.debug('Disabling checkbox');
           $input
             .prop('checked', false)
+            .trigger('change')
           ;
           $.proxy(settings.onChange, $input.get())();
           $.proxy(settings.onDisable, $input.get())();

data/app/assets/javascripts/semantic-ui/modules/dimmer.js

@@ -155,7 +155,7 @@ $.fn.dimmer = function(parameters) {
               : function(){}
             ;
             module.set.dimmed();
-            if(settings.useCSS && $.fn.transition !== undefined && $dimmer.transition('is supported')) {
+            if(settings.on != 'hover' && settings.useCSS && $.fn.transition !== undefined && $dimmer.transition('is supported')) {
               $dimmer
                 .transition({
                   animation : settings.transition + ' in',
@@ -190,7 +190,7 @@ $.fn.dimmer = function(parameters) {
               ? callback
               : function(){}
             ;
-            if(settings.useCSS && $.fn.transition !== undefined && $dimmer.transition('is supported')) {
+            if(settings.on != 'hover' && settings.useCSS && $.fn.transition !== undefined && $dimmer.transition('is supported')) {
               module.verbose('Hiding dimmer with css');
               $dimmer
                 .transition({

data/app/assets/javascripts/semantic-ui/modules/modal.js

@@ -16,6 +16,7 @@ $.fn.modal = function(parameters) {
     $allModules = $(this),
     $window     = $(window),
     $document   = $(document),
+    $body       = $('body'),
 
     time            = new Date().getTime(),
     performance     = [],
@@ -127,6 +128,7 @@ $.fn.modal = function(parameters) {
         refresh: function() {
           module.remove.scrolling();
           module.cacheSizes();
+          module.set.screenHeight();
           module.set.type();
           module.set.position();
         },
@@ -239,6 +241,7 @@ $.fn.modal = function(parameters) {
           if( !module.is.active() ) {
             module.cacheSizes();
             module.set.position();
+            module.set.screenHeight();
             module.set.type();
 
             if( $otherModals.filter(':visible').size() > 0 && !settings.allowMultiple) {
@@ -309,6 +312,7 @@ $.fn.modal = function(parameters) {
               $module
                 .transition('reset')
               ;
+              module.remove.screenHeight();
             }
             module.remove.active();
           });
@@ -402,6 +406,14 @@ $.fn.modal = function(parameters) {
           active: function() {
             $module.removeClass(className.active);
           },
+          screenHeight: function() {
+            if(module.cache.height > module.cache.pageHeight) {
+              module.debug('Removing page height');
+              $body
+                .css('height', '')
+              ;
+            }
+          },
           keyboardShortcuts: function() {
             module.verbose('Removing keyboard shortcuts');
             $document
@@ -416,6 +428,7 @@ $.fn.modal = function(parameters) {
 
         cacheSizes: function() {
           module.cache = {
+            pageHeight    : $body.outerHeight(),
             height        : $module.outerHeight() + settings.offset + parseInt($module.css('marginTop'), 10),
             contextHeight : (settings.context == 'body')
               ? $(window).height()
@@ -441,6 +454,14 @@ $.fn.modal = function(parameters) {
         },
 
         set: {
+          screenHeight: function() {
+            if(module.cache.height > module.cache.pageHeight) {
+              module.debug('Modal is taller than page content, resizing page height');
+              $body
+                .css('height', module.cache.height + settings.padding)
+              ;
+            }
+          },
           active: function() {
             module.add.keyboardShortcuts();
             module.save.focus();
@@ -683,6 +704,8 @@ $.fn.modal.settings = {
   offset        : 0,
   transition    : 'scale',
 
+  padding       : 30,
+
   onShow        : function(){},
   onHide        : function(){},
   onApprove     : function(){ return true; },

data/app/assets/stylesheets/semantic-ui/collections/form.less

@@ -507,6 +507,22 @@
   padding-right: 1%;
 }
 
+/* Swap to full width on mobile */
+@media only screen and (max-width : 767px) {
+  .ui.form .two.fields > .fields,
+  .ui.form .two.fields > .field,
+  .ui.form .three.fields > .fields,
+  .ui.form .three.fields > .field,
+  .ui.form .four.fields > .fields,
+  .ui.form .four.fields > .field,
+  .ui.form .five.fields > .fields,
+  .ui.form .five.fields > .field {
+    width: 100%;
+    padding-left: 0%;
+    padding-right: 0%;
+  }
+}
+
 .ui.form .fields .field:first-child {
   padding-left: 0%;
 }

data/app/assets/stylesheets/semantic-ui/collections/menu.less

@@ -117,18 +117,16 @@
 .ui.menu .item .item .item > a:not(.button) {
   color: rgba(30, 30, 30, 0.6);
 }
-.ui.menu .dropdown.item .menu .item,
-.ui.menu .dropdown.item .menu .item a:not(.button) {
+.ui.menu .dropdown .menu .item,
+.ui.menu .dropdown .menu .item a:not(.button) {
   color: rgba(0, 0, 0, 0.75);
 }
 /* Hover */
 .ui.menu .item .menu a.item:hover,
-.ui.menu .item .menu a.item.hover,
-.ui.menu .item .menu .link.item:hover,
-.ui.menu .item .menu .link.item.hover {
+.ui.menu .item .menu .link.item:hover {
   color: rgba(0, 0, 0, 0.85);
 }
-.ui.menu .dropdown.item .menu .item a:not(.button):hover {
+.ui.menu .dropdown .menu .item a:not(.button):hover {
   color: rgba(0, 0, 0, 0.85);
 }
 /* Active */
@@ -181,7 +179,7 @@
   position: absolute;
   content: '';
   top: 0%;
-  right: 0px;
+  left: 0px;
   width: 1px;
   height: 100%;
   background-image: linear-gradient(
@@ -190,6 +188,10 @@
     rgba(0, 0, 0, 0.05) 100%)
   ;
 }
+.ui.menu > .menu:not(.right):first-child > .item:first-child:before,
+.ui.menu .item:first-child:before {
+  display: none;
+}
 .ui.menu .menu.right .item:before,
 .ui.menu .item.right:before {
   right: auto;
@@ -302,6 +304,11 @@
 /*--------------
     Dropdowns
 ---------------*/
+
+.ui.menu .dropdown .menu .item .icon {
+  float: none;
+  margin: 0em 0.75em 0em 0em;
+}
 .ui.menu .dropdown.item .menu {
   left: 1px;
   margin: 0px;
@@ -364,15 +371,13 @@
 ---------------*/
 
 .ui.link.menu .item:hover,
-.ui.menu .item.hover,
 .ui.menu .link.item:hover,
 .ui.menu a.item:hover,
-.ui.menu .ui.dropdown .menu .item.hover,
 .ui.menu .ui.dropdown .menu .item:hover {
   cursor: pointer;
   background-color: rgba(0, 0, 0, 0.02);
 }
-.ui.menu .ui.dropdown.active {
+.ui.menu .ui.dropdown.item.active {
   background-color: rgba(0, 0, 0, 0.02);
 
   -webkit-box-shadow: none;
@@ -456,8 +461,7 @@
 ---------------*/
 
 .ui.menu .item.disabled,
-.ui.menu .item.disabled:hover,
-.ui.menu .item.disabled.hover {
+.ui.menu .item.disabled:hover {
   cursor: default;
   color: rgba(0, 0, 0, 0.2);
   background-color: transparent !important;
@@ -511,12 +515,12 @@
   float: right;
   text-align: center;
 }
-.ui.vertical.menu .item > .icon:not(.input) {
+.ui.vertical.menu .item > i.icon {
   float: right;
   width: 1.22em;
   margin: 0em 0em 0em 0.5em;
 }
-.ui.vertical.menu .item > .label + .icon {
+.ui.vertical.menu .item > .label + i.icon {
   float: none;
   margin: 0em 0.25em 0em 0em;
 }
@@ -578,7 +582,7 @@
 .ui.vertical.menu .dropdown.item .menu .item {
   font-size: 1rem;
 }
-.ui.vertical.menu .dropdown.item .menu .item .icon {
+.ui.vertical.menu .dropdown.item .menu .item i.icon {
   margin-right: 0em;
 }
 .ui.vertical.menu .dropdown.item.active {
@@ -607,8 +611,7 @@
 .ui.tiered.menu > .sub.menu > .item {
   color: rgba(0, 0, 0, 0.4);
 }
-.ui.tiered.menu > .menu > .item:hover,
-.ui.tiered.menu > .menu > .item.hover {
+.ui.tiered.menu > .menu > .item:hover {
   color: rgba(0, 0, 0, 0.8);
 }
 .ui.tiered.menu .item.active {
@@ -669,8 +672,7 @@
   color: rgba(255, 255, 255, 0.6);
 }
 
-.ui.inverted.tiered.menu > .menu > .item:hover,
-.ui.inverted.tiered.menu > .menu > .item.hover {
+.ui.inverted.tiered.menu > .menu > .item:hover {
   color: rgba(255, 255, 255, 0.9);
 }
 .ui.inverted.tiered.menu .active.item:after {
@@ -774,7 +776,7 @@
   min-width: 3em;
   text-align: center;
 }
-.ui.pagination.menu .icon.item .icon {
+.ui.pagination.menu .icon.item i.icon {
   vertical-align: top;
 }
 .ui.pagination.menu.floated {
@@ -1008,7 +1010,6 @@
   border-radius: 0em;
 }
 /* Hover */
-.ui.secondary.vertical.pointing.menu > .item.hover,
 .ui.secondary.vertical.pointing.menu > .item:hover {
   background-color: transparent;
   color: rgba(0, 0, 0, 0.7);
@@ -1154,7 +1155,7 @@
   clear: left;
   margin: 0.5em 0em;
 }
-.ui.vertical.text.menu .item > .icon {
+.ui.vertical.text.menu .item > i.icon {
   float: none;
   margin: 0em 0.83em 0em 0em;
 }
@@ -1163,7 +1164,6 @@
 }
 
 /*--- hover ---*/
-.ui.text.menu .item.hover,
 .ui.text.menu .item:hover {
   opacity: 1;
   background-color: transparent;
@@ -1323,13 +1323,12 @@
 .ui.inverted.menu .item .item > a {
   color: rgba(255, 255, 255, 0.8);
 }
-.ui.inverted.menu .dropdown.item .menu .item,
-.ui.inverted.menu .dropdown.item .menu .item a {
+.ui.inverted.menu .dropdown .menu .item,
+.ui.inverted.menu .dropdown .menu .item a {
   color: rgba(0, 0, 0, 0.75) !important;
 }
 .ui.inverted.menu .item.disabled,
-.ui.inverted.menu .item.disabled:hover,
-.ui.inverted.menu .item.disabled.hover {
+.ui.inverted.menu .item.disabled:hover {
   color: rgba(255, 255, 255, 0.2);
 }
 
@@ -1393,20 +1392,15 @@
 
 /*--- Hover ---*/
 .ui.link.inverted.menu .item:hover,
-.ui.inverted.menu .item.hover,
 .ui.inverted.menu .link.item:hover,
 .ui.inverted.menu a.item:hover,
-.ui.inverted.menu .dropdown.item.hover,
 .ui.inverted.menu .dropdown.item:hover {
   background-color: rgba(255, 255, 255, 0.1);
 }
 .ui.inverted.menu a.item:hover,
-.ui.inverted.menu .item.hover,
 .ui.inverted.menu .item > a:hover,
 .ui.inverted.menu .item .menu a.item:hover,
-.ui.inverted.menu .item .menu a.item.hover,
-.ui.inverted.menu .item .menu .link.item:hover,
-.ui.inverted.menu .item .menu .link.item.hover {
+.ui.inverted.menu .item .menu .link.item:hover {
   color: rgba(255, 255, 255, 1);
 }
 
@@ -1756,7 +1750,6 @@
 .ui.pointing.menu .active.item:after {
   background-color: #FCFCFC;
 }
-.ui.pointing.menu .active.item.hover:after,
 .ui.pointing.menu .active.item:hover:after {
   background-color: #FAFAFA;
 }
@@ -1821,7 +1814,7 @@
 .ui.large.menu .item .item {
   font-size: 0.875rem;
 }
-.ui.large.menu .dropdown.item .item {
+.ui.large.menu .dropdown .item {
   font-size: 1rem;
 }
 .ui.large.vertical.menu {

data/app/assets/stylesheets/semantic-ui/elements/input.less

@@ -248,17 +248,12 @@
 ---------------------*/
 
 .ui.labeled.input .corner.label {
-  top: 1px;
-  right: 1px;
-  font-size: 0.55em;
+  font-size: 0.7em;
 
   -webkit-border-top-right-radius: 0.3125em;
   -moz-border-top-right-radius: 0.3125em;
   border-top-right-radius: 0.3125em;
 }
-.ui.labeled.input .corner.label > .icon {
-  margin: 0.4em 0em 0em 2em;
-}
 .ui.labeled.input input {
   padding-right: 2.5em !important;
 }

data/app/assets/stylesheets/semantic-ui/elements/label.less

@@ -397,9 +397,8 @@ a.ui.label:hover:before {
   z-index: 10;
   margin: 0em;
 
-  font-size: 0.8125em;
-  width: 2rem;
-  height: 2rem;
+  width: 3em;
+  height: 3em;
   padding: 0em;
 
   text-align: center;
@@ -435,15 +434,17 @@ a.ui.label:hover:before {
 }
 
 .ui.corner.label .icon {
-  margin: 0.4em 0em 0em 0.7em;
+  font-size: 0.875em;
+  margin: 0.5em 0em 0em 1.25em;
 }
 .ui.corner.label .text {
   display: inline-block;
   font-weight: bold;
-  margin: 0.5em 0em 0em 0.6em;
+
+  margin: 0.5em 0em 0em 1em;
   width: 2.5em;
+  font-size: 0.875em;
 
-  font-size: 0.82em;
   text-align: center;
 
   -webkit-transform: rotate(45deg);
@@ -453,6 +454,31 @@ a.ui.label:hover:before {
   transform: rotate(45deg);
 }
 
+/* Coupling */
+.ui.rounded.image > .ui.corner.label,
+.ui.input > .ui.corner.label,
+.ui.segment > .ui.corner.label {
+  overflow: hidden;
+}
+.ui.segment > .ui.corner.label {
+  top: -1px;
+  right: -1px;
+}
+.ui.segment > .ui.left.corner.label {
+  right: auto;
+  left: -1px;
+}
+.ui.input > .ui.corner.label{
+  top: 1px;
+  right: 1px;
+}
+.ui.input > .ui.right.corner.label {
+  right: auto;
+  left: 1px;
+}
+
+
+
 /* Left Corner */
 .ui.left.corner.label,
 .ui.left.corner.label:after {
@@ -468,10 +494,10 @@ a.ui.label:hover:before {
   border-top-color: inherit;
 }
 .ui.left.corner.label .icon {
-  margin: 0.4em 0em 0em -0.7em;
+  margin: 0.5em 0em 0em -1em;
 }
 .ui.left.corner.label .text {
-  margin: 0.5em 0em 0em -0.6em;
+  margin: 0.5em 0em 0em -1em;
   -webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
   -o-transform: rotate(-45deg);

data/app/assets/stylesheets/semantic-ui/modules/modal.less

@@ -50,7 +50,8 @@
 .ui.modal > .close {
   cursor: pointer;
   position: absolute;
-
+  z-index: 1;
+  
   opacity: 0.8;
 
   font-size: 1.25em;

data/lib/semantic/ui/rails/version.rb

@@ -1,7 +1,7 @@
 module Semantic
   module Ui
     module Rails
-      VERSION = "0.12.5"
+      VERSION = "0.13.0"
     end
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: semantic-ui-rails
 version: !ruby/object:Gem::Version
-  version: 0.12.5
+  version: 0.13.0
 platform: ruby
 authors:
 - nd0ut
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-02-19 00:00:00.000000000 Z
+date: 2014-02-21 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: less-rails