@performant-software/semantic-components 0.5.2 → 0.5.5

package/src/css/themes/default/collections/form.variables

@@ -0,0 +1,195 @@
+/*******************************
+             Form
+*******************************/
+
+/*-------------------
+       Elements
+--------------------*/
+
+/* Form */
+@gutterWidth: 1em;
+@rowDistance: 1em;
+
+/* Text */
+@paragraphMargin: @rowDistance 0em;
+
+/* Field */
+@fieldMargin: 0em 0em @rowDistance;
+
+/* Fields */
+@fieldsMargin: 0em -(@gutterWidth / 2) @rowDistance;
+
+/* Form Label */
+@labelDistance: @4px;
+@labelMargin: 0em 0em @labelDistance 0em;
+@labelFontSize: @relativeSmall;
+@labelFontWeight: @bold;
+@labelTextTransform: none;
+@labelColor: @textColor;
+
+/* Input */
+@inputFont: @pageFont;
+@inputWidth: 100%;
+@inputFontSize: 1em;
+@inputPadding: (@inputVerticalPadding + ((1em - @inputLineHeight) / 2)) @inputHorizontalPadding;
+@inputBorder: 1px solid @borderColor;
+@inputBorderRadius: @absoluteBorderRadius;
+@inputColor: @textColor;
+@inputTransition:
+  color @defaultDuration @defaultEasing,
+  border-color @defaultDuration @defaultEasing
+;
+@inputBoxShadow: 0em 0em 0em 0em transparent inset;
+
+/* Select */
+@selectBackground: @white;
+@selectBorderRadius: @inputBorderRadius;
+@selectBorder: @inputBorder;
+@selectPadding: 0.62em @inputHorizontalPadding;
+@selectBoxShadow: @inputBoxShadow;
+@selectTransition: @inputTransition;
+@selectColor: @inputColor;
+
+/* Text Area */
+@textAreaPadding: @inputVerticalPadding @inputHorizontalPadding;
+@textAreaHeight: 12em;
+@textAreaResize: vertical;
+@textAreaLineHeight: 1.2857;
+@textAreaMinHeight: 8em;
+@textAreaMaxHeight: 24em;
+@textAreaBackground: @inputBackground;
+@textAreaBorder: @inputBorder;
+@textAreaFontSize: @inputFontSize;
+@textAreaTransition: @inputTransition;
+
+/* Checkbox */
+@checkboxVerticalAlign: top;
+@checkboxLabelFontSize: 1em;
+@checkboxLabelTextTransform: @labelTextTransform;
+
+/* Inline Validation Prompt */
+@promptBackground: @white;
+@promptBorderColor: @formErrorBorder;
+@promptBorder: 1px solid @promptBorderColor;
+@promptTextColor: @formErrorColor;
+@inlinePromptMargin: -0.25em 0em -0.5em 0.5em;
+@inlinePromptBorderWidth: 1px;
+
+/*-------------------
+        States
+--------------------*/
+
+/* Focus */
+@inputFocusPointerSize: 0px;
+
+/* Input Focus */
+@inputFocusBackground: @inputBackground;
+@inputFocusBorderColor: @focusedFormBorderColor;
+@inputFocusColor: @selectedTextColor;
+@inputFocusBoxShadow: @inputFocusPointerSize 0em 0em 0em @selectedBorderColor inset;
+@inputFocusBorderRadius: @inputBorderRadius;
+
+/* Text Area Focus */
+@textAreaFocusBackground: @inputFocusBackground;
+@textAreaFocusBorderColor: @inputFocusBorderColor;
+@textAreaFocusColor: @inputFocusColor;
+@textAreaFocusBoxShadow: @inputFocusBoxShadow;
+@textAreaFocusBorderRadius: @inputFocusBorderRadius;
+
+/* Disabled */
+@disabledLabelOpacity: @disabledOpacity;
+
+/* Errored Input */
+@formErrorColor: @negativeTextColor;
+@formErrorBorder: @negativeBorderColor;
+@formErrorBackground: @negativeBackgroundColor;
+
+/* AutoFill */
+@inputAutoFillBackground: #FFFFF0;
+@inputAutoFillBorder: #E5DFA1;
+@inputAutoFillFocusBackground: @inputAutoFillBackground;
+@inputAutoFillFocusBorder: #D5C315;
+@inputAutoFillErrorBackground: #FFFAF0;
+@inputAutoFillErrorBorder: #E0B4B4;
+
+
+/* Input Error */
+@inputErrorBorderRadius: '';
+@inputErrorBoxShadow: none;
+
+/* Dropdown Error */
+@dropdownErrorHoverBackground: #FBE7E7;
+@dropdownErrorSelectedBackground: @dropdownErrorHoverBackground;
+@dropdownErrorActiveBackground: #FDCFCF;
+@dropdownErrorLabelBackground: #EACBCB;
+@dropdownErrorLabelColor: @errorTextColor;
+
+/* Focused Error */
+@inputErrorFocusBackground: @negativeBackgroundColor;
+@inputErrorFocusColor: @negativeTextColor;
+@inputErrorFocusBorder: @negativeBorderColor;
+@inputErrorFocusBoxShadow: none;
+
+/* Placeholder Error */
+@inputErrorPlaceholderColor: lighten(@formErrorColor, 40);
+@inputErrorPlaceholderFocusColor: lighten(@formErrorColor, 30);
+
+/* Loading Dimmer */
+@loaderDimmerColor: rgba(255, 255, 255, 0.8);
+@loaderDimmerZIndex: 100;
+
+/* Loading Spinner */
+@loaderSize: 3em;
+@loaderLineZIndex: 101;
+
+/*-------------------
+        Types
+--------------------*/
+
+/* Required */
+@requiredContent: '*';
+@requiredColor: @negativeColor;
+@requiredVerticalOffset: -0.2em;
+@requiredDistance: 0.2em;
+@requiredMargin: @requiredVerticalOffset 0em 0em @requiredDistance;
+
+/* Inverted */
+@invertedInputBackground: @inputBackground;
+@invertedInputBorderColor: @whiteBorderColor;
+@invertedInputBoxShadow: @inputBoxShadow;
+@invertedInputColor: @inputColor;
+@invertedLabelColor: @invertedTextColor;
+@invertedInputBoxShadow: none;
+
+/*-------------------
+      Variations
+--------------------*/
+
+/* Grouped Fields */
+@groupedMargin: @fieldMargin;
+@groupedFieldMargin: 0.5em 0em;
+
+@groupedLabelDistance: @labelDistance;
+@groupedLabelColor: @labelColor;
+@groupedLabelMargin: @labelMargin;
+@groupedLabelFontSize: @labelFontSize;
+@groupedLabelFontWeight: @labelFontWeight;
+@groupedLabelTextTransform: @labelTextTransform;
+
+
+/* Inline */
+@inlineInputSize: @relativeMedium;
+
+@inlineLabelDistance: @relativeTiny;
+@inlineLabelColor: @labelColor;
+@inlineLabelFontSize: @labelFontSize;
+@inlineLabelFontWeight: @labelFontWeight;
+@inlineLabelTextTransform: @labelTextTransform;
+
+@groupedInlineLabelMargin: 0.035714em 1em 0em 0em;
+
+/*-------------------
+       Groups
+--------------------*/
+
+@inlineFieldsMargin: 0em 1em 0em 0em;

package/src/css/themes/default/collections/grid.overrides

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

package/src/css/themes/default/collections/grid.variables

@@ -0,0 +1,103 @@
+/*******************************
+             Grid
+*******************************/
+
+/* Inherited From Site */
+
+// @mobileBreakpoint
+// @tabletBreakpoint
+// @computerBreakpoint
+// @largeMonitorBreakpoint
+// @widescreenMonitorBreakpoint
+
+/*******************************
+            Grid
+*******************************/
+
+@minWidth: 320px;
+
+@gutterWidth: 2rem;
+@rowSpacing: 2rem;
+
+@tableWidth: ~"calc(100% + "@gutterWidth~")";
+@columnMaxImageWidth: 100%;
+
+@consecutiveGridDistance: (@rowSpacing / 2);
+
+/*******************************
+           Variations
+*******************************/
+
+/*--------------
+     Relaxed
+---------------*/
+
+@relaxedGutterWidth: 3rem;
+@veryRelaxedGutterWidth: 5rem;
+
+/*--------------
+     Divided
+---------------*/
+
+@dividedBorder: -1px 0px 0px 0px @borderColor;
+@verticallyDividedBorder: 0px -1px 0px 0px @borderColor;
+
+@dividedInvertedBorder: -1px 0px 0px 0px @whiteBorderColor;
+@verticallyDividedInvertedBorder: 0px -1px 0px 0px @whiteBorderColor;
+
+/*--------------
+    Celled
+---------------*/
+
+@celledMargin: 1em 0em;
+@celledWidth: 1px;
+@celledBorderColor: @solidBorderColor;
+
+@celledPadding: 1em;
+@celledRelaxedPadding: 1.5em;
+@celledVeryRelaxedPadding: 2em;
+
+@celledGridDivider: 0px 0px 0px @celledWidth @celledBorderColor;
+@celledRowDivider: 0px (-@celledWidth) 0px 0px @celledBorderColor;
+@celledColumnDivider: (-@celledWidth) 0px 0px 0px @celledBorderColor;
+
+
+/*--------------
+    Stackable
+---------------*/
+
+@stackableRowSpacing: @rowSpacing;
+@stackableGutter: @gutterWidth;
+@stackableMobileBorder: 1px solid @borderColor;
+@stackableInvertedMobileBorder: 1px solid @whiteBorderColor;
+
+
+/*******************************
+             Legacy
+*******************************/
+
+/*--------------
+     Page
+---------------*/
+
+/* Legacy (DO NOT USE)
+ */
+@mobileWidth: auto;
+@mobileMargin: 0em;
+@mobileGutter: 0em;
+
+@tabletWidth: auto;
+@tabletMargin: 0em;
+@tabletGutter: 2em;
+
+@computerWidth: auto;
+@computerMargin: 0em;
+@computerGutter: 3%;
+
+@largeMonitorWidth: auto;
+@largeMonitorMargin: 0em;
+@largeMonitorGutter: 15%;
+
+@widescreenMonitorWidth: auto;
+@widescreenMargin: 0em;
+@widescreenMonitorGutter: 23%;

package/src/css/themes/default/collections/menu.overrides

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