fomantic-ui 2.9.0-beta.190 → 2.9.0-beta.194

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fomantic-ui",
-  "version": "2.9.0-beta.190",
+  "version": "2.9.0-beta.194",
   "description": "Fomantic empowers designers and developers by creating a shared vocabulary for UI.",
   "keywords": [
     "fomantic-ui",

package/src/definitions/modules/accordion.less

@@ -31,17 +31,16 @@
 }
 
 /* Title */
-.ui.accordion .title,
-.ui.accordion .accordion .title {
+.ui.accordion.menu .item > .title,
+.ui.accordion > .title,
+.ui.accordion .accordion > .title {
   cursor: pointer;
-}
-
-/* Default Styling */
-.ui.accordion .title {
   padding: @titlePadding;
   font-family: @titleFont;
   font-size: @titleFontSize;
   color: @titleColor;
+  list-style: none;
+  line-height: @titleLineHeight;
 }
 
 /* Default Styling */
@@ -68,6 +67,10 @@
   transition: @iconTransition;
   vertical-align: @iconVerticalAlign;
   transform: @iconTransform;
+  &.right when (@variationAccordionRightDropdown) {
+    float:right;
+    transform: @iconTransformRight;
+  }
 }
 
 /*--------------
@@ -95,6 +98,8 @@
             States
 *******************************/
 
+.ui.accordion[open] > .title .dropdown.icon,
+.ui.accordion .accordion[open] > .title .dropdown.icon,
 .ui.accordion .active.title .dropdown.icon,
 .ui.accordion .accordion .active.title .dropdown.icon {
   transform: @activeIconTransform;
@@ -123,8 +128,8 @@
     background: @styledBackground;
     box-shadow: @styledBoxShadow;
   }
-  .ui.styled.accordion .title,
-  .ui.styled.accordion .accordion .title {
+  .ui.styled.accordion > .title,
+  .ui.styled.accordion .accordion > .title {
     margin: @styledTitleMargin;
     padding: @styledTitlePadding;
     color: @styledTitleColor;
@@ -133,43 +138,40 @@
     transition: @styledTitleTransition;
   }
   .ui.styled.accordion > .title:first-child,
-  .ui.styled.accordion .accordion .title:first-child {
+  .ui.styled.accordion .accordion > .title:first-child {
     border-top: none;
   }
 
 
   /* Content */
-  .ui.styled.accordion .content,
-  .ui.styled.accordion .accordion .content {
+  .ui.styled.accordion > .content {
     margin: @styledContentMargin;
     padding: @styledContentPadding;
   }
-  .ui.styled.accordion .accordion .content {
+  .ui.styled.accordion .accordion > .content {
     margin: @styledChildContentMargin;
     padding: @styledChildContentPadding;
   }
 
 
   /* Hover */
-  .ui.styled.accordion .title:hover,
-  .ui.styled.accordion .active.title,
-  .ui.styled.accordion .accordion .title:hover,
-  .ui.styled.accordion .accordion .active.title {
+  .ui.styled.accordion > .title:hover {
     background: @styledTitleHoverBackground;
     color: @styledTitleHoverColor;
   }
-  .ui.styled.accordion .accordion .title:hover,
-  .ui.styled.accordion .accordion .active.title {
+  .ui.styled.accordion .accordion > .title:hover {
     background: @styledHoverChildTitleBackground;
     color: @styledHoverChildTitleColor;
   }
 
 
   /* Active */
+  .ui.styled.accordion[open] > .title,
   .ui.styled.accordion .active.title {
     background: @styledActiveTitleBackground;
     color: @styledActiveTitleColor;
   }
+  .ui.styled.accordion .accordion[open] > .title,
   .ui.styled.accordion .accordion .active.title {
     background: @styledActiveChildTitleBackground;
     color: @styledActiveChildTitleColor;
@@ -182,7 +184,9 @@
   ---------------*/
 
   /* Default Styling */
-  .ui.compact.accordion:not(.styled) .title {
+
+  .ui.compact.accordion:not(.styled) > .title,
+  .ui.compact.accordion:not(.styled) .accordion > .title {
     padding: @titlePaddingCompact;
   }
 
@@ -192,8 +196,9 @@
   }
 
   /* Styled */
-  .ui.compact.styled.accordion .title,
-  .ui.compact.styled.accordion .accordion .title {
+
+  .ui.compact.styled.accordion > .title,
+  .ui.compact.styled.accordion .accordion > .title {
     padding: @styledTitlePaddingCompact;
   }
 
@@ -201,12 +206,14 @@
   .ui.compact.styled.accordion .accordion .title ~ .content {
     padding: @styledContentPaddingCompact;
   }
-
+}
   /*--------------
     Very Compact
   ---------------*/
 
-  .ui[class*="very compact"].accordion:not(.styled) .title {
+& when (@variationAccordionVeryCompact) {
+  .ui[class*="very compact"].accordion:not(.styled) > .title,
+  .ui[class*="very compact"].accordion:not(.styled) .accordion > .title {
     padding: @titlePaddingVeryCompact;
   }
 
@@ -215,8 +222,8 @@
     padding: @contentPaddingVeryCompact;
   }
 
-  .ui[class*="very compact"].styled.accordion .title,
-  .ui[class*="very compact"].styled.accordion .accordion .title {
+  .ui[class*="very compact"].styled.accordion > .title,
+  .ui[class*="very compact"].styled.accordion .accordion > .title {
     padding: @styledTitlePaddingVeryCompact;
   }
 
@@ -235,8 +242,8 @@
    Not Active
 ---------------*/
 
-.ui.accordion .title ~ .content:not(.active),
-.ui.accordion .accordion .title ~ .content:not(.active) {
+.ui.accordion:not(details) .title ~ .content:not(.active),
+.ui.accordion .accordion:not(details) .title ~ .content:not(.active) {
   display: none;
 }
 
@@ -260,9 +267,103 @@
        Inverted
   ---------------*/
 
-  .ui.inverted.accordion .title {
+  .ui.inverted.accordion.menu .item > .title,
+  .ui.inverted.accordion > .title,
+  .ui.inverted.accordion .accordion > .title {
     color: @invertedTitleColor;
   }
+  & when (@variationAccordionStyled) {
+    .ui.inverted.styled.accordion,
+    .ui.inverted.styled.accordion .accordion {
+      background: @invertedStyledBackground;
+      box-shadow: @invertedStyledBoxShadow;
+    }
+    .ui.inverted.styled.accordion > .title,
+    .ui.inverted.styled.accordion .accordion > .title {
+      color: @invertedStyledTitleColor;
+      border-top: @invertedStyledTitleBorder;
+    }
+
+    /* Hover */
+    .ui.inverted.styled.accordion > .title:hover {
+      background: @invertedStyledTitleHoverBackground;
+      color: @invertedStyledTitleHoverColor;
+    }
+    .ui.inverted.styled.accordion .accordion > .title:hover {
+      background: @invertedStyledHoverChildTitleBackground;
+      color: @invertedStyledHoverChildTitleColor;
+    }
+
+    /* Active */
+    .ui.inverted.styled.accordion[open] > .title,
+    .ui.inverted.styled.accordion .active.title {
+      background: @invertedStyledActiveTitleBackground;
+      color: @invertedStyledActiveTitleColor;
+    }
+    .ui.inverted.styled.accordion .accordion[open] > .title,
+    .ui.inverted.styled.accordion .accordion .active.title {
+      background: @invertedStyledActiveChildTitleBackground;
+      color: @invertedStyledActiveChildTitleColor;
+    }
+  }
+}
+
+& when (@variationAccordionBasicStyled) {
+  .ui.basic.styled.accordion,
+  .ui.basic.styled.accordion .accordion {
+    background: transparent;
+    box-shadow: none;
+  }
+  .ui.basic.styled.accordion > .title,
+  .ui.basic.styled.accordion .accordion > .title {
+    border: none;
+    color: @basicStyledTitleColor;
+  }
+  .ui.basic.styled.accordion > .title:hover,
+  .ui.basic.styled.accordion .accordion > .title:hover {
+    background: transparent;
+    color: @basicStyledTitleHoverColor;
+  }
+  .ui.basic.styled.accordion[open] > .title,
+  .ui.basic.styled.accordion .active.title,
+  .ui.basic.styled.accordion .accordion[open] > .title,
+  .ui.basic.styled.accordion .accordion .active.title {
+    background: transparent;
+    color: @basicStyledActiveTitleColor;
+  }
+  & when (@variationAccordionInverted) {
+    .ui.inverted.basic.styled.accordion > .title,
+    .ui.inverted.basic.styled.accordion .accordion > .title {
+      background: transparent;
+      color: @invertedBasicStyledTitleColor;
+    }
+    .ui.inverted.basic.styled.accordion > .title:hover,
+    .ui.inverted.basic.styled.accordion .accordion > .title:hover {
+      background: transparent;
+      color: @invertedBasicStyledTitleHoverColor;
+    }
+    .ui.inverted.basic.styled.accordion[open] > .title,
+    .ui.inverted.basic.styled.accordion .active.title,
+    .ui.inverted.basic.styled.accordion .accordion[open] > .title,
+    .ui.inverted.basic.styled.accordion .accordion .active.title {
+      background: transparent;
+      color: @invertedBasicStyledActiveTitleColor;
+    }
+  }
+}
+
+& when (@variationAccordionTree) {
+  .ui.tree.accordion:not(.styled) .title ~ .content,
+  .ui.tree.accordion:not(.styled) .accordion .title ~ .content {
+    padding:@treeContentPadding;
+  }
+  .ui.tree.accordion > .content,
+  .ui.tree.accordion .accordion > .content {
+    margin-left: @treeContentLeftMargin;
+  }
+  .ui.tree.accordion .accordion {
+    margin-top: @treeContentTopMargin;
+  }
 }
 
 .loadUIOverrides();

package/src/definitions/modules/modal.js

@@ -216,8 +216,8 @@ $.fn.modal = function(parameters) {
             module.verbose('Creating unique id for element', id);
           },
           innerDimmer: function() {
-            if ( $module.find(selector.dimmer).length == 0 ) {
-              $module.prepend('<div class="ui inverted dimmer"></div>');
+            if ( $module.find(selector.dimmer).length === 0 ) {
+              $('<div/>', {class: className.innerDimmer}).prependTo($module);
             }
           }
         },
@@ -1422,7 +1422,8 @@ $.fn.modal.settings = {
     template   : 'ui tiny modal',
     ok         : 'positive',
     cancel     : 'negative',
-    prompt     : 'ui fluid input'
+    prompt     : 'ui fluid input',
+    innerDimmer: 'ui inverted dimmer'
   },
   text: {
     ok    : 'Ok',

package/src/definitions/modules/modal.less

@@ -208,6 +208,16 @@
   .ui.modal:not(.fullscreen) {
     width: @tabletWidth;
     margin: @tabletMargin;
+    & > .active.dimmer + .close:not(.inside) {
+      pointer-events: none;
+      opacity: @closeOpacityDimmed;
+    }
+  }
+  .ui.dimmer > .ui.modal:not(.fullscreen) > .close:not(.inside){
+    text-shadow: @closeShadow;
+  }
+  .ui.inverted.dimmer > .ui.modal:not(.fullscreen) > .close:not(.inside){
+    text-shadow: @invertedCloseShadow;
   }
 }
 @media only screen and (min-width : @computerBreakpoint) {

package/src/definitions/modules/toast.js

@@ -511,7 +511,7 @@ $.fn.toast = function(parameters) {
             module.close();
           },
           click: function(event) {
-            if($(event.target).closest('a').length === 0) {
+            if($(event.target).closest(selector.clickable).length === 0) {
               if(settings.onClick.call($toastBox, element) === false || !settings.closeOnClick) {
                 module.verbose('Click callback returned false or close denied by setting cancelling close');
                 return;
@@ -876,6 +876,7 @@ $.fn.toast.settings = {
     image        : '> img.image, > .image > img',
     icon         : '> i.icon',
     input        : 'input:not([type="hidden"]), textarea, select, button, .ui.button, ui.dropdown',
+    clickable    : 'a, details, .ui.accordion',
     approve      : '.actions .positive, .actions .approve, .actions .ok',
     deny         : '.actions .negative, .actions .deny, .actions .cancel'
   },

package/src/themes/default/globals/variation.variables

@@ -478,8 +478,12 @@
 /* Accordion */
 @variationAccordionInverted: true;
 @variationAccordionStyled: true;
+@variationAccordionBasicStyled: true;
 @variationAccordionFluid: true;
 @variationAccordionCompact: true;
+@variationAccordionVeryCompact: true;
+@variationAccordionRightDropdown: true;
+@variationAccordionTree: true;
 
 /* Calendar */
 @variationCalendarInverted: true;

package/src/themes/default/modules/accordion.variables

@@ -9,6 +9,7 @@
 @titlePadding: 0.5em 0;
 @titleFontSize: 1em;
 @titleColor: @textColor;
+@titleLineHeight: 1;
 
 /* Icon */
 @iconOpacity: 1;
@@ -25,6 +26,7 @@
 ;
 @iconVerticalAlign: baseline;
 @iconTransform: none;
+@iconTransformRight: @menuIconTransform;
 
 /* Child Accordion */
 @childAccordionMargin: 1em 0 0;
@@ -40,7 +42,7 @@
 
 @menuTitlePadding: 0;
 @menuIconFloat: right;
-@menuIconMargin: @lineHeightOffset 0 0 1em;
+@menuIconMargin: @iconMargin;
 @menuIconTransform: rotate(180deg);
 
 
@@ -97,6 +99,22 @@
 
 /* Inverted */
 @invertedTitleColor: @invertedTextColor;
+@invertedStyledTitleColor: @invertedUnselectedTextColor;
+@invertedStyledBackground: @black;
+@invertedStyledTitleBorder: 1px solid @whiteBorderColor;
+@invertedStyledBoxShadow:
+        @subtleShadow,
+        0 0 0 1px @whiteBorderColor
+;
+@invertedStyledTitleHoverBackground: transparent;
+@invertedStyledTitleHoverColor: @invertedTextColor;
+@invertedStyledActiveTitleBackground: transparent;
+@invertedStyledActiveTitleColor: @invertedSelectedTextColor;
+
+@invertedStyledHoverChildTitleBackground: @invertedStyledTitleHoverBackground;
+@invertedStyledHoverChildTitleColor: @invertedStyledTitleHoverColor;
+@invertedStyledActiveChildTitleBackground: @invertedStyledActiveTitleBackground;
+@invertedStyledActiveChildTitleColor: @invertedStyledActiveTitleColor;
 
 /* Compact */
 @titlePaddingCompact: 0.25em 0;
@@ -112,4 +130,18 @@
 
 /* Styled Very Compact */
 @styledTitlePaddingVeryCompact: 0.1875em 0.25em;
-@styledContentPaddingVeryCompact: 0.125em 0.25em 0.375em;
+@styledContentPaddingVeryCompact: 0.125em 0.25em 0.375em;
+
+/* Basic Styled */
+@basicStyledTitleColor: @mutedTextColor;
+@basicStyledTitleHoverColor: @textColor;
+@basicStyledActiveTitleColor: @selectedTextColor;
+
+@invertedBasicStyledTitleColor: @invertedMutedTextColor;
+@invertedBasicStyledTitleHoverColor: @invertedTextColor;
+@invertedBasicStyledActiveTitleColor: @invertedSelectedTextColor;
+
+/* Tree */
+@treeContentPadding: 0;
+@treeContentTopMargin: 0;
+@treeContentLeftMargin: 1.7em;

package/src/themes/default/modules/modal.variables

@@ -14,6 +14,7 @@
 
 /* Close Icon */
 @closeOpacity: 0.8;
+@closeOpacityDimmed: 0.1;
 @closeSize: 1.25em;
 @closeColor: @white;
 
@@ -23,6 +24,12 @@
 @closePadding: @closeHitBoxOffset 0 0 0;
 @closeTop: -(@closeDistance + @closeHitbox);
 @closeRight: -(@closeDistance + @closeHitbox);
+@closeShadow:
+  -1px -1px 2px rgba(0, 0, 0, 0.3),
+  1px -1px 2px rgba(0, 0, 0, 0.3),
+  -1px 2px 2px rgba(0, 0, 0, 0.3),
+  1px 2px 2px rgba(0, 0, 0, 0.3)
+;
 
 /* Header */
 @headerMargin: 0;
@@ -249,3 +256,9 @@
 @invertedActionBorder: 1px solid rgba(34, 36, 38, 0.85);
 @invertedActionColor: @white;
 @invertedDimmerCloseColor: rgba(0,0,0,.85);
+@invertedCloseShadow:
+  -1px -1px 2px rgba(255, 255, 255, 0.3),
+  1px -1px 2px rgba(255, 255, 255, 0.3),
+  -1px 2px 2px rgba(255, 255, 255, 0.3),
+  1px 2px 2px rgba(255, 255, 255, 0.3)
+;