@performant-software/semantic-components 0.5.2 → 0.5.5

package/src/css/themes/default/views/statistic.variables

@@ -0,0 +1,99 @@
+/*******************************
+           Statistic
+*******************************/
+
+/*-------------------
+         View
+--------------------*/
+
+@verticalMargin: 1em;
+@margin: @verticalMargin 0em;
+@textAlign: center;
+@maxWidth: auto;
+
+/* Group */
+@horizontalSpacing: 1.5em;
+@rowSpacing: 1em;
+@groupMargin: @verticalMargin -@horizontalSpacing -@rowSpacing;
+
+/* Group Element */
+@elementMargin: 0em @horizontalSpacing @rowSpacing;
+@elementMaxWidth: @maxWidth;
+
+/*-------------------
+       Content
+--------------------*/
+
+/* Value */
+@valueFont: @pageFont;
+@valueFontWeight: @normal;
+@valueLineHeight: 1em;
+@valueColor: @black;
+@valueTextTransform: uppercase;
+
+/* Label */
+@labelSize: @relativeMedium;
+@topLabelDistance: 0rem;
+@bottomLabelDistance: 0rem;
+@labelFont: @headerFont;
+@labelFontWeight: @bold;
+@labelColor: @textColor;
+@labelLineHeight: @relativeLarge;
+@labelTextTransform: uppercase;
+
+/* Text */
+@textValueLineHeight: 1em;
+@textValueMinHeight: 2em;
+@textValueFontWeight: @bold;
+
+/* Label Image */
+@imageHeight: 3rem;
+@imageVerticalAlign: baseline;
+
+/*-------------------
+      Types
+--------------------*/
+
+@horizontalGroupElementMargin: 1em 0em;
+@horizontalLabelDistance: 0.75em;
+
+/*-------------------
+      Variations
+--------------------*/
+
+/* Floated */
+@leftFloatedMargin: 0em 2em 1em 0em;
+@rightFloatedMargin: 0em 0em 1em 2em;
+
+/* Inverted */
+@invertedValueColor: @white;
+@invertedLabelColor: @invertedTextColor;
+
+/* Item Width */
+@itemGroupMargin: 0em 0em -@rowSpacing;
+@itemMargin: 0em 0em @rowSpacing;
+
+/* Size */
+@miniTextValueSize: 1rem;
+@miniValueSize: 1.5rem;
+@miniHorizontalValueSize: 1.5rem;
+
+@tinyTextValueSize: 1rem;
+@tinyValueSize: 2rem;
+@tinyHorizontalValueSize: 2rem;
+
+@smallTextValueSize: 1rem;
+@smallValueSize: 3rem;
+@smallHorizontalValueSize: 2rem;
+
+@textValueSize: 2rem;
+@valueSize: 4rem;
+@horizontalValueSize: 3rem;
+
+@largeTextValueSize: 2.5rem;
+@largeValueSize: 5rem;
+@largeHorizontalValueSize: 4rem;
+
+@hugeTextValueSize: 2.5rem;
+@hugeValueSize: 6rem;
+@hugeHorizontalValueSize: 5rem;

package/src/css/themes/duo/elements/loader.overrides

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

package/src/css/themes/duo/elements/loader.variables

@@ -0,0 +1,6 @@
+/*******************************
+             Loader
+*******************************/
+
+@shapeBorderColor: @primaryColor @primaryColor @secondaryColor @secondaryColor;
+@invertedShapeBorderColor: @lightPrimaryColor @lightPrimaryColor @lightSecondaryColor @lightSecondaryColor;

package/src/css/themes/fixed-width/collections/grid.overrides

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

package/src/css/themes/fixed-width/collections/grid.variables

@@ -0,0 +1,23 @@
+/* Fixed Page Grid */
+
+@mobileWidth: auto;
+@mobileMargin: 0em;
+@mobileGutter: 0em;
+
+@tabletWidth: auto;
+@tabletMargin: 0em;
+@tabletGutter: 8%;
+
+@computerWidth: 960px;
+@computerMargin: auto;
+@computerGutter: 0;
+
+@largeMonitorWidth: 1180px;
+@largeMonitorMargin: auto;
+@largeMonitorGutter: 0;
+
+@widescreenMonitorWidth: 1300px;
+@widescreenMargin: auto;
+@widescreenMonitorGutter: 0;
+
+@tableWidth: '';

package/src/css/themes/fixed-width/modules/modal.overrides

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

package/src/css/themes/fixed-width/modules/modal.variables

@@ -0,0 +1,37 @@
+
+/* Responsive Widths */
+@modalComputerWidth: 700px;
+@modalLargeMonitorWidth: 800px;
+@modalWidescreenMonitorWidth: 850px;
+
+@modalComputerMargin: 0em 0em 0em -(@modalComputerWidth / 2);
+@modalLargeMonitorMargin: 0em 0em 0em -(@modalLargeMonitorWidth / 2);
+@modalWidescreenMonitorMargin: 0em 0em 0em -(@modalWidescreenMonitorWidth / 2);
+
+
+/*-------------------
+      Variations
+--------------------*/
+
+/* Sizes */
+@modalSmallRatio: 0.6;
+@modalLargeRatio: 1.2;
+
+/* Derived Responsive Sizes */
+@modalSmallHeaderSize: 1.3em;
+@modalSmallComputerWidth: (@modalComputerWidth * @modalSmallRatio);
+@modalSmallLargeMonitorWidth: (@modalLargeMonitorWidth * @modalSmallRatio);
+@modalSmallWidescreenMonitorWidth: (@modalWidescreenMonitorWidth * @modalSmallRatio);
+
+@modalSmallComputerMargin: 0em 0em 0em -(@modalSmallComputerWidth / 2);
+@modalSmallLargeMonitorMargin: 0em 0em 0em -(@modalSmallLargeMonitorWidth / 2);
+@modalSmallWidescreenMonitorMargin: 0em 0em 0em -(@modalSmallWidescreenMonitorWidth / 2);
+
+@modalLargeHeaderSize: 1.3em;
+@modalLargeComputerWidth: (@modalComputerWidth * @modalLargeRatio);
+@modalLargeLargeMonitorWidth: (@modalLargeMonitorWidth * @modalLargeRatio);
+@modalLargeWidescreenMonitorWidth: (@modalWidescreenMonitorWidth * @modalLargeRatio);
+
+@modalLargeComputerMargin: 0em 0em 0em -(@modalLargeComputerWidth / 2);
+@modalLargeLargeMonitorMargin: 0em 0em 0em -(@modalLargeLargeMonitorWidth / 2);
+@modalLargeWidescreenMonitorMargin: 0em 0em 0em -(@modalLargeWidescreenMonitorWidth / 2);

package/src/css/themes/flat/collections/form.overrides

@@ -0,0 +1,28 @@
+/*******************************
+           Overrides
+*******************************/
+
+.ui.form input[type="text"],
+.ui.form input[type="email"],
+.ui.form input[type="date"],
+.ui.form input[type="password"],
+.ui.form input[type="number"],
+.ui.form input[type="url"],
+.ui.form input[type="tel"] {
+  border-bottom: 1px solid #DDDDDD;
+}
+
+.ui.form .selection.dropdown {
+  border: none;
+  box-shadow: none !important;
+  border-bottom: 1px solid #DDDDDD;
+  border-radius: 0em !important;
+}
+.ui.form .selection.dropdown > .menu {
+  border-top-width: 1px !important;
+  border-radius: @defaultBorderRadius !important;
+}
+
+.ui.form .ui.icon.input > .icon {
+  width: 1em;
+}

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

@@ -0,0 +1,74 @@
+/*******************************
+             Form
+*******************************/
+
+/*-------------------
+       Elements
+--------------------*/
+
+
+/* Text */
+@paragraphMargin: 1em 0em;
+
+/* Field */
+@fieldMargin: 0em 0em 1em;
+
+/* Form Label */
+@labelFontSize: @relative11px;
+@labelTextTransform: uppercase;
+
+@groupedLabelTextTransform: none;
+
+/* Input */
+@inputHorizontalPadding: 0.5em;
+@inputBackground: transparent;
+@inputBorder: none;
+@inputBorderRadius: 0em;
+@inputBoxShadow: none;
+@invertedInputColor: @invertedTextColor;
+
+@textAreaPadding: 1em;
+@textAreaBackground: transparent;
+@textAreaFocusBackground: #EEEEEE;
+@textAreaBorder: 1px solid #DDDDDD;
+
+/* Divider */
+@dividerMargin: 1em 0em;
+
+/* Validation Prompt */
+@validationMargin: 0em 0em 0em 1em;
+@validationArrowOffset: -0.3em;
+
+/*-------------------
+        States
+--------------------*/
+
+/* Disabled */
+
+/* Focus */
+@inputFocusPointerSize: 0px;
+@inputErrorPointerSize: 0px;
+
+/* Dropdown Error */
+@dropdownErrorHoverBackground: #FFF2F2;
+@dropdownErrorActiveBackground: #FDCFCF;
+
+/* Focused Error */
+@inputErrorFocusBackground: @negativeBackgroundColor;
+@inputErrorFocusColor: @negativeColorHover;
+@inputErrorFocusBorder: @negativeBorderColor;
+@inputErrorFocusBoxShadow: @inputErrorPointerSize 0em 0em 0em @negativeColorHover inset;
+
+/* Placeholder */
+@inputPlaceholderColor: lighten(@inputColor, 55);
+@inputPlaceholderFocusColor: lighten(@inputColor, 35);
+@inputErrorPlaceholderColor: lighten(@formErrorColor, 10);
+@inputErrorPlaceholderFocusColor: lighten(@formErrorColor, 5);
+
+/* Loading */
+@formLoaderDimmerColor: rgba(255, 255, 255, 0.6);
+@formLoaderPath: "@{imagePath}/loader-large.gif";
+@formLoaderPosition: 50% 50%;
+
+/* (x) Wide Field */
+@gutterWidth: 1.5em;

package/src/css/themes/flat/globals/site.overrides

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

package/src/css/themes/flat/globals/site.variables

@@ -0,0 +1,107 @@
+/*******************************
+         Site Settings
+*******************************/
+
+/*-------------------
+        Paths
+--------------------*/
+
+@imagePath : "../../themes/default/assets/images";
+@fontPath  : "../../themes/default/assets/fonts";
+
+/*-------------------
+       Fonts
+--------------------*/
+
+@headerFont    : "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
+@pageFont      : "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
+@fontSmoothing : antialiased;
+
+/*-------------------
+      Site Colors
+--------------------*/
+
+/*---  Colors  ---*/
+@blue             : #0074D9;
+@green            : #2ECC40;
+@orange           : #FF851B;
+@pink             : #D9499A;
+@purple           : #A24096;
+@red              : #FF4136;
+@teal             : #39CCCC;
+@yellow           : #FFCB08;
+
+@black            : #191919;
+@grey             : #CCCCCC;
+@white            : #FFFFFF;
+
+/*---  Light Colors  ---*/
+@lightBlue        : #54C8FF;
+@lightGreen       : #2ECC40;
+@lightOrange      : #FF851B;
+@lightPink        : #FF8EDF;
+@lightPurple      : #CDC6FF;
+@lightRed         : #FF695E;
+@lightTeal        : #6DFFFF;
+@lightYellow      : #FFE21F;
+
+@primaryColor     : @blue;
+@secondaryColor   : @black;
+
+
+/*-------------------
+        Page
+--------------------*/
+
+@bodyBackground      : #FCFCFC;
+@fontSize            : 14px;
+@textColor           : rgba(0, 0, 0, 0.8);
+
+@headerMargin        : 1em 0em 1rem;
+@paragraphMargin     : 0em 0em 1em;
+
+@linkColor           : #009FDA;
+@linkUnderline       : none;
+@linkHoverColor      : lighten( @linkColor, 5);
+@linkHoverUnderline  : @linkUnderline;
+
+@highlightBackground : #FFFFCC;
+@highlightColor      : @textColor;
+
+
+
+/*-------------------
+  Background Colors
+--------------------*/
+
+@subtleTransparentBlack : rgba(0, 0, 0, 0.03);
+@transparentBlack       : rgba(0, 0, 0, 0.05);
+@strongTransparentBlack : rgba(0, 0, 0, 0.10);
+
+@subtleTransparentWhite : rgba(255, 255, 255, 0.01);
+@transparentWhite       : rgba(255, 255, 255, 0.05);
+@strongTransparentWhite : rgba(255, 255, 255, 0.01);
+
+/* Used for differentiating neutrals */
+@subtleGradient: linear-gradient(transparent, rgba(0, 0, 0, 0.05));
+
+/* Used for differentiating layers */
+@subtleShadow: 0px 1px 2px 0 rgba(0, 0, 0, 0.05);
+
+
+/*-------------------
+        Grid
+--------------------*/
+
+@columnCount: 16;
+
+/*-------------------
+     Breakpoints
+--------------------*/
+
+@mobileBreakpoint            : 320px;
+@tabletBreakpoint            : 768px;
+@computerBreakpoint          : 992px;
+@largeMonitorBreakpoint      : 1400px;
+@widescreenMonitorBreakpoint : 1900px;
+