fomantic-ui 2.9.0-beta.3 → 2.9.0-beta.301

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;
 
 
 /*******************************
@@ -325,6 +403,7 @@
 
 /* Card */
 @variationCardInverted: true;
+@variationCardBasic: true;
 @variationCardDisabled: true;
 @variationCardLoading: true;
 @variationCardHorizontal: true;
@@ -334,22 +413,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 +472,9 @@
 @variationStatisticStackable: true;
 @variationStatisticFloated: true;
 @variationStatisticHorizontal: true;
+@variationStatisticEqualWidth: true;
 @variationStatisticSizes: @variationAllSizes;
+@variationStatisticColors: @variationAllColors;
 
 
 /*******************************
@@ -370,14 +484,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 +507,7 @@
 @variationCheckboxFitted: true;
 @variationCheckboxRightAligned: true;
 @variationCheckboxSizes: @variationAllSizes;
+@variationCheckboxColors: @variationAllColors;
 
 /* Dimmer */
 @variationDimmerInverted: true;
@@ -414,7 +534,7 @@
 @variationDropdownMultiple: true;
 @variationDropdownInline: true;
 @variationDropdownLoading: true;
-@variationDropdownStates: true;
+@variationDropdownStates: @variationAllStates;
 @variationDropdownClear: true;
 @variationDropdownLeft: true;
 @variationDropdownUpward: true;
@@ -423,6 +543,7 @@
 @variationDropdownFluid: true;
 @variationDropdownFloating: true;
 @variationDropdownPointing: true;
+@variationDropdownColumnar: true;
 @variationDropdownScrollhint: true;
 @variationDropdownSizes: @variationAllSizes;
 
@@ -438,6 +559,9 @@
 @variationModalScrolling: true;
 @variationModalLegacy: true;
 @variationModalCloseInside: true;
+@variationModalCentered: true;
+@variationModalActions: true;
+@variationModalLeftActions: true;
 @variationModalSizes: @variationAllSizes;
 
 /* Nag */
@@ -447,6 +571,7 @@
 @variationNagFixed: true;
 @variationNagGroups: true;
 @variationNagSizes: @variationAllSizes;
+@variationNagColors: @variationAllColors;
 
 /* Popup */
 @variationPopupInverted: true;
@@ -464,6 +589,7 @@
 @variationPopupFlowing: true;
 @variationPopupFixed: true;
 @variationPopupSizes: @variationAllSizes;
+@variationPopupColors: @variationAllColors;
 
 /* Progress */
 @variationProgressInverted: true;
@@ -482,10 +608,13 @@
 @variationProgressSpeeds: true;
 @variationProgressRightAligned: true;
 @variationProgressSizes: @variationAllSizes;
+@variationProgressColors: @variationAllColors;
 
 /* Rating */
 @variationRatingDisabled: true;
+@variationRatingPartial: true;
 @variationRatingSizes: @variationAllSizes;
+@variationRatingColors: @variationAllColors;
 
 /* Search */
 @variationSearchDisabled: true;
@@ -495,7 +624,9 @@
 @variationSearchAligned: true;
 @variationSearchFluid: true;
 @variationSearchShort: true;
+@variationSearchVeryShort: true;
 @variationSearchLong: true;
+@variationSearchVeryLong: true;
 @variationSearchScrolling: true;
 @variationSearchSizes: @variationAllSizes;
 
@@ -506,7 +637,9 @@
 
 /* Sidebar */
 @variationSidebarThin: true;
+@variationSidebarVeryThin: true;
 @variationSidebarWide: true;
+@variationSidebarVeryWide: true;
 @variationSidebarTop: true;
 @variationSidebarBottom: true;
 @variationSidebarLeft: true;
@@ -527,6 +660,7 @@
 @variationSliderVertical: true;
 @variationSliderBasic: true;
 @variationSliderSizes: small, large, big;
+@variationSliderColors: @variationAllColors;
 
 /* Tab */
 @variationTabLoading: true;
@@ -538,6 +672,7 @@
 @variationToastLeft: true;
 @variationToastRight: true;
 @variationToastCenter: true;
+@variationToastCentered: true;
 @variationToastInfo: true;
 @variationToastWarning: true;
 @variationToastSuccess: true;
@@ -555,6 +690,7 @@
 @variationToastAttached: true;
 @variationToastCompact: true;
 @variationToastCentered: true;
+@variationToastColors: @variationAllColors;
 
 /* Transition */
 @variationTransitionDisabled: true;
@@ -579,3 +715,6 @@
 /* Emojis */
 @variationEmojiColons: true;
 @variationEmojiNoColons: true;
+@variationEmojiDisabled: true;
+@variationEmojiLoading: true;
+@variationEmojiLink: true;

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"*/;
 }