fomantic-ui 2.9.0-beta.26 → 2.9.0-beta.262

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

@@ -4,6 +4,9 @@
 
 /* General */
 @variationAllSizes: mini, tiny, small, large, big, huge, massive;
+@variationAllColors: primary, secondary, red, orange, yellow, olive, green, teal, blue, violet, purple, pink, brown, grey, black;
+@variationAllStates: error, info, success, warning;
+@variationAllConsequences: positive, negative, error, info, success, warning;
 
 /*******************************
            Elements
@@ -12,10 +15,13 @@
 /* Button */
 @variationButtonDisabled: true;
 @variationButtonAnimated: true;
+@variationButtonAnimatedFade: true;
 @variationButtonInverted: true;
 @variationButtonSocial: true;
 @variationButtonFloated: true;
 @variationButtonCompact: true;
+@variationButtonIcon: true;
+@variationButtonLoading: true;
 @variationButtonBasic: true;
 @variationButtonTertiary: true;
 @variationButtonLabeled: true;
@@ -24,18 +30,31 @@
 @variationButtonOr: true;
 @variationButtonAttached: true;
 @variationButtonFluid: true;
+@variationButtonEqualWidth: true;
+@variationButtonVertical: true;
 @variationButtonCircular: true;
 @variationButtonGroups: true;
 @variationButtonStackable: true;
+@variationButtonWrapping: true;
+@variationButtonWrapped: true;
+@variationButtonSpaced: true;
 @variationButtonSizes: @variationAllSizes;
+@variationButtonColors: @variationAllColors;
 
 /* Container */
 @variationContainerGrid: true;
 @variationContainerRelaxed: true;
+@variationContainerVeryRelaxed: true;
 @variationContainerText: true;
+@variationContainerWide: true;
 @variationContainerFluid: true;
 @variationContainerAligned: true;
 @variationContainerJustified: true;
+@variationContainerScrolling: true;
+@variationContainerScrollingShort: true;
+@variationContainerScrollingVeryShort: true;
+@variationContainerScrollingLong: true;
+@variationContainerScrollingVeryLong: true;
 
 /* Divider */
 @variationDividerInverted: true;
@@ -47,6 +66,7 @@
 @variationDividerClearing: true;
 @variationDividerSection: true;
 @variationDividerSizes: @variationAllSizes;
+@variationDividerColors: @variationAllColors;
 
 /* Header */
 @variationHeaderDisabled: true;
@@ -62,8 +82,15 @@
 @variationHeaderAttached: true;
 @variationHeaderTags: h1, h2, h3, h4, h5, h6;
 @variationHeaderSizes: @variationAllSizes;
+@variationHeaderColors: @variationAllColors;
 
 /* Icon */
+@variationIconDeprecated: true;
+@variationIconSolid: true;
+@variationIconAliases: true;
+@variationIconOutline: true;
+@variationIconBrand: true;
+@variationIconThin: true; /* Font Awesome Pro only */
 @variationIconDisabled: true;
 @variationIconInverted: true;
 @variationIconLoading: true;
@@ -77,6 +104,7 @@
 @variationIconCorner: true;
 @variationIconGroups: true;
 @variationIconSizes: @variationAllSizes;
+@variationIconColors: @variationAllColors;
 
 /* Image */
 @variationImageDisabled: true;
@@ -96,7 +124,7 @@
 /* Input */
 @variationInputDisabled: true;
 @variationInputInverted: true;
-@variationInputStates: true;
+@variationInputStates: @variationAllStates;
 @variationInputTransparent: true;
 @variationInputCorner: true;
 @variationInputLoading: true;
@@ -104,6 +132,8 @@
 @variationInputLabeled: true;
 @variationInputAction: true;
 @variationInputFluid: true;
+@variationInputFile: true;
+@variationInputColors: @variationAllColors;
 @variationInputSizes: @variationAllSizes;
 
 /* Label */
@@ -120,6 +150,7 @@
 @variationLabelAttached: true;
 @variationLabelFluid: true;
 @variationLabelSizes: @variationAllSizes;
+@variationLabelColors: @variationAllColors;
 
 /* List */
 @variationListInverted: true;
@@ -139,6 +170,9 @@
 @variationListDivided: true;
 @variationListCelled: true;
 @variationListRelaxed: true;
+@variationListVeryRelaxed: true;
+@variationListHeader: true;
+@variationListDescription: true;
 @variationListSizes: @variationAllSizes;
 
 /* Loader */
@@ -148,6 +182,7 @@
 @variationLoaderInline: true;
 @variationLoaderElastic: true;
 @variationLoaderSizes: @variationAllSizes;
+@variationLoaderColors: @variationAllColors;
 
 /* Placeholder */
 @variationPlaceholderInverted: true;
@@ -181,6 +216,7 @@
 @variationSegmentPiled: true;
 @variationSegmentStacked: true;
 @variationSegmentPadded: true;
+@variationSegmentVeryPadded: true;
 @variationSegmentCircular: true;
 @variationSegmentCompact: true;
 @variationSegmentRaised: true;
@@ -194,7 +230,13 @@
 @variationSegmentTertiary: true;
 @variationSegmentAttached: true;
 @variationSegmentFitted: true;
+@variationSegmentScrolling: true;
+@variationSegmentScrollingShort: true;
+@variationSegmentScrollingVeryShort: true;
+@variationSegmentScrollingLong: true;
+@variationSegmentScrollingVeryLong: true;
 @variationSegmentSizes: @variationAllSizes;
+@variationSegmentColors: @variationAllColors;
 
 /* Step */
 @variationStepInverted: true;
@@ -204,13 +246,15 @@
 @variationStepOrdered: true;
 @variationStepFluid: true;
 @variationStepAttached: true;
+@variationStepEqualWidth: true;
 @variationStepSizes: @variationAllSizes;
 
 /* Text */
 @variationTextInverted: true;
 @variationTextDisabled: true;
-@variationTextStates: true;
+@variationTextStates: @variationAllStates;
 @variationTextSizes: @variationAllSizes;
+@variationTextColors: @variationAllColors;
 
 
 /*******************************
@@ -226,10 +270,12 @@
 @variationFormDisabled: true;
 @variationFormTransparent: true;
 @variationFormLoading: true;
-@variationFormStates: true;
+@variationFormStates: @variationAllStates;
 @variationFormRequired: true;
 @variationFormInline: true;
 @variationFormGrouped: true;
+@variationFormEqualWidth: true;
+@variationFormWide: true;
 @variationFormSizes: @variationAllSizes;
 
 /* Grid */
@@ -238,9 +284,11 @@
 @variationGridCelled: true;
 @variationGridCentered: true;
 @variationGridRelaxed: true;
+@variationGridVeryRelaxed: true;
 @variationGridPadded: true;
 @variationGridFloated: true;
 @variationGridDivided: true;
+@variationGridVertical: true;
 @variationGridAligned: true;
 @variationGridStretched: true;
 @variationGridJustified: true;
@@ -248,6 +296,10 @@
 @variationGridDoubling: true;
 @variationGridStackable: true;
 @variationGridCompact: true;
+@variationGridVeryCompact: true;
+@variationGridWide: true;
+@variationGridEqualWidth: true;
+@variationGridColors: @variationAllColors;
 
 /* Menu */
 @variationMenuInverted: true;
@@ -261,12 +313,16 @@
 @variationMenuLabeled: true;
 @variationMenuStackable: true;
 @variationMenuFloated: true;
+@variationMenuCentered: true;
 @variationMenuFitted: true;
 @variationMenuBorderless: true;
 @variationMenuCompact: true;
 @variationMenuFixed: true;
 @variationMenuAttached: true;
+@variationMenuIcon: true;
+@variationMenuEqualWidth: true;
 @variationMenuSizes: @variationAllSizes;
+@variationMenuColors: @variationAllColors;
 
 /* Message */
 @variationMessageInverted: true;
@@ -274,10 +330,11 @@
 @variationMessageAttached: true;
 @variationMessageIcon: true;
 @variationMessageFloating: true;
-@variationMessageConsequences: true;
+@variationMessageConsequences: @variationAllConsequences;
 @variationMessageCentered: true;
 @variationMessageRightAligned: true;
 @variationMessageSizes: @variationAllSizes;
+@variationMessageColors: @variationAllColors;
 
 /* Table */
 @variationTableInverted: true;
@@ -298,11 +355,32 @@
 @variationTableSortable: true;
 @variationTableCollapsing: true;
 @variationTableBasic: true;
+@variationTableVeryBasic: true;
 @variationTableCelled: true;
 @variationTablePadded: true;
+@variationTableVeryPadded: true;
 @variationTableCompact: true;
+@variationTableVeryCompact: true;
 @variationTableMarked: true;
+@variationTableEqualWidth: true;
+@variationTableWide: true;
+@variationTableScrolling: true;
+@variationTableScrollingShort: true;
+@variationTableScrollingVeryShort: true;
+@variationTableScrollingLong: true;
+@variationTableScrollingVeryLong: true;
+@variationTableStuck: true;
+@variationTableStuckHead: true;
+@variationTableStuckFoot: true;
+@variationTableStuckFirst: true;
+@variationTableStuckLast: true;
+@variationTableOverflowing: true;
+@variationTableOverflowingShort: true;
+@variationTableOverflowingVeryShort: true;
+@variationTableOverflowingLong: true;
+@variationTableOverflowingVeryLong: true;
 @variationTableSizes: @variationAllSizes;
+@variationTableColors: @variationAllColors;
 
 
 /*******************************
@@ -334,22 +412,55 @@
 @variationCardLink: true;
 @variationCardDoubling: true;
 @variationCardStackable: true;
+@variationCardFloated: true;
+@variationCardAligned: true;
+@variationCardImage: true;
+@variationCardHeader: true;
+@variationCardDescription: true;
+@variationCardMeta: true;
+@variationCardExtra: true;
+@variationCardButton: true;
+@variationCardStar: true;
+@variationCardLike: true;
+@variationCardEqualWidth: true;
 @variationCardSizes: @variationAllSizes;
+@variationCardColors: @variationAllColors;
 
 /* Comment */
 @variationCommentInverted: true;
 @variationCommentThreaded: true;
 @variationCommentMinimal: true;
+@variationCommentAvatar: true;
+@variationCommentAuthor: true;
+@variationCommentMeta: true;
+@variationCommentActions: true;
+@variationCommentReply: true;
 @variationCommentSizes: @variationAllSizes;
+@variationCommentColors: @variationAllColors;
 
 /* Feed */
 @variationFeedInverted: true;
+@variationFeedMeta: true;
+@variationFeedSummary: true;
+@variationFeedUser: true;
+@variationFeedExtra: true;
+@variationFeedDate: true;
+@variationFeedLike: true;
 @variationFeedSizes: @variationAllSizes;
 
 /* Item */
 @variationItemInverted: true;
+@variationItemImage: true;
+@variationItemHeader: true;
+@variationItemDescription: true;
+@variationItemMeta: true;
+@variationItemExtra: true;
+@variationItemFavorite: true;
+@variationItemLike: true;
+@variationItemFloated: true;
 @variationItemAligned: true;
 @variationItemRelaxed: true;
+@variationItemVeryRelaxed: true;
 @variationItemDivided: true;
 @variationItemLink: true;
 @variationItemUnstackable: true;
@@ -360,7 +471,9 @@
 @variationStatisticStackable: true;
 @variationStatisticFloated: true;
 @variationStatisticHorizontal: true;
+@variationStatisticEqualWidth: true;
 @variationStatisticSizes: @variationAllSizes;
+@variationStatisticColors: @variationAllColors;
 
 
 /*******************************
@@ -370,14 +483,19 @@
 /* Accordion */
 @variationAccordionInverted: true;
 @variationAccordionStyled: true;
+@variationAccordionBasicStyled: true;
 @variationAccordionFluid: true;
+@variationAccordionCompact: true;
+@variationAccordionVeryCompact: true;
+@variationAccordionRightDropdown: true;
+@variationAccordionTree: true;
 
 /* Calendar */
 @variationCalendarInverted: true;
 @variationCalendarDisabled: true;
+@variationCalendarMultiMonth: true;
 
 /* Checkbox */
-@variationCheckboxBox: false;   //.box (instead of label) is an ancient fragment of sui v1 and not even documented in v2.x anymore
 @variationCheckboxDisabled: true;
 @variationCheckboxReadonly: true;
 @variationCheckboxInverted: true;
@@ -388,6 +506,7 @@
 @variationCheckboxFitted: true;
 @variationCheckboxRightAligned: true;
 @variationCheckboxSizes: @variationAllSizes;
+@variationCheckboxColors: @variationAllColors;
 
 /* Dimmer */
 @variationDimmerInverted: true;
@@ -414,7 +533,7 @@
 @variationDropdownMultiple: true;
 @variationDropdownInline: true;
 @variationDropdownLoading: true;
-@variationDropdownStates: true;
+@variationDropdownStates: @variationAllStates;
 @variationDropdownClear: true;
 @variationDropdownLeft: true;
 @variationDropdownUpward: true;
@@ -423,6 +542,7 @@
 @variationDropdownFluid: true;
 @variationDropdownFloating: true;
 @variationDropdownPointing: true;
+@variationDropdownColumnar: true;
 @variationDropdownScrollhint: true;
 @variationDropdownSizes: @variationAllSizes;
 
@@ -447,6 +567,7 @@
 @variationNagFixed: true;
 @variationNagGroups: true;
 @variationNagSizes: @variationAllSizes;
+@variationNagColors: @variationAllColors;
 
 /* Popup */
 @variationPopupInverted: true;
@@ -464,6 +585,7 @@
 @variationPopupFlowing: true;
 @variationPopupFixed: true;
 @variationPopupSizes: @variationAllSizes;
+@variationPopupColors: @variationAllColors;
 
 /* Progress */
 @variationProgressInverted: true;
@@ -482,11 +604,13 @@
 @variationProgressSpeeds: true;
 @variationProgressRightAligned: true;
 @variationProgressSizes: @variationAllSizes;
+@variationProgressColors: @variationAllColors;
 
 /* Rating */
 @variationRatingDisabled: true;
 @variationRatingPartial: true;
 @variationRatingSizes: @variationAllSizes;
+@variationRatingColors: @variationAllColors;
 
 /* Search */
 @variationSearchDisabled: true;
@@ -496,7 +620,9 @@
 @variationSearchAligned: true;
 @variationSearchFluid: true;
 @variationSearchShort: true;
+@variationSearchVeryShort: true;
 @variationSearchLong: true;
+@variationSearchVeryLong: true;
 @variationSearchScrolling: true;
 @variationSearchSizes: @variationAllSizes;
 
@@ -507,7 +633,9 @@
 
 /* Sidebar */
 @variationSidebarThin: true;
+@variationSidebarVeryThin: true;
 @variationSidebarWide: true;
+@variationSidebarVeryWide: true;
 @variationSidebarTop: true;
 @variationSidebarBottom: true;
 @variationSidebarLeft: true;
@@ -528,6 +656,7 @@
 @variationSliderVertical: true;
 @variationSliderBasic: true;
 @variationSliderSizes: small, large, big;
+@variationSliderColors: @variationAllColors;
 
 /* Tab */
 @variationTabLoading: true;
@@ -557,6 +686,7 @@
 @variationToastAttached: true;
 @variationToastCompact: true;
 @variationToastCentered: true;
+@variationToastColors: @variationAllColors;
 
 /* Transition */
 @variationTransitionDisabled: true;
@@ -581,3 +711,6 @@
 /* Emojis */
 @variationEmojiColons: true;
 @variationEmojiNoColons: true;
+@variationEmojiDisabled: true;
+@variationEmojiLoading: true;
+@variationEmojiLink: 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,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.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.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;
@@ -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)
+;

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);