fomantic-ui 2.9.0-beta.30 → 2.9.0-beta.300

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

@@ -12,8 +12,9 @@
 }
 
 /* Dropdown Icon */
-.ui.accordion .title .dropdown.icon,
-.ui.accordion .accordion .title .dropdown.icon {
+.ui.accordion .ui.header > .dropdown.icon,
+.ui.accordion .title > .dropdown.icon,
+.ui.accordion .accordion .title > .dropdown.icon {
   font-family: Accordion;
   line-height: 1;
   backface-visibility: hidden;
@@ -21,8 +22,8 @@
   font-style: normal;
   text-align: center;
 }
-
-.ui.accordion .title .dropdown.icon:before,
-.ui.accordion .accordion .title .dropdown.icon:before {
+.ui.accordion .ui.header > .dropdown.icon::before,
+.ui.accordion .title > .dropdown.icon::before,
+.ui.accordion .accordion .title > .dropdown.icon::before {
   content: '\f0da'/*rtl:'\f0d9'*/;
 }

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,4 +99,49 @@
 
 /* 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;
+@contentPaddingCompact: 0.25em 0 0.5em;
+
+/* Very Compact */
+@titlePaddingVeryCompact: 0.125em 0;
+@contentPaddingVeryCompact: 0.125em 0 0.25em;
+
+/* Styled Compact */
+@styledTitlePaddingCompact: 0.375em 0.5em;
+@styledContentPaddingCompact: 0.25em 0.5em 0.75em;
+
+/* Styled Very Compact */
+@styledTitlePaddingVeryCompact: 0.1875em 0.25em;
+@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/calendar.variables

@@ -18,3 +18,6 @@
 @adjacentBackground: @subtleTransparentBlack;
 @adjacentInvertedTextColor: @invertedMutedTextColor;
 @adjacentInvertedBackground: @subtleTransparentWhite;
+
+@multiMonthMargin: -1rem;
+@multiMonthPadding: 0;

package/src/themes/default/modules/checkbox.overrides

@@ -10,27 +10,27 @@
 }
 
 /* Checkmark */
-.ui.checkbox label:after,
-.ui.checkbox .box:after {
+.ui.checkbox label::after,
+.ui.checkbox .box::after {
   font-family: 'Checkbox';
 }
 
 /* Checked */
-.ui.checkbox input:checked ~ .box:after,
-.ui.checkbox input:checked ~ label:after {
+.ui.checkbox input:checked ~ .box::after,
+.ui.checkbox input:checked ~ label::after {
   content: '\e800';
 }
 
 /* Indeterminate */
-.ui.checkbox input:indeterminate ~ .box:after,
-.ui.checkbox input:indeterminate ~ label:after {
+.ui.checkbox input:indeterminate ~ .box::after,
+.ui.checkbox input:indeterminate ~ label::after {
   font-size: 12px;
   content: '\e801';
 }
 
 
 /*  UTF Reference
-.check:before { content: '\e800'; }
-.dash:before  { content: '\e801'; }
-.plus:before { content: '\e802'; }
+.check::before { content: '\e800'; }
+.dash::before  { content: '\e801'; }
+.plus::before { content: '\e802'; }
 */

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

@@ -149,7 +149,7 @@
 /* Toggle */
 @toggleLaneWidth: 3.5rem;
 @toggleHandleSize: 1.5rem;
-@toggleTransitionDuration: 0.2s;
+@toggleTransitionDuration: 0.3s;
 
 @toggleWidth: @toggleLaneWidth;
 @toggleHeight: @toggleHandleSize;
@@ -157,12 +157,12 @@
 @toggleHandleRadius: @circularRadius;
 @toggleHandleOffset: 0;
 @toggleHandleTransition:
-  background @sliderTransitionDuration @defaultEasing,
-  left @sliderTransitionDuration @defaultEasing
+  background @toggleTransitionDuration @defaultEasing,
+  left @toggleTransitionDuration @defaultEasing
 ;
 @toggleHandleTransitionRightAligned:
-  background @sliderTransitionDuration @defaultEasing,
-  right @sliderTransitionDuration @defaultEasing
+  background @toggleTransitionDuration @defaultEasing,
+  right @toggleTransitionDuration @defaultEasing
 ;
 
 @toggleLaneBackground: @transparentBlack;

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

@@ -12,7 +12,7 @@
 
 @duration: 0.5s;
 @transition:
-  background-color @duration linear
+  all @duration linear
 ;
 @zIndex: 1000;
 @textAlign: center;

package/src/themes/default/modules/dropdown.overrides

@@ -27,22 +27,22 @@
 .ui.dropdown > .dropdown.icon {
   width: auto;
 }
-.ui.dropdown > .dropdown.icon:before {
+.ui.dropdown > .dropdown.icon::before {
   content: '\f0d7';
 }
 
 /* Sub Menu */
-.ui.dropdown .menu .item .dropdown.icon:before {
+.ui.dropdown .menu .item .dropdown.icon::before {
   content: '\f0da'/*rtl:'\f0d9'*/;
 }
 
-.ui.dropdown .item .left.dropdown.icon:before,
-.ui.dropdown .left.menu .item .dropdown.icon:before {
+.ui.dropdown .item .left.dropdown.icon::before,
+.ui.dropdown .left.menu .item .dropdown.icon::before {
   content: "\f0d9"/*rtl:"\f0da"*/;
 }
 
 /* Vertical Menu Dropdown */
-.ui.vertical.menu .dropdown.item > .dropdown.icon:before {
+.ui.vertical.menu .dropdown.item > .dropdown.icon::before {
   content: "\f0da"/*rtl:"\f0d9"*/;
 }
 

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

@@ -345,7 +345,7 @@
 @upwardSelectionVisibleBorderRadius: @selectionVisibleConnectingBorder @selectionVisibleConnectingBorder @borderRadius @borderRadius;
 @upwardMenuBoxShadow: 0 0 3px 0 rgba(0, 0, 0, 0.08);
 @upwardSelectionMenuBoxShadow: 0 -2px 3px 0 rgba(0, 0, 0, 0.08);
-@upwardMenuBorderRadius: @borderRadius @borderRadius 0 0;
+@upwardSelectionMenuBorderRadius: @borderRadius @borderRadius 0 0;
 @upwardSelectionHoverBoxShadow: 0 0 2px 0 rgba(0, 0, 0, 0.05);
 @upwardSelectionVisibleBoxShadow: 0 0 3px 0 rgba(0, 0, 0, 0.08);
 @upwardSelectionActiveHoverBoxShadow: 0 0 3px 0 rgba(0, 0, 0, 0.05);
@@ -362,6 +362,9 @@
 /* Simple */
 @simpleTransitionDuration: @defaultDuration;
 @simpleTransition: opacity @simpleTransitionDuration @defaultEasing;
+@simpleUpwardMenuMargin: 1.5em;
+@simpleUpwardSelectionMenuMargin: 2.5em;
+@simpleUpwardItemMenuMargin: 2.8em;
 
 /* Floating */
 @floatingMenuDistance: 0.5em;
@@ -452,15 +455,6 @@
 @invertedInputHighlightColor: @invertedMutedTextColor;
 
 /* Multiple */
-/*@invertedLabelBackgroundColor: rgba(255, 255, 255, 0.06);
-@invertedLabelBackgroundImage: none;
-@invertedLabelColor: rgba(255, 255, 255, 0.6);
-@invertedLabelBoxShadow: 0 0 0 @labelBorderWidth rgba(255, 255, 255, 0.16) inset;
-
-@invertedLabelHoverBackgroundColor: rgba(255, 255, 255, 0.12);
-@invertedLabelHoverBackgroundImage: none;
-@invertedLabelHoverTextColor: rgba(255, 255, 255, 0.7);*/
-
 @invertedLabelBackgroundColor: rgba(255, 255, 255, 0.7);
 @invertedLabelBackgroundImage: none;
 @invertedLabelColor: rgba(0, 0, 0, 1);

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;
@@ -61,6 +68,7 @@
 
 @buttonDistance: 0.75em;
 @buttonCenteredDistance: 0.5em;
+@buttonLeftDistance: @buttonCenteredDistance;
 
 /* Inner Close Position (Tablet/Mobile) */
 @innerCloseTop: (@headerVerticalPadding - @closeHitBoxOffset + (@lineHeight - 1em));
@@ -249,3 +257,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)
+;

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

@@ -88,8 +88,6 @@
 @tooltipInvertedColor: @invertedColor;
 @tooltipInvertedBorder: @invertedBorder;
 @tooltipInvertedBoxShadow: @invertedBoxShadow;
-@tooltipInvertedHeaderBackground: @invertedHeaderBackground;
-@tooltipInvertedHeaderColor: @invertedHeaderColor;
 
 /* Arrow */
 @tooltipArrowVerticalOffset: -@2px;

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

@@ -58,6 +58,9 @@
 @toastIconCenteredAdjustment: 1.2em;
 @toastImageCenteredAdjustment: 2em;
 
+@toastImageMiniImageAdjustment: e(%("calc(%d + %d)", @inputVerticalPadding, @toastMiniImageHeight));
+@toastImageMiniImagePadding: 4.4em;
+
 /* Progressbar Colors */
 @toastInfoProgressColor: darken(@toastInfoColor,15);
 @toastWarningProgressColor: darken(@toastWarningColor,15);

package/src/themes/default/views/card.variables

@@ -188,6 +188,14 @@
   @floatingShadowHover
 ;
 
+/* Basic Raised */
+@basicRaisedShadow:
+  @floatingShadow
+;
+@basicRaisedShadowHover:
+  @floatingShadowHover
+;
+
 /* Card Count */
 @wideCardSpacing: 1em;
 @cardSpacing: 0.75em;