Initial commit of trying to rework header sizes

Semantic-Org · Oct 1, 2014 · 4035d5e · 4035d5e
1 parent 415f658
commit 4035d5e
Show file tree

Hide file tree

Showing 63 changed files with 11,932 additions and 972 deletions.
diff --git a/RELEASE NOTES.md b/RELEASE NOTES.md
@@ -7,6 +7,7 @@
 - **Form** - Date field has been removed, use a ``ui icon input`` with a ``calendar icon`` instead
 - **Label** - Corner labels no longer support text, only icons.
 - **Form** - Standard grids now have gutters on left and right of first and last column. ``ui fitted grid`` can be used to remove these margins
+- **Header** - Header sizes have been greatly adjusted, you may need to retool header sizes for ``h1-6`` from ``0.x.x`` sites
 - **Checkbox** - Checkbox "enable" and "disable" have been replaced with "check" and "uncheck"
 - **Modal** - Modal ``left`` and ``right`` sections are now replaced with ``image`` and ``description``
 - **Accordion** - Accordions are not unstyled by default allowing for more compatability with other modules without having to override styles. Styled accordions are now included as a variation ``ui styled accordion``

diff --git a/build/less/definitions/elements/input.less b/build/less/definitions/elements/input.less
@@ -200,16 +200,16 @@
 }
 
 /* Left Icon Input */
-.ui.left.icon.input > .icon {
+.ui[class*="left icon"].input > .icon {
   right: auto;
   left: @borderWidth;
   border-radius: @borderRadius 0em 0em @borderRadius;
 }
-.ui.left.icon.input > .circular.icon {
+.ui[class*="left icon"].input > .circular.icon {
   right: auto;
   left: @circularIconHorizontalOffset;
 }
-.ui.left.icon.input > input {
+.ui[class*="left icon"].input > input {
   padding-left: @iconMargin !important;
   padding-right: @horizontalPadding !important;
 }
@@ -222,7 +222,7 @@
   padding-left: 0em !important;
   padding-right: @transparentIconMargin !important;
 }
-.ui.transparent.left.icon.input > input {
+.ui.transparent[class*="left icon"].input > input {
   padding-left: 0em !important;
   padding-left: @transparentIconMargin !important;
 }
@@ -266,16 +266,11 @@
 .ui.action.input > input {
   display: table-cell;
   vertical-align: top;
-  border-top-right-radius: 0px !important;
-  border-bottom-right-radius: 0px !important;
-  border-right: none;
 }
 .ui.action.input > .button,
 .ui.action.input > .buttons {
   display: table-cell;
   vertical-align: top;
-  border-top-left-radius: 0px;
-  border-bottom-left-radius: 0px;
   white-space: nowrap;
 }
 .ui.action.input > .button > .icon,
@@ -292,6 +287,30 @@
   width: 0.01%;
 }
 
+/* Button on Right */
+.ui.action.input:not([class*="left action"]) > input {
+  border-right: none;
+  border-top-right-radius: 0px !important;
+  border-bottom-right-radius: 0px !important;
+}
+.ui.action.input:not([class*="left action"]) > .button,
+.ui.action.input:not([class*="left action"]) > .buttons {
+  border-top-left-radius: 0px;
+  border-bottom-left-radius: 0px;
+}
+
+/* Button on Left */
+.ui[class*="left action"].input > .button,
+.ui[class*="left action"].input > .buttons {
+  border-top-right-radius: 0px;
+  border-bottom-right-radius: 0px;
+}
+.ui[class*="left action"].input  > input {
+  border-left: none;
+  border-top-left-radius: 0px;
+  border-bottom-left-radius: 0px;
+}
+
 /*--------------------
         Fluid
 ---------------------*/

diff --git a/build/less/definitions/globals/site.less b/build/less/definitions/globals/site.less
@@ -22,7 +22,7 @@
            Web Fonts
 *******************************/
 
-.loadFonts() when (@useGoogleFonts) {
+.loadFonts() when (@importGoogleFonts) {
   @import (css) 'http://fonts.googleapis.com/css?family=@{googleFontName}:@{googleFontSizes}';
 }
 .loadFonts();

diff --git a/build/less/themes/packages/basic/globals/reset.overrides b/build/less/themes/packages/basic/globals/reset.overrides
@@ -0,0 +1,5 @@
+/*******************************
+           Overrides
+*******************************/
+
+/* No Additonal Resets */
diff --git a/build/less/themes/packages/basic/globals/reset.variables b/build/less/themes/packages/basic/globals/reset.variables
@@ -0,0 +1,3 @@
+/*******************************
+             Reset
+*******************************/
diff --git a/build/less/themes/packages/default/elements/icon.overrides b/build/less/themes/packages/default/elements/icon.overrides
@@ -564,6 +564,7 @@ i.icon.minimize:before { content: "\f066"; }
 i.icon.add:before { content: "\f067"; }
 i.icon.eye:before { content: "\f06e"; }
 i.icon.attention:before { content: "\f06a"; }
+i.icon.cart:before { content: "\f07a"; }
 i.icon.plane:before { content: "\f072"; }
 i.icon.shuffle:before { content: "\f074"; }
 i.icon.talk:before { content: "\f075"; }

diff --git a/build/less/themes/packages/default/globals/site.variables b/build/less/themes/packages/default/globals/site.variables
@@ -13,13 +13,13 @@
        Fonts
 --------------------*/
 
-@headerFont      : 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
-@pageFont        : 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
-@fontSmoothing   : antialiased;
+@headerFont        : 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+@pageFont          : 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+@fontSmoothing     : antialiased;
 
-@useGoogleFonts  : true;
-@googleFontName  : 'Lato';
-@googleFontSizes : '300,400,700,300italic,400italic,700italic';
+@importGoogleFonts : true;
+@googleFontName    : 'Lato';
+@googleFontSizes   : '300,400,700,300italic,400italic,700italic';
 
 /*-------------------
       Site Colors
@@ -52,7 +52,6 @@
 @primaryColor     : @blue;
 @secondaryColor   : @black;
 
-
 /*-------------------
         Page
 --------------------*/
@@ -65,22 +64,16 @@
 @fontSize            : 14px;
 @textColor           : rgba(0, 0, 0, 0.8);
 
-@pageMinWidth        : (320px - (@fontSize * 3));
-
 @headerMargin        : 1em 0em 1rem;
 @paragraphMargin     : 0em 0em 1em;
 
 @linkColor           : #009FDA;
 @linkUnderline       : none;
 @linkHoverColor      : lighten( @linkColor, 5);
 
-@highlightBackground : #FFFFCC;
+@highlightBackground : rgba(255, 255, 160, 0.4);
 @highlightColor      : @textColor;
 
-/* Used to match floats with text */
-@lineHeightOffset    : ((@lineHeight - 1em) / 2);
-
-
 /*-------------------
   Background Colors
 --------------------*/
@@ -116,9 +109,6 @@
 @largeMonitorBreakpoint      : 1400px;
 @widescreenMonitorBreakpoint : 1920px;
 
-@largestMobileScreen         : (@tabletBreakpoint - 1px);
-@largestTabletScreen         : (@computerBreakpoint - 1px);
-
 
 /*******************************
            Power-User
@@ -203,26 +193,13 @@
 
 @infoBackgroundColor    : #E5F6FB;
 @warningBackgroundColor : #FCF8E3;
-@successBackgroundColor : @positiveBackgroundColor;
-@errorBackgroundColor   : @negativeBackgroundColor;
 
 @infoBorderColor        : #AAD6DF;
 @warningBorderColor     : #D3C4A5;
-@successBorderColor     : @positiveBorderColor;
-@errorBorderColor       : @negativeBorderColor;
+@warningTextColor       : #8A6D3B;
 
 @infoTextColor          : #337B92;
-@warningTextColor       : #8A6D3B;
-@successTextColor       : @positiveTextColor;
-@errorTextColor         : @negativeTextColor;
 
-/* Darkened Headers */
-@positiveHeaderColor : darken(@positiveTextColor, 5);
-@negativeHeaderColor : darken(@negativeTextColor, 5);
-@infoHeaderColor     : darken(@infoTextColor, 5);
-@warningHeaderColor  : darken(@warningTextColor, 5);
-@successHeaderColor  : darken(@successTextColor, 5);
-@errorHeaderColor    : darken(@errorTextColor, 5);
 
 /*-------------------
      Neutral Text
@@ -258,44 +235,6 @@
 @pinterestColor  : #00ACED;
 @vkColor         : #4D7198;
 
-/*-------------------
-    Grid Columns
---------------------*/
-
-@oneWide        : (1 / @columnCount * 100%);
-@twoWide        : (2 / @columnCount * 100%);
-@threeWide      : (3 / @columnCount * 100%);
-@fourWide       : (4 / @columnCount * 100%);
-@fiveWide       : (5 / @columnCount * 100%);
-@sixWide        : (6 / @columnCount * 100%);
-@sevenWide      : (7 / @columnCount * 100%);
-@eightWide      : (8 / @columnCount * 100%);
-@nineWide       : (9 / @columnCount * 100%);
-@tenWide        : (10 / @columnCount * 100%);
-@elevenWide     : (11 / @columnCount * 100%);
-@twelveWide     : (12 / @columnCount * 100%);
-@thirteenWide   : (13 / @columnCount * 100%);
-@fourteenWide   : (14 / @columnCount * 100%);
-@fifteenWide    : (15 / @columnCount * 100%);
-@sixteenWide    : (16 / @columnCount * 100%);
-
-@oneColumn      : (1 / 1 * 100%);
-@twoColumn      : (1 / 2 * 100%);
-@threeColumn    : (1 / 3 * 100%);
-@fourColumn     : (1 / 4 * 100%);
-@fiveColumn     : (1 / 5 * 100%);
-@sixColumn      : (1 / 6 * 100%);
-@sevenColumn    : (1 / 7 * 100%);
-@eightColumn    : (1 / 8 * 100%);
-@nineColumn     : (1 / 9 * 100%);
-@tenColumn      : (1 / 10 * 100%);
-@elevenColumn   : (1 / 11 * 100%);
-@twelveColumn   : (1 / 12 * 100%);
-@thirteenColumn : (1 / 13 * 100%);
-@fourteenColumn : (1 / 14 * 100%);
-@fifteenColumn  : (1 / 15 * 100%);
-@sixteenColumn  : (1 / 16 * 100%);
-
 /*-------------------
       Borders
 --------------------*/
@@ -336,6 +275,72 @@
 @transitionEasing   : ease;
 
 
+/*-------------------
+    Derived Values
+--------------------*/
+
+/* Makes sure padded grid can fit at 320px */
+@pageMinWidth        : (320px - (@fontSize * 3));
+
+/* Used to match floats with text */
+@lineHeightOffset    : ((@lineHeight - 1em) / 2);
+
+/* Positive / Negative Dupes */
+@successBackgroundColor : @positiveBackgroundColor;
+@errorBackgroundColor   : @negativeBackgroundColor;
+@successTextColor       : @positiveTextColor;
+@errorTextColor         : @negativeTextColor;
+@successBorderColor     : @positiveBorderColor;
+@errorBorderColor       : @negativeBorderColor;
+
+/* Header Colors */
+@positiveHeaderColor : darken(@positiveTextColor, 5);
+@negativeHeaderColor : darken(@negativeTextColor, 5);
+@infoHeaderColor     : darken(@infoTextColor, 5);
+@warningHeaderColor  : darken(@warningTextColor, 5);
+@successHeaderColor  : darken(@successTextColor, 5);
+@errorHeaderColor    : darken(@errorTextColor, 5);
+
+/* Responsive */
+@largestMobileScreen : (@tabletBreakpoint - 1px);
+@largestTabletScreen : (@computerBreakpoint - 1px);
+
+/* Columns */
+@oneWide        : (1 / @columnCount * 100%);
+@twoWide        : (2 / @columnCount * 100%);
+@threeWide      : (3 / @columnCount * 100%);
+@fourWide       : (4 / @columnCount * 100%);
+@fiveWide       : (5 / @columnCount * 100%);
+@sixWide        : (6 / @columnCount * 100%);
+@sevenWide      : (7 / @columnCount * 100%);
+@eightWide      : (8 / @columnCount * 100%);
+@nineWide       : (9 / @columnCount * 100%);
+@tenWide        : (10 / @columnCount * 100%);
+@elevenWide     : (11 / @columnCount * 100%);
+@twelveWide     : (12 / @columnCount * 100%);
+@thirteenWide   : (13 / @columnCount * 100%);
+@fourteenWide   : (14 / @columnCount * 100%);
+@fifteenWide    : (15 / @columnCount * 100%);
+@sixteenWide    : (16 / @columnCount * 100%);
+
+@oneColumn      : (1 / 1 * 100%);
+@twoColumn      : (1 / 2 * 100%);
+@threeColumn    : (1 / 3 * 100%);
+@fourColumn     : (1 / 4 * 100%);
+@fiveColumn     : (1 / 5 * 100%);
+@sixColumn      : (1 / 6 * 100%);
+@sevenColumn    : (1 / 7 * 100%);
+@eightColumn    : (1 / 8 * 100%);
+@nineColumn     : (1 / 9 * 100%);
+@tenColumn      : (1 / 10 * 100%);
+@elevenColumn   : (1 / 11 * 100%);
+@twelveColumn   : (1 / 12 * 100%);
+@thirteenColumn : (1 / 13 * 100%);
+@fourteenColumn : (1 / 14 * 100%);
+@fifteenColumn  : (1 / 15 * 100%);
+@sixteenColumn  : (1 / 16 * 100%);
+
+
 /*******************************
            States
 *******************************/

diff --git a/build/less/themes/packages/resetcss/global/reset.overrides b/build/less/themes/packages/resetcss/global/reset.overrides
@@ -0,0 +1,52 @@
+/*******************************
+           Overrides
+*******************************/
+
+/**
+ * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
+ * http://cssreset.com
+ */
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol, ul {
+  list-style: none;
+}
+blockquote, q {
+  quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
diff --git a/build/less/themes/packages/resetcss/global/reset.variables b/build/less/themes/packages/resetcss/global/reset.variables
@@ -0,0 +1,3 @@
+/*******************************
+             Reset
+*******************************/
diff --git a/build/minified/definitions/elements/icon.min.css b/build/minified/definitions/elements/icon.min.css