fomantic-ui 2.9.3-beta.4 → 2.9.3-beta.41

package/src/themes/default/elements/flag.variables

@@ -396,7 +396,7 @@
     @1f1e8-1f1ff: {
         countrycode: cz;
         class: czechia;
-        aliasClass: false;
+        aliasClass: czech_republic;
         aliasClass2: false;
     };
     @1f1e9-1f1f0: {

package/src/themes/default/elements/label.variables

@@ -139,11 +139,14 @@
 
 @ribbonMargin: 1rem;
 @ribbonOffset: e(%("calc(%d - %d)", -@ribbonMargin, @ribbonTriangleSize));
+@ribbonCenterSize: 1em;
+@ribbonCenterOffset: e(%("calc(50% - %d)", @ribbonCenterSize));
 @basicRibbonOffset: e(%("calc(%d - %d)", @verticalPadding, @basicBorderWidth));
 @ribbonDistance: e(%("calc(%d + %d)", @ribbonMargin, @ribbonTriangleSize));
 @rightRibbonOffset: e(%("calc(100%% + %d + %d)", @ribbonMargin, @ribbonTriangleSize));
 
 @ribbonImageTopDistance: 1rem;
+@ribbonImageBottomDistance: @ribbonImageTopDistance;
 @ribbonImageMargin: -0.05rem; /* Rounding Offset on Triangle */
 @ribbonImageOffset: e(%("calc(%d - %d)", -@ribbonImageMargin, @ribbonTriangleSize));
 @rightRibbonImageOffset: e(%("calc(100%% + %d + %d)", @ribbonImageMargin, @ribbonTriangleSize));
@@ -152,6 +155,8 @@
 @ribbonTableOffset: e(%("calc(%d - %d)", -@ribbonTableMargin, @ribbonTriangleSize));
 @rightRibbonTableOffset: e(%("calc(100%% + %d + %d)", @ribbonTableMargin, @ribbonTriangleSize));
 
+@ribbonZIndex: 1;
+
 /* Inverted */
 @invertedBackgroundColor: darken(@backgroundColor, 20);
 @invertedBackground: @black;

package/src/themes/default/elements/segment.variables

@@ -63,6 +63,7 @@
 @piledBoxShadow: "";
 @piledDegrees: 1.2deg;
 @piledBorder: @border;
+@invertedPiledBorder: @borderWidth solid @solidWhiteBorderColor;
 
 /* Circular */
 @circularPadding: 2em;
@@ -72,6 +73,8 @@
 @stackedPageBackground: @subtleTransparentBlack;
 @stackedPadding: @verticalPadding + (0.4em);
 @tallStackedPadding: @verticalPadding + (0.8em);
+@stackedBorderColor: @borderColor;
+@invertedStackedBorderColor: rgba(225, 225, 225, 0.5);
 
 /*******************************
             States
@@ -85,6 +88,7 @@
 /* Loading Spinner */
 @loaderSize: 3em;
 @loaderLineZIndex: 101;
+@loadingMinHeight: @loaderSize * 1.5;
 
 /*******************************
             Variations
@@ -92,6 +96,7 @@
 
 /* Raised */
 @raisedBoxShadow: @floatingShadow;
+@invertedRaisedBoxShadow: @invertedFloatingShadow;
 
 /* Padded */
 @paddedSegmentPadding: 1.5em;
@@ -147,3 +152,6 @@
         rgba(255, 255, 255, @tertiaryInvertedLightness) 100%
     );
 @tertiaryInvertedColor: @invertedMutedTextColor;
+
+/* Resizable */
+@resizableDirection: vertical;

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

@@ -14,7 +14,23 @@
 @fontFileNameSupplement: "Lato";
 
 // based on https://github.com/twbs/bootstrap/blob/v5.1.3/scss/_variables.scss#L577 list
-@fallbackFonts: system-ui, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+@fallbackFonts:
+    system-ui,
+    -apple-system,
+    "Segoe UI",
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    "Helvetica Neue",
+    Arial,
+    "Noto Sans",
+    "Liberation Sans",
+    sans-serif,
+    "Apple Color Emoji",
+    "Segoe UI Emoji",
+    "Segoe UI Symbol",
+    "Noto Color Emoji";
 
 @headerFont: @fontName, @fallbackFonts;
 @pageFont: @fontName, @fallbackFonts;
@@ -653,6 +669,9 @@
 @floatingShadow:
     0 2px 4px 0 rgba(34, 36, 38, 0.12),
     0 2px 10px 0 rgba(34, 36, 38, 0.15);
+@invertedFloatingShadow:
+    0 2px 4px 0 rgba(225, 225, 225, 0.1),
+    0 2px 10px 0 rgba(225, 225, 225, 0.5);
 
 /*******************************
            Power-User

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

@@ -51,6 +51,7 @@
 @variationContainerFluid: true;
 @variationContainerAligned: true;
 @variationContainerJustified: true;
+@variationContainerResizable: true;
 @variationContainerScrolling: true;
 @variationContainerScrollingShort: true;
 @variationContainerScrollingVeryShort: true;
@@ -127,7 +128,7 @@
 @variationInputDisabled: true;
 @variationInputInverted: true;
 @variationInputStates: @variationAllStates;
-@variationInputInvalid: true;
+@variationInputInvalid: false;
 @variationInputTransparent: true;
 @variationInputCorner: true;
 @variationInputLoading: true;
@@ -235,6 +236,7 @@
 @variationSegmentAttached: true;
 @variationSegmentSeamless: true;
 @variationSegmentFitted: true;
+@variationSegmentResizable: true;
 @variationSegmentScrolling: true;
 @variationSegmentScrollingShort: true;
 @variationSegmentScrollingVeryShort: true;
@@ -372,6 +374,7 @@
 @variationTableMarked: true;
 @variationTableEqualWidth: true;
 @variationTableWide: true;
+@variationTableResizable: true;
 @variationTableScrolling: true;
 @variationTableScrollingShort: true;
 @variationTableScrollingVeryShort: true;
@@ -436,6 +439,7 @@
 
 /* Comment */
 @variationCommentInverted: true;
+@variationCommentDisabled: true;
 @variationCommentThreaded: true;
 @variationCommentMinimal: true;
 @variationCommentAvatar: true;
@@ -448,16 +452,29 @@
 
 /* Feed */
 @variationFeedInverted: true;
+@variationFeedDisabled: true;
 @variationFeedMeta: true;
 @variationFeedSummary: true;
 @variationFeedUser: true;
 @variationFeedExtra: true;
 @variationFeedDate: true;
 @variationFeedLike: true;
+@variationFeedLabel: true;
+@variationFeedLabelIcon: true;
+@variationFeedLabelImage: true;
+@variationFeedLabelText: true;
+@variationFeedLabelUiLabel: true;
+@variationFeedConnected: true;
+@variationFeedDivided: true;
+@variationFeedOrdered: true;
+@variationFeedBasic: true;
+@variationFeedRightFloated: true;
 @variationFeedSizes: @variationAllSizes;
+@variationFeedColors: @variationAllColors;
 
 /* Item */
 @variationItemInverted: true;
+@variationItemDisabled: true;
 @variationItemImage: true;
 @variationItemHeader: true;
 @variationItemDescription: true;
@@ -507,6 +524,7 @@
 @variationCheckboxDisabled: true;
 @variationCheckboxReadonly: true;
 @variationCheckboxInverted: true;
+@variationCheckboxInvisible: true;
 @variationCheckboxRadio: true;
 @variationCheckboxSlider: true;
 @variationCheckboxToggle: true;
@@ -546,6 +564,7 @@
 @variationDropdownLeft: true;
 @variationDropdownUpward: true;
 @variationDropdownSimple: true;
+@variationDropdownResizable: true;
 @variationDropdownScrolling: true;
 @variationDropdownFluid: true;
 @variationDropdownFloating: true;
@@ -581,6 +600,7 @@
 @variationModalFullscreen: true;
 @variationModalOverlay: true;
 @variationModalAligned: true;
+@variationModalResizable: true;
 @variationModalScrolling: true;
 @variationModalLegacy: true;
 @variationModalCloseInside: true;
@@ -646,6 +666,7 @@
 @variationSearchDisabled: true;
 @variationSearchSelection: true;
 @variationSearchCategory: true;
+@variationSearchHorizontalCategory: true;
 @variationSearchLoading: true;
 @variationSearchAligned: true;
 @variationSearchFluid: true;
@@ -653,6 +674,7 @@
 @variationSearchVeryShort: true;
 @variationSearchLong: true;
 @variationSearchVeryLong: true;
+@variationSearchResizable: true;
 @variationSearchScrolling: true;
 @variationSearchSizes: @variationAllSizes;
 

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

@@ -190,6 +190,18 @@
       Variations
 -------------------- */
 
+/* Invisible */
+@invisibleCheckboxLabelTransition: all @defaultDuration @defaultEasing;
+@invisibleCheckboxBackground: transparent;
+@invisibleCheckboxBorderColor: transparent;
+@invisibleCheckboxColor: inherit;
+@invisibleCheckboxBoxShadow: 0 0 0 @borderWidth @borderColor inset;
+@invisibleCheckboxFocusBoxShadow: 0 0 0 @borderWidth @selectedBorderColor inset;
+@invisibleCheckboxImageOpacityUnchecked: 0.5;
+@invisibleCheckboxImageOpacityUncheckedDisabled: @invisibleCheckboxImageOpacityUnchecked * @disabledCheckboxOpacity;
+@invisibleCheckboxImageOpacityFocus: 0.75;
+@invisibleCheckboxImageFilterUnchecked: grayscale(1);
+
 /* Inverted */
 @checkboxInvertedHoverBackground: @black;
 

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

@@ -21,6 +21,7 @@
 @dropdownIconSize: @relative12px;
 @dropdownIconMargin: 0 0 0 1em;
 @dropdownIconMinWidth: 1em;
+@dropdownIconMultipleRight: -1.5em;
 
 /* Current Text */
 @textTransition: none;
@@ -260,6 +261,8 @@
 @multipleSelectionChildLineHeight: @relative17px;
 @multipleSelectionSearchStartWidth: (@glyphWidth * 2);
 
+@multipleSearchMinWidth: 5.05em;
+
 /* Dropdown Icon */
 @multipleSelectionDropdownIconMargin: "";
 @multipleSelectionDropdownIconPadding: "";
@@ -471,3 +474,6 @@
 /* Scrollhint */
 @invertedScrollhintStartColor: rgba(255, 255, 255, 0.75);
 @invertedScrollhintEndColor: rgba(255, 255, 255, 0);
+
+/* Resizable */
+@resizableDirection: vertical;

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

@@ -133,6 +133,7 @@
 /* Scrolling Margin */
 @scrollingMargin: 2rem;
 @mobileScrollingMargin: @mobileTopAlignedMargin;
+@scrollingTop: 1em;
 
 /* Scrolling Content */
 @scrollingContentMaxHeight: calc(80vh - 10rem);
@@ -260,3 +261,6 @@
     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);
+
+/* Resizable */
+@resizableDirection: vertical;

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

@@ -79,8 +79,10 @@
 @tooltipLineHeight: @lineHeight;
 @tooltipDistanceAway: @relative7px;
 @tooltipZIndex: 1900;
-@tooltipDuration: @defaultDuration;
+@tooltipDuration: 0.2s;
 @tooltipEasing: @defaultEasing;
+@tooltipDelay: 0.04s;
+@tooltipScaleInit: 0.8;
 
 /* Inverted */
 @tooltipInvertedBackground: @invertedBackground;

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

@@ -174,3 +174,6 @@
 @bigSearchSize: @relativeBig;
 @hugeSearchSize: @relativeHuge;
 @massiveSearchSize: @relativeMassive;
+
+/* Resizable */
+@resizableDirection: vertical;

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

@@ -36,6 +36,7 @@
 @toastInvertedColor: @black;
 
 @toastBoxBorder: 1px solid rgba(34, 36, 38, 0.12);
+@invertedToastBoxBorder: 1px solid rgba(225, 225, 225, 0.5);
 
 /* Icon */
 @toastIconContentPadding: 3em;

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

@@ -21,9 +21,7 @@
 @width: 290px;
 @borderWidth: 1px;
 @borderShadow: 0 0 0 @borderWidth @solidBorderColor;
-@boxShadow:
-    @shadowBoxShadow,
-    @borderShadow;
+@boxShadow: @shadowBoxShadow, @borderShadow;
 @border: none;
 @zIndex: "";
 @transition:
@@ -164,9 +162,7 @@
 @linkHoverTransform: translateY(-@linkHoverRaiseDistance);
 
 @shadowHoverBoxShadow: 0 @shadowDistance @linkHoverRaiseDistance 0 @solidSelectedBorderColor;
-@linkHoverBoxShadow:
-    @shadowHoverBoxShadow,
-    @borderShadow;
+@linkHoverBoxShadow: @shadowHoverBoxShadow, @borderShadow;
 
 /* Horizontal */
 @horizontalMinWidth: 270px;
@@ -174,12 +170,8 @@
 @horizontalImageWidth: 150px;
 
 /* Raised */
-@raisedShadow:
-    @borderShadow,
-    @floatingShadow;
-@raisedShadowHover:
-    @borderShadow,
-    @floatingShadowHover;
+@raisedShadow: @borderShadow, @floatingShadow;
+@raisedShadowHover: @borderShadow, @floatingShadowHover;
 
 /* Basic Raised */
 @basicRaisedShadow: @floatingShadow;

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

@@ -31,7 +31,7 @@
 @iconLabelSize: 1.5em;
 @iconLabelPadding: 0.25em;
 @iconLabelBackground: none;
-@iconLabelBorderRadius: none;
+@iconLabelBorderRadius: 0;
 @iconLabelBorder: none;
 @iconLabelColor: rgba(0, 0, 0, 0.6);
 
@@ -40,6 +40,16 @@
 @imageLabelHeight: auto;
 @imageLabelBorderRadius: @circularRadius;
 
+/* Text Label */
+@textLabelTopMargin: 0.5em;
+@uiTextLabelTopMargin: 0.65em;
+@multilineTextLabelTopMargin: 0;
+@uiMultilineTextLabelTopMargin: 0.3em;
+
+/* Ui label */
+@uiLabelTopMargin: 0.4em;
+@uiLabelZIndex: 1;
+
 /* Content w/ Label */
 @labeledContentMargin: 0.5em 0 @relative5px @relativeLarge;
 @lastLabeledContentPadding: 0;
@@ -139,3 +149,47 @@
 /* -------------------
       Variations
 -------------------- */
+
+/* Connected */
+@connectedBorderColor: @borderColor;
+@connectedBorderWidth: 2px;
+@connectedBorder: @connectedBorderWidth solid @connectedBorderColor;
+@connectedBorderLeftOffset: 1.2em;
+@connectedBorderTopOffset: 2.1em;
+@connectedBorderHeight: e(%("calc(100%% - %d)", @iconLabelSize));
+
+/* Divided */
+@dividedBorderColor: @borderColor;
+@dividedBorderWidth: @borderWidth;
+@dividedBorder: @dividedBorderWidth solid @dividedBorderColor;
+
+/* Ordered */
+@orderedCountName: ordered;
+@orderedCountContent: counter(@orderedCountName);
+@orderedTopOffset: 0.6em;
+@orderedBottomMargin: 0.3em;
+@orderedBorderColor: transparent;
+@orderedBorderWidth: 2px;
+@orderedHeight: @labelWidth;
+@orderedBorder: @orderedBorderWidth solid @orderedBorderColor;
+@orderedBorderRadius: 50%;
+@orderedColor: @white;
+@orderedBackground: @orderedBasicBorderColor;
+@orderedBasicBorderColor: #bbbbbb;
+@orderedBasicColor: inherit;
+@orderedBasicBackground: transparent;
+@orderedConnectedBorderTopOffset: 2.7em;
+@orderedConnectedBorderHeight: e(%("calc(100%% - %d)", (@orderedConnectedBorderTopOffset - 0.2em)));
+@orderedConnectedLabeledBorderTopOffset: 4.85em;
+@orderedConnectedLabeledBorderHeight: e(%("calc(100%% - %d)", (@orderedConnectedLabeledBorderTopOffset - 0.2em)));
+
+/* Inverted */
+@invertedBackground: @black;
+@invertedIconLabelColor: @invertedLightTextColor;
+@invertedLikeColor: @invertedLightTextColor;
+@invertedLikeHoverColor: @invertedSelectedTextColor;
+@invertedLikeActiveColor: @invertedLikeColor;
+
+@invertedConnectedBorderColor: @whiteBorderColor;
+@invertedDividedBorderColor: @whiteBorderColor;
+@invertedTextLabelColor: @white;

package/src/themes/github/elements/button.variables

@@ -3,7 +3,11 @@
 -------------------- */
 
 /* Button Variables */
-@pageFont: Helvetica Neue, Helvetica, Arial, sans-serif;
+@pageFont:
+    Helvetica Neue,
+    Helvetica,
+    Arial,
+    sans-serif;
 @textTransform: none;
 @fontWeight: bold;
 @textColor: #333;