@performant-software/semantic-components 0.5.2 → 0.5.5

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

@@ -0,0 +1,379 @@
+/*******************************
+            Dropdown
+*******************************/
+
+/*-------------------
+       Element
+--------------------*/
+
+@transition:
+  box-shadow @defaultDuration @defaultEasing,
+  width @defaultDuration @defaultEasing
+;
+@borderRadius: @defaultBorderRadius;
+
+@raisedShadow: 0px 2px 3px 0px @borderColor;
+
+/*-------------------
+       Content
+--------------------*/
+
+/* Icon */
+@dropdownIconSize: @relative12px;
+@dropdownIconMargin: 0em 0em 0em 1em;
+
+/* Current Text */
+@textTransition: none;
+
+/* Menu */
+@menuBackground: #FFFFFF;
+@menuMargin: 0em;
+@menuPadding: 0em 0em;
+@menuTop: 100%;
+@menuTextAlign: left;
+
+@menuBorderWidth: 1px;
+@menuBorderColor: @borderColor;
+@menuBorder: @menuBorderWidth solid @menuBorderColor;
+@menuBoxShadow: @raisedShadow;
+@menuBorderRadius: @borderRadius;
+@menuTransition: opacity @defaultDuration @defaultEasing;
+@menuMinWidth: ~"calc(100% + "(@menuBorderWidth * 2)~")";
+@menuZIndex: 11;
+
+/* Text */
+@textLineHeight: 1em;
+@textLineHeightOffset: (@textLineHeight - 1em);
+@textCursorSpacing: 1px;
+
+/* Menu Item */
+@itemFontSize: @medium;
+@itemTextAlign: left;
+@itemBorder: none;
+@itemHeight: auto;
+@itemDivider: none;
+@itemColor: @textColor;
+@itemVerticalPadding: @mini;
+@itemHorizontalPadding: @large;
+@itemPadding: @itemVerticalPadding @itemHorizontalPadding;
+@itemFontWeight: @normal;
+@itemLineHeight: 1em;
+@itemLineHeightOffset: (@itemLineHeight - 1em);
+@itemTextTransform: none;
+@itemBoxShadow: none;
+
+/* Sub Menu */
+@subMenuTop: 0%;
+@subMenuLeft: 100%;
+@subMenuRight: auto;
+@subMenuDistanceAway: -0.5em;
+@subMenuMargin: 0em 0em 0em @subMenuDistanceAway;
+@subMenuBorderRadius: @borderRadius;
+@subMenuZIndex: 21;
+
+/* Menu Header */
+@menuHeaderColor: @darkTextColor;
+@menuHeaderFontSize: @relative11px;
+@menuHeaderFontWeight: @bold;
+@menuHeaderTextTransform: uppercase;
+@menuHeaderMargin: 1rem 0rem 0.75rem;
+@menuHeaderPadding: 0em @itemHorizontalPadding;
+
+/* Menu Divider */
+@menuDividerMargin: 0.5em 0em;
+@menuDividerColor: @internalBorderColor;
+@menuDividerSize: 1px;
+@menuDividerBorder: @menuDividerSize solid @menuDividerColor;
+
+/* Menu Input */
+@menuInputMargin: @large @mini;
+@menuInputMinWidth: 10rem;
+@menuInputVerticalPadding: 0.5em;
+@menuInputHorizontalPadding: @inputHorizontalPadding;
+@menuInputPadding: @menuInputVerticalPadding @menuInputHorizontalPadding;
+
+/* Menu Image */
+@menuImageMaxHeight: 2em;
+@menuImageVerticalMargin: -(@menuImageMaxHeight - 1em) / 2;
+
+/* Item Sub-Element */
+@itemElementFloat: none;
+@itemElementDistance: @mini;
+
+/* Sub-Menu Dropdown Icon */
+@itemDropdownIconDistance: 1em;
+@itemDropdownIconFloat: right;
+@itemDropdownIconMargin: @itemLineHeightOffset 0em 0em @itemDropdownIconDistance;
+
+/* Description */
+@itemDescriptionFloat: right;
+@itemDescriptionMargin: 0em 0em 0em 1em;
+@itemDescriptionColor: @lightTextColor;
+
+/* Message */
+@messagePadding: @selectionItemPadding;
+@messageFontWeight: @normal;
+@messageColor: @unselectedTextColor;
+
+/* Floated Content */
+@floatedDistance: 1em;
+
+/*-------------------
+        Types
+--------------------*/
+
+/*------------
+   Selection
+--------------*/
+
+@selectionMinWidth: 14em;
+@selectionVerticalPadding: @inputVerticalPadding;
+@selectionHorizontalPadding: @inputHorizontalPadding;
+@selectionBorderEmWidth:  @relative1px;
+@selectionMinHeight: @inputLineHeight + (@selectionVerticalPadding * 2) - @selectionBorderEmWidth;
+@selectionBackground: @inputBackground;
+@selectionDisplay: inline-block;
+@selectionIconDistance: @inputHorizontalPadding + @glyphWidth;
+@selectionPadding: @selectionVerticalPadding @selectionIconDistance @selectionVerticalPadding @selectionHorizontalPadding;
+@selectionZIndex: 10;
+
+@selectionItemDivider: 1px solid @solidInternalBorderColor;
+@selectionMessagePadding: @selectionItemPadding;
+
+/* <select> */
+@selectBorder: 1px solid @borderColor;
+@selectPadding: 0.5em;
+@selectVisibility: visible;
+@selectHeight: 38px;
+
+@selectionTextColor: @textColor;
+
+@selectionTextUnderlayIconOpacity: @disabledOpacity;
+@selectionTextUnderlayColor: @inputPlaceholderFocusColor;
+
+@selectionBoxShadow: none;
+@selectionBorderColor: @borderColor;
+@selectionBorder: 1px solid @selectionBorderColor;
+@selectionBorderRadius: @borderRadius;
+
+@selectionIconOpacity: 0.8;
+@selectionIconZIndex: 3;
+@selectionIconHitbox: @selectionVerticalPadding;
+@selectionIconMargin: -@selectionIconHitbox;
+@selectionIconPadding: @selectionIconHitbox / @dropdownIconSize;
+@selectionIconTransition: opacity @defaultDuration @defaultEasing;
+
+@selectionMenuBorderRadius: 0em 0em @borderRadius @borderRadius;
+@selectionMenuBoxShadow: @raisedShadow;
+@selectionMenuItemBoxShadow: none;
+
+@selectionItemHorizontalPadding: @itemHorizontalPadding;
+@selectionItemVerticalPadding: @itemVerticalPadding;
+@selectionItemPadding: @selectionItemVerticalPadding @selectionItemHorizontalPadding;
+
+@selectionTransition: @transition;
+@selectionMenuTransition: @menuTransition;
+
+/* Responsive */
+@selectionMobileMaxItems: 3;
+@selectionTabletMaxItems: 4;
+@selectionComputerMaxItems: 6;
+@selectionWidescreenMaxItems: 8;
+
+/* Derived */
+@selectedBorderEMWidth: 0.1em; /* 1px / em size */
+@selectionItemHeight: (@selectionItemVerticalPadding * 2) + @itemLineHeight + @selectedBorderEMWidth;
+@selectionMobileMaxMenuHeight: (@selectionItemHeight * @selectionMobileMaxItems);
+@selectionTabletMaxMenuHeight: (@selectionItemHeight * @selectionTabletMaxItems);
+@selectionComputerMaxMenuHeight: (@selectionItemHeight * @selectionComputerMaxItems);
+@selectionWidescreenMaxMenuHeight: (@selectionItemHeight * @selectionWidescreenMaxItems);
+
+/* Hover */
+@selectionHoverBorderColor: @selectedBorderColor;
+@selectionHoverBoxShadow: none;
+
+/* Focus */
+@selectionFocusBorderColor: @focusedFormMutedBorderColor;
+@selectionFocusBoxShadow: none;
+@selectionFocusMenuBoxShadow: @raisedShadow;
+
+/* Visible */
+@selectionVisibleTextFontWeight: @normal;
+@selectionVisibleTextColor: @hoveredTextColor;
+
+@selectionVisibleBorderColor: @focusedFormMutedBorderColor;
+@selectionVisibleBoxShadow: @raisedShadow;
+@selectionVisibleMenuBoxShadow: @raisedShadow;
+
+/* Visible Hover */
+@selectionActiveHoverBorderColor: @focusedFormMutedBorderColor;
+@selectionActiveHoverBoxShadow: @selectionVisibleBoxShadow;
+@selectionActiveHoverMenuBoxShadow: @selectionVisibleMenuBoxShadow;
+
+@selectionVisibleConnectingBorder: 0em;
+@selectionVisibleIconOpacity: '';
+
+/*--------------
+     Search
+--------------*/
+
+@searchMinWidth: '';
+
+/* Search Selection */
+@searchSelectionLineHeight: @inputLineHeight;
+@searchSelectionLineHeightOffset: ((@searchSelectionLineHeight - 1em) / 2);
+@searchSelectionVerticalPadding: (@selectionVerticalPadding - @searchSelectionLineHeightOffset);
+@searchSelectionHorizontalPadding: @selectionHorizontalPadding;
+@searchSelectionInputPadding: @searchSelectionVerticalPadding @selectionIconDistance @searchSelectionVerticalPadding @searchSelectionHorizontalPadding;
+
+@searchMobileMaxMenuHeight: @selectionMobileMaxMenuHeight;
+@searchTabletMaxMenuHeight: @selectionTabletMaxMenuHeight;
+@searchComputerMaxMenuHeight: @selectionComputerMaxMenuHeight;
+@searchWidescreenMaxMenuHeight: @selectionWidescreenMaxMenuHeight;
+
+/* Inline */
+@inlineIconMargin: 0em @relative3px 0em @relative3px;
+@inlineTextColor: inherit;
+@inlineTextFontWeight: @bold;
+@inlineMenuDistance: @relative3px;
+@inlineMenuBorderRadius: @borderRadius;
+
+
+/*--------------
+    Multiple
+--------------*/
+
+/* Split Actual Padding Between Child and Parent (allows for label spacing) */
+@multipleSelectionVerticalPadding: (@searchSelectionVerticalPadding * (1/3));
+@multipleSelectionLeftPadding: @relative5px;
+@multipleSelectionRightPadding: @selectionIconDistance;
+@multipleSelectionPadding: @multipleSelectionVerticalPadding @multipleSelectionRightPadding @multipleSelectionVerticalPadding @multipleSelectionLeftPadding;
+
+/* Child Elements */
+@multipleSelectionChildVerticalMargin: (@searchSelectionVerticalPadding * (2/3));
+@multipleSelectionChildLeftMargin: (@inputHorizontalPadding - @multipleSelectionLeftPadding);
+@multipleSelectionChildMargin: @multipleSelectionChildVerticalMargin 0em @multipleSelectionChildVerticalMargin @multipleSelectionChildLeftMargin;
+@multipleSelectionChildLineHeight: @relative17px;
+@multipleSelectionSearchStartWidth: (@glyphWidth * 2);
+
+/* Dropdown Icon */
+@multipleSelectionDropdownIconMargin: '';
+@multipleSelectionDropdownIconPadding: '';
+
+@multipleSelectionSearchAfterLabelDistance: @relative2px;
+
+/* Selection Label */
+@labelSize: @relativeMedium;
+@labelHorizontalMargin: @4px;
+@labelVerticalMargin: @2px;
+@labelMargin: @labelVerticalMargin @labelHorizontalMargin @labelVerticalMargin 0em;
+@labelBorderWidth: 1px;
+@labelBoxShadow: 0px 0px 0px @labelBorderWidth @borderColor inset;
+
+@labelVerticalPadding: @relative5px;
+@labelHorizontalPadding: @relativeMini;
+@labelPadding: @labelVerticalPadding @labelHorizontalPadding;
+
+/*-------------------
+       States
+--------------------*/
+
+/* Hovered */
+@hoveredItemBackground: @transparentBlack;
+@hoveredItemColor: @selectedTextColor;
+@hoveredZIndex: @menuZIndex + 2;
+
+/* Default Text */
+@defaultTextColor: @inputPlaceholderColor;
+@defaultTextFocusColor: @inputPlaceholderFocusColor;
+
+/* Loading */
+@loadingZIndex: -1;
+
+/* Active Menu Item */
+@activeItemZIndex: @menuZIndex + 1;
+@activeItemBackground: transparent;
+@activeItemBoxShadow: none;
+@activeItemFontWeight: @bold;
+@activeItemColor: @selectedTextColor;
+
+/* Selected */
+@selectedBackground: @subtleTransparentBlack;
+@selectedColor: @selectedTextColor;
+
+/* Error */
+@errorLabelBackground: #EACBCB;
+@errorLabelColor: @errorTextColor;
+
+@errorItemTextColor: @errorTextColor;
+@errorItemHoverBackground: #FFF2F2;
+@errorItemActiveBackground: #FDCFCF;
+
+/* Clearable */
+@clearableIconOpacity: 0.8;
+@clearableIconActiveOpacity: 1;
+
+/*-------------------
+      Variations
+--------------------*/
+
+/* Scrolling */
+@scrollingMenuWidth: 100%;
+@scrollingMenuItemBorder: none;
+@scrollingMenuRightItemPadding: ~"calc("(@itemHorizontalPadding)~" + "(@scrollbarWidth)~")";
+
+@scrollingMobileMaxItems: 4;
+@scrollingTabletMaxItems: 6;
+@scrollingComputerMaxItems: 8;
+@scrollingWidescreenMaxItems: 12;
+
+@scrollingBorderEMWidth: 0em; /* 0px / em size */
+@scrollingItemHeight: (@itemVerticalPadding * 2) + @itemLineHeight + @scrollingBorderEMWidth;
+@scrollingMobileMaxMenuHeight: (@scrollingItemHeight * @scrollingMobileMaxItems);
+@scrollingTabletMaxMenuHeight: (@scrollingItemHeight * @scrollingTabletMaxItems);
+@scrollingComputerMaxMenuHeight: (@scrollingItemHeight * @scrollingComputerMaxItems);
+@scrollingWidescreenMaxMenuHeight: (@scrollingItemHeight * @selectionWidescreenMaxItems);
+
+/* Upward */
+@upwardSelectionVisibleBorderRadius: @selectionVisibleConnectingBorder @selectionVisibleConnectingBorder @borderRadius @borderRadius;
+@upwardMenuBoxShadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.08);
+@upwardSelectionMenuBoxShadow: 0px -2px 3px 0px rgba(0, 0, 0, 0.08);
+@upwardMenuBorderRadius: @borderRadius @borderRadius 0em 0em;
+@upwardSelectionHoverBoxShadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.05);
+@upwardSelectionVisibleBoxShadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.08);
+@upwardSelectionActiveHoverBoxShadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.05);
+@upwardSelectionActiveHoverMenuBoxShadow: 0px -2px 3px 0px rgba(0, 0, 0, 0.08);
+
+/* Flyout Direction */
+@leftMenuDropdownIconFloat: left;
+@leftMenuDropdownIconMargin: @itemLineHeightOffset 0em 0em 0em;
+
+/* Left */
+@leftSubMenuBorderRadius: @borderRadius;
+@leftSubMenuMargin: 0em @subMenuDistanceAway 0em 0em;
+
+/* Simple */
+@simpleTransitionDuration: @defaultDuration;
+@simpleTransition: opacity @simpleTransitionDuration @defaultEasing;
+
+/* Floating */
+@floatingMenuDistance: 0.5em;
+@floatingMenuBoxShadow: @floatingShadow;
+@floatingMenuBorderRadius: @borderRadius;
+
+/* Pointing */
+@pointingArrowOffset: -(@pointingArrowSize / 2);
+@pointingArrowDistanceFromEdge: 1em;
+
+@pointingArrowBackground: @white;
+@pointingArrowZIndex: 2;
+@pointingArrowBoxShadow: -@menuBorderWidth -@menuBorderWidth 0px 0px @menuBorderColor;
+@pointingArrowSize: @relative7px;
+
+@pointingMenuDistance: @mini;
+@pointingMenuBorderRadius: @borderRadius;
+@pointingArrowBoxShadow: -@menuBorderWidth -@menuBorderWidth 0px 0px @menuBorderColor;
+
+/* Pointing Upward */
+@pointingUpwardMenuBorderRadius: @borderRadius;
+@pointingUpwardArrowBoxShadow: @menuBorderWidth @menuBorderWidth 0px 0px @menuBorderColor;

package/src/css/themes/default/modules/embed.overrides

@@ -0,0 +1,3 @@
+/*******************************
+        Video Overrides
+*******************************/

package/src/css/themes/default/modules/embed.variables

@@ -0,0 +1,53 @@
+/*******************************
+             Video
+*******************************/
+
+/*-------------------
+       Element
+--------------------*/
+
+/* Simple */
+@background: @lightGrey;
+@transitionDuration: 0.5s;
+@transitionEasing: @defaultEasing;
+
+/* Placeholder */
+@placeholderUnderlay: @background;
+
+/* Placeholder Overlayed Background */
+@placeholderBackground: radial-gradient(transparent 45%, rgba(0, 0, 0, 0.3));
+@placeholderBackgroundOpacity: 0.5;
+@placeholderBackgroundTransition: opacity @transitionDuration @transitionEasing;
+
+/* Icon */
+@iconBackground: @veryStrongTransparentBlack;
+@iconSize: 6rem;
+@iconTransition:
+  opacity @transitionDuration @transitionEasing,
+  color @transitionDuration @transitionEasing
+;
+@iconColor: @white;
+@iconShadow:
+  0px 2px 10px rgba(34, 36, 38, 0.2)
+;
+@iconZIndex: 10;
+
+/*-------------------
+       States
+--------------------*/
+
+/* Hover */
+@hoverPlaceholderBackground: @placeholderBackground;
+@hoverPlaceholderBackgroundOpacity: 1;
+@hoverIconColor: @white;
+
+
+/*-------------------
+      Variations
+--------------------*/
+
+/* Aspect Ratios */
+@squareRatio: (1/1) * 100%;
+@widescreenRatio: (9/16) * 100%;
+@ultraWidescreenRatio: (9/21) * 100%;
+@standardRatio: (3/4) * 100%;

package/src/css/themes/default/modules/modal.overrides

@@ -0,0 +1,3 @@
+/*******************************
+         Theme Overrides
+*******************************/

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

@@ -0,0 +1,192 @@
+/*******************************
+             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;

package/src/css/themes/default/modules/nag.overrides

@@ -0,0 +1,3 @@
+/*******************************
+         Theme Overrides
+*******************************/

package/src/css/themes/default/modules/nag.variables

@@ -0,0 +1,74 @@
+/*******************************
+             Nag
+*******************************/
+
+/*--------------
+   Collection
+---------------*/
+
+@position: relative;
+@width: 100%;
+@zIndex: 999;
+@margin: 0em;
+
+@background: #555555;
+@opacity: 0.95;
+@minHeight: 0em;
+@padding: 0.75em 1em;
+@lineHeight: 1em;
+@boxShadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
+
+@fontSize: 1rem;
+@textAlign: center;
+@color: @textColor;
+
+@transition: 0.2s background ease;
+
+
+/*--------------
+    Elements
+---------------*/
+
+/* Title */
+@titleColor: @white;
+@titleMargin: 0em 0.5em;
+
+@closeSize: 1em;
+@closeMargin: (-@closeSize / 2) 0em 0em;
+@closeTop: 50%;
+@closeRight: 1em;
+@closeColor: @white;
+@closeTransition: opacity 0.2s ease;
+@closeOpacity: 0.4;
+
+
+/*--------------
+      States
+---------------*/
+
+/* Hover */
+@nagHoverBackground: @background;
+@nagHoverOpacity: 1;
+
+@closeHoverOpacity: 1;
+
+/*--------------
+   Variations
+---------------*/
+
+/* Top / Bottom */
+@top: 0em;
+@bottom: 0em;
+@borderRadius: @defaultBorderRadius;
+@topBorderRadius: 0em 0em @borderRadius @borderRadius;
+@bottomBorderRadius: @borderRadius @borderRadius 0em 0em;
+
+/* Inverted */
+@invertedBackground: @darkWhite;
+
+/*--------------
+      Plural
+---------------*/
+
+@groupedBorderRadius: 0em;
+