Semantic-Org/Semantic-UI

/*******************************
             Modal
*******************************/

@background: @white;
@border: none;
@zIndex: 1001;
@borderRadius: @defaultBorderRadius;
@transformOrigin: 50% 25%;
@boxShadow:
  1px 3px 3px 0px rgba(0, 0, 0, 0.2),
  1px 3px 15px 2px rgba(0, 0, 0, 0.2)
;

/* Close Icon */
@closeOpacity: 0.8;
@closeSize: 1.25em;
@closeColor: @white;

@closeHitbox: 2.25rem;
@closeDistance: 0.25rem;
@closeHitBoxOffset: (@closeHitbox - 1rem) / 2;
@closePadding: @closeHitBoxOffset 0rem 0rem 0rem;
@closeTop: -(@closeDistance + @closeHitbox);
@closeRight: -(@closeDistance + @closeHitbox);

/* Header */
@headerMargin: 0em;
@headerVerticalPadding: 1.25rem;
@headerHorizontalPadding: 1.5rem;
@headerPadding: @headerVerticalPadding @headerHorizontalPadding;
@headerBackground: @white;
@headerColor: @darkTextColor;
@headerFontSize: @huge;
@headerBoxShadow: none;
@headerFontWeight: @bold;
@headerFontFamily: @headerFont;
@headerBorder: 1px solid @borderColor;

/* Content */
@contentFontSize: 1em;
@contentPadding: 1.5rem;
@contentLineHeight: 1.4;
@contentBackground: #FFFFFF;

/* Image / Description */
@imageWidth: '';
@imageIconSize: 8rem;
@imageVerticalAlign: top;

@descriptionDistance: 2em;
@descriptionMinWidth: '';
@descriptionWidth: auto;
@descriptionVerticalAlign: top;

/* Modal Actions */
@actionBorder: 1px solid @borderColor;
@actionBackground: @offWhite;
@actionPadding: 1rem 1rem;
@actionAlign: right;

@buttonDistance: 0.75em;

/* Inner Close Position (Tablet/Mobile) */
@innerCloseTop: (@headerVerticalPadding - @closeHitBoxOffset + (@lineHeight - 1em));
@innerCloseRight: 1rem;
@innerCloseColor: @textColor;

/* Mobile Positions */
@mobileHeaderPadding: 0.75rem 1rem;
@mobileContentPadding: 1rem;
@mobileImagePadding: 0rem 0rem 1rem;
@mobileDescriptionPadding: 1rem 0rem ;
@mobileButtonDistance: 1rem;
@mobileActionPadding: 1rem 1rem (1rem - @mobileButtonDistance);
@mobileImageIconSize: 5rem;
@mobileCloseTop: 0.5rem;
@mobileCloseRight: 0.5rem;

/* Responsive Widths */
@mobileWidth: 95%;
@tabletWidth: 88%;
@computerWidth: 850px;
@largeMonitorWidth: 900px;
@widescreenMonitorWidth: 950px;

@mobileMargin: 0em 0em 0em 0em;
@tabletMargin: 0em 0em 0em 0em;
@computerMargin: 0em 0em 0em 0em;
@largeMonitorMargin: 0em 0em 0em 0em;
@widescreenMonitorMargin: 0em 0em 0em 0em;

@fullScreenWidth: 95%;
@fullScreenOffset: 0em;
@fullScreenMargin: 1em auto;

/* Coupling */
@invertedBoxShadow: 1px 3px 10px 2px rgba(0, 0, 0, 0.2);

/*-------------------
       States
--------------------*/

@loadingZIndex: -1;

/*-------------------
        Types
--------------------*/

/* Basic */
@basicModalHeaderColor: @white;
@basicModalColor: @white;
@basicModalCloseTop: 1rem;
@basicModalCloseRight: 1.5rem;
@basicInnerCloseColor: @white;

@basicInvertedModalColor: @textColor;
@basicInvertedModalHeaderColor: @darkTextColor;

/* Top Aligned */
@topAlignedMargin: 5vh;
@mobileTopAlignedMargin: 1rem;

/* Scrolling Margin */
@scrollingMargin: 1rem;
@mobileScrollingMargin: @mobileTopAlignedMargin;

/* Scrolling Content */
@scrollingContentMaxHeight: calc(80vh - 10em);

/*-------------------
      Variations
--------------------*/

/* Size Widths */
@miniRatio: 0.4;
@tinyRatio: 0.6;
@smallRatio: 0.8;
@largeRatio: 1.2;

/* Derived Responsive Sizes */
@miniHeaderSize: 1.3em;
@miniMobileWidth: @mobileWidth;
@miniTabletWidth: (@tabletWidth * @miniRatio);
@miniComputerWidth: (@computerWidth * @miniRatio);
@miniLargeMonitorWidth: (@largeMonitorWidth * @miniRatio);
@miniWidescreenMonitorWidth: (@widescreenMonitorWidth * @miniRatio);

@miniMobileMargin: 0em 0em 0em 0em;
@miniTabletMargin: 0em 0em 0em 0em;
@miniComputerMargin: 0em 0em 0em 0em;
@miniLargeMonitorMargin: 0em 0em 0em 0em;
@miniWidescreenMonitorMargin: 0em 0em 0em 0em;

@tinyHeaderSize: 1.3em;
@tinyMobileWidth: @mobileWidth;
@tinyTabletWidth: (@tabletWidth * @tinyRatio);
@tinyComputerWidth: (@computerWidth * @tinyRatio);
@tinyLargeMonitorWidth: (@largeMonitorWidth * @tinyRatio);
@tinyWidescreenMonitorWidth: (@widescreenMonitorWidth * @tinyRatio);

@tinyMobileMargin: 0em 0em 0em 0em;
@tinyTabletMargin: 0em 0em 0em 0em;
@tinyComputerMargin: 0em 0em 0em 0em;
@tinyLargeMonitorMargin: 0em 0em 0em 0em;
@tinyWidescreenMonitorMargin: 0em 0em 0em 0em;

@smallHeaderSize: 1.3em;
@smallMobileWidth: @mobileWidth;
@smallTabletWidth: (@tabletWidth * @smallRatio);
@smallComputerWidth: (@computerWidth * @smallRatio);
@smallLargeMonitorWidth: (@largeMonitorWidth * @smallRatio);
@smallWidescreenMonitorWidth: (@widescreenMonitorWidth * @smallRatio);

@smallMobileMargin: 0em 0em 0em 0em;
@smallTabletMargin: 0em 0em 0em 0em;
@smallComputerMargin: 0em 0em 0em 0em;
@smallLargeMonitorMargin: 0em 0em 0em 0em;
@smallWidescreenMonitorMargin: 0em 0em 0em 0em;

@largeHeaderSize: 1.6em;
@largeMobileWidth: @mobileWidth;
@largeTabletWidth: @tabletWidth;
@largeComputerWidth: (@computerWidth * @largeRatio);
@largeLargeMonitorWidth: (@largeMonitorWidth * @largeRatio);
@largeWidescreenMonitorWidth: (@widescreenMonitorWidth * @largeRatio);

@largeMobileMargin: 0em 0em 0em 0em;
@largeTabletMargin: 0em 0em 0em 0em;
@largeComputerMargin: 0em 0em 0em 0em;
@largeLargeMonitorMargin: 0em 0em 0em 0em;
@largeWidescreenMonitorMargin: 0em 0em 0em 0em;