Adds new basic table theme

fomantic · Oct 29, 2014 · 11b1bd2 · 11b1bd2
1 parent be9ccad
commit 11b1bd2
Show file tree

Hide file tree

Showing 6 changed files with 65 additions and 33 deletions.
diff --git a/src/definitions/collections/table.less b/src/definitions/collections/table.less
@@ -118,6 +118,7 @@
 /* Table Cells */
 .ui.table td {
   padding: @cellVerticalPadding @cellHorizontalPadding;
+  text-align: @cellTextAlign;
   vertical-align: @cellVerticalAlign;
 }
 

diff --git a/src/definitions/globals/site.less b/src/definitions/globals/site.less
@@ -33,20 +33,22 @@
 html,
 body {
   height: 100%;
-  font-size: @fontSize;
-  font-smoothing: @fontSmoothing;
 }
 
+html {
+  font-size: @emSize;
+}
 
 body {
   margin: 0px;
   padding: 0px;
   min-width: @pageMinWidth;
   background: @pageBackground;
-
   font-family: @pageFont;
+  font-size: @fontSize;
   line-height: @lineHeight;
   color: @textColor;
+  font-smoothing: @fontSmoothing;
   overflow-x: @pageOverflowX;
 }
 

diff --git a/src/themes/basic/collections/table.overrides b/src/themes/basic/collections/table.overrides
@@ -0,0 +1,4 @@
+/*******************************
+           Overrides
+*******************************/
+
diff --git a/src/themes/basic/collections/table.variables b/src/themes/basic/collections/table.variables
@@ -0,0 +1,10 @@
+/*-------------------
+   Table Variables
+--------------------*/
+
+@headerBackground: @white;
+
+@cellVerticalPadding: 1em;
+@cellHorizontalPadding: 1em;
+
+@stateMarkerWidth: 1px;
diff --git a/src/themes/default/collections/table.variables b/src/themes/default/collections/table.variables
@@ -17,6 +17,7 @@
 @borderColor: #D0D0D0;
 @border: @borderWidth solid @borderColor;
 @boxShadow: none;
+@textAlign: left;
 
 /*-------------------
        Types
@@ -49,13 +50,14 @@
 @cellVerticalPadding: 0.7em;
 @cellHorizontalPadding: 0.8em;
 @cellVerticalAlign: middle;
+@cellTextAlign: @textAlign;
 @cellBorder: 1px solid @solidBorderColor;
 
 /* Table Header */
 @headerBorder: 1px solid @solidBorderColor;
 @headerDivider: none;
 @headerBackground: @darkWhite;
-@headerAlign: left;
+@headerAlign: @textAlign;
 @headerVerticalAlign: middle;
 @headerColor: @textColor;
 @headerVerticalPadding: @cellVerticalPadding;
@@ -70,7 +72,7 @@
 @footerBorder: 1px solid @solidBorderColor;
 @footerDivider: none;
 @footerBackground: @white;
-@footerAlign: left;
+@footerAlign: @textAlign;
 @footerVerticalAlign: middle;
 @footerColor: @textColor;
 @footerVerticalPadding: @cellVerticalPadding;

diff --git a/src/themes/default/globals/site.variables b/src/themes/default/globals/site.variables
@@ -14,6 +14,13 @@
 @googleFontName    : 'Lato';
 @googleFontSizes   : '400,700,400italic,700italic';
 
+/*-------------------
+      Base Sizes
+--------------------*/
+
+@emSize:     : 14px;
+@fontSize    : 14px;
+
 /*-------------------
       Site Colors
 --------------------*/
@@ -32,24 +39,24 @@
 @grey             : #CCCCCC;
 @white            : #FFFFFF;
 
-/*---  Light Colors  ---*/
-
-@lightBlack:      : #CCCCCC;
-@lightBlue        : #54C8FF;
-@lightGreen       : #2ECC40;
-@lightOrange      : #FF851B;
-@lightPink        : #FF8EDF;
-@lightPurple      : #CDC6FF;
-@lightRed         : #FF695E;
-@lightTeal        : #6DFFFF;
-@lightYellow      : #FFE21F;
-
 /*---  Brand Colors  ---*/
 @primaryColor        : @blue;
 @secondaryColor      : @black;
 
-@lightPrimaryColor   : @lightBlue;
-@lightSecondaryColor : @lightBlack;
+
+/*-------------------
+        Sizes
+--------------------*/
+
+/* Exact pixel values @ 14px em */
+@mini        : 0.7142rem;
+@tiny        : 0.8571rem;
+@small       : 0.9285rem;
+@medium      : 1rem;
+@large       : 1.1428rem;
+@big         : 1.2857rem;
+@huge        : 1.4285rem;
+@massive     : 1.7142rem;
 
 /*-------------------
         Page
@@ -84,6 +91,25 @@
 @transparentWhite       : rgba(255, 255, 255, 0.05);
 @strongTransparentWhite : rgba(255, 255, 255, 0.07);
 
+/*-------------------
+      Extra Colors
+--------------------*/
+
+/*---  Light Colors  ---*/
+
+@lightBlack:      : #CCCCCC;
+@lightBlue        : #54C8FF;
+@lightGreen       : #2ECC40;
+@lightOrange      : #FF851B;
+@lightPink        : #FF8EDF;
+@lightPurple      : #CDC6FF;
+@lightRed         : #FF695E;
+@lightTeal        : #6DFFFF;
+@lightYellow      : #FFE21F;
+
+@lightPrimaryColor   : @lightBlue;
+@lightSecondaryColor : @lightBlack;
+
 /*-------------------
        Loader
 --------------------*/
@@ -99,7 +125,7 @@
        Accents
 --------------------*/
 
-/* 4px @ 14px */
+/* 4px @ default em */
 @relativeBorderRadius: 0.2857em;
 @absoluteBorderRadius: 0.2857rem;
 @defaultBorderRadius: @absoluteBorderRadius;
@@ -276,19 +302,6 @@
 @solidWhiteBorderColor         : #555555;
 @selectedSolidWhiteBorderColor : #999999;
 
-/*-------------------
-        Sizes
---------------------*/
-
-@mini        : 0.7142rem;
-@tiny        : 0.8571rem;
-@small       : 0.9285rem;
-@medium      : 1rem;
-@large       : 1.1428rem;
-@big         : 1.2857rem;
-@huge        : 1.4285rem;
-@massive     : 1.7142rem;
-
 
 /*-------------------
      Transitions