From 6fecacf398eb34718b463f6bb0553163a50dda4a Mon Sep 17 00:00:00 2001 From: jlukic Date: Thu, 12 Mar 2015 18:23:09 -0400 Subject: [PATCH] Fixes basic padded table, adds vertical alignment --- src/definitions/collections/table.less | 22 ++++- src/definitions/elements/divider.less | 3 +- .../default/collections/table.variables | 88 +++++++++---------- src/themes/default/elements/divider.variables | 7 +- 4 files changed, 66 insertions(+), 54 deletions(-) diff --git a/src/definitions/collections/table.less b/src/definitions/collections/table.less index 18cddc40f..487aa60d2 100755 --- a/src/definitions/collections/table.less +++ b/src/definitions/collections/table.less @@ -126,7 +126,6 @@ .ui.table td { padding: @cellVerticalPadding @cellHorizontalPadding; text-align: @cellTextAlign; - vertical-align: @cellVerticalAlign; } /* Icons */ @@ -484,7 +483,7 @@ } /*-------------- - Aligned + Text Alignment ---------------*/ .ui.table[class*="left aligned"], @@ -500,6 +499,23 @@ text-align: right; } +/*------------------ + Vertical Alignment +------------------*/ + +.ui.table[class*="top aligned"], +.ui.table [class*="top aligned"] { + vertical-align: top; +} +.ui.table[class*="center aligned"], +.ui.table [class*="center aligned"] { + vertical-align: middle; +} +.ui.table[class*="bottom aligned"], +.ui.table [class*="bottom aligned"] { + vertical-align: bottom; +} + /*-------------- Collapsing ---------------*/ @@ -909,7 +925,7 @@ } .ui[class*="very basic"].table:not(.sortable):not(.striped) th, .ui[class*="very basic"].table:not(.sortable):not(.striped) td { - padding: @basicTableCellVerticalPadding @basicTableCellHorizontalPadding; + padding: @basicTableCellPadding; } .ui[class*="very basic"].table:not(.sortable):not(.striped) th:first-child, .ui[class*="very basic"].table:not(.sortable):not(.striped) td:first-child { diff --git a/src/definitions/elements/divider.less b/src/definitions/elements/divider.less index c32e9ffbd..5c55ee864 100755 --- a/src/definitions/elements/divider.less +++ b/src/definitions/elements/divider.less @@ -211,9 +211,8 @@ .ui.divider.inverted:after, .ui.divider.inverted:before { border-top-color: @invertedShadowColor !important; - border-bottom-color: @invertedHighlightColor !important; - border-left-color: @invertedShadowColor !important; + border-bottom-color: @invertedHighlightColor !important; border-right-color: @invertedHighlightColor !important; } diff --git a/src/themes/default/collections/table.variables b/src/themes/default/collections/table.variables index fd24bab72..a8f15f6c3 100644 --- a/src/themes/default/collections/table.variables +++ b/src/themes/default/collections/table.variables @@ -9,60 +9,39 @@ @margin: 1em 0em; @borderCollapse: separate; @borderSpacing: 0px; +@borderRadius: @defaultBorderRadius; @transition: background @transitionDuration @transitionEasing, border-color @transitionDuration @transitionEasing, color @transitionDuration @transitionEasing ; -@borderRadius: 0.25rem; -@background: #FFFFFF; +@background: @white; @color: @textColor; @borderWidth: 1px; -@borderColor: #D0D0D0; @border: @borderWidth solid @borderColor; @boxShadow: none; @textAlign: left; -/*------------------- - Types ---------------------*/ - -/* Definition */ -@definitionPageBackground: @white; - -@definitionHeaderBackground: transparent; -@definitionHeaderColor: @unselectedTextColor; -@definitionHeaderFontWeight: normal; - -@definitionFooterBackground: @definitionHeaderBackground; -@definitionFooterColor: @definitionHeaderColor; -@definitionFooterFontWeight: @definitionHeaderFontWeight; - -@definitionColumnBackground: @subtleTransparentBlack; -@definitionColumnColor: @selectedTextColor; -@definitionColumnFontWeight: bold; - - /*-------------- Parts ---------------*/ /* Table Row */ -@rowBorder: 1px solid @solidBorderColor; +@rowBorder: 1px solid @borderColor; /* Table Cell */ -@cellVerticalPadding: 0.7em; -@cellHorizontalPadding: 0.8em; -@cellVerticalAlign: top; -@cellTextAlign: @textAlign; -@cellBorder: 1px solid @solidBorderColor; +@cellVerticalPadding: @relativeMini; +@cellHorizontalPadding: @relativeMini; +@cellVerticalAlign: inherit; +@cellTextAlign: inherit; +@cellBorder: 1px solid @borderColor; /* Table Header */ -@headerBorder: 1px solid @solidBorderColor; +@headerBorder: 1px solid @borderColor; @headerDivider: none; @headerBackground: @darkWhite; -@headerAlign: @textAlign; -@headerVerticalAlign: middle; +@headerAlign: inherit; +@headerVerticalAlign: inherit; @headerColor: @textColor; @headerVerticalPadding: @cellVerticalPadding; @headerHorizontalPadding: @cellHorizontalPadding; @@ -73,10 +52,10 @@ /* Table Footer */ @footerBoxShadow: none; -@footerBorder: 1px solid @solidBorderColor; +@footerBorder: 1px solid @borderColor; @footerDivider: none; @footerBackground: @white; -@footerAlign: @textAlign; +@footerAlign: inherit; @footerVerticalAlign: middle; @footerColor: @textColor; @footerVerticalPadding: @cellVerticalPadding; @@ -95,13 +74,32 @@ @responsiveCellBoxShadow: none !important; @responsiveStatusColor: transparent; +/*------------------- + Types +--------------------*/ + +/* Definition */ +@definitionPageBackground: @white; + +@definitionHeaderBackground: transparent; +@definitionHeaderColor: @unselectedTextColor; +@definitionHeaderFontWeight: normal; + +@definitionFooterBackground: @definitionHeaderBackground; +@definitionFooterColor: @definitionHeaderColor; +@definitionFooterFontWeight: @definitionHeaderFontWeight; + +@definitionColumnBackground: @subtleTransparentBlack; +@definitionColumnColor: @selectedTextColor; +@definitionColumnFontWeight: bold; + + /*-------------- Couplings ---------------*/ @iconVerticalAlign: baseline; - /*-------------- States ---------------*/ @@ -115,29 +113,30 @@ @positiveColorHover: darken(@positiveColor, 3); /* Negative */ -@negativeColor: #CD2929; +@negativeColor: @negativeTextColor; @negativeBoxShadow: @stateMarkerWidth 0px 0px @negativeBorderColor inset; @negativeBackgroundHover: darken(@negativeBackgroundColor, 3); @negativeColorHover: darken(@negativeColor, 3); /* Error */ -@errorColor: #CD2929; +@errorColor: @errorTextColor; @errorBoxShadow: @stateMarkerWidth 0px 0px @errorBorderColor inset; @errorBackgroundHover: darken(@errorBackgroundColor, 3); @errorColorHover: darken(@errorColor, 3); /* Warning */ -@warningColor: #7D6C00; +@warningColor: @warningTextColor; @warningBoxShadow: @stateMarkerWidth 0px 0px @warningBorderColor inset; @warningBackgroundHover: darken(@warningBackgroundColor, 3); @warningColorHover: darken(@warningColor, 3); /* Active */ -@activeColor: rgba(50, 50, 50, 0.9); +@activeColor: @textColor; @activeBackgroundColor: #E0E0E0; @activeBoxShadow: @stateMarkerWidth 0px 0px @activeColor inset; + @activeBackgroundHover: #EFEFEF; -@activeColorHover: rgba(50, 50, 50, 1); +@activeColorHover: @selectedTextColor; /*-------------- Types @@ -187,10 +186,10 @@ /* Inverted */ @invertedBackground: #333333; @invertedBorder: none; -@invertedCellBorderColor: rgba(0, 0, 0, 0.2); +@invertedCellBorderColor: @whiteBorderColor; @invertedCellColor: @invertedTextColor; @invertedHeaderBackground: rgba(0, 0, 0, 0.15); -@invertedHeaderColor: rgba(255, 255, 255, 0.9); +@invertedHeaderColor: @invertedTextColor; @invertedDefinitionColumnBackground: @subtleTransparentWhite; @invertedDefinitionColumnColor: @invertedSelectedTextColor; @@ -198,15 +197,14 @@ /* Basic */ @basicTableBackground: transparent; -@basicTableBorder: 1px solid @borderColor; +@basicTableBorder: @borderWidth solid @borderColor; @basicBoxShadow: none; @basicTableHeaderBackground: transparent; @basicTableCellBackground: transparent; @basicTableHeaderDivider: none; @basicTableCellBorder: 1px solid rgba(0, 0, 0, 0.1); -@basicTableCellVerticalPadding: @cellVerticalPadding; -@basicTableCellHorizontalPadding: @cellHorizontalPadding; +@basicTableCellPadding: ''; @basicTableStripedBackground: @transparentBlack; /* Padded */ diff --git a/src/themes/default/elements/divider.variables b/src/themes/default/elements/divider.variables index 18d65ce3c..14a23a703 100644 --- a/src/themes/default/elements/divider.variables +++ b/src/themes/default/elements/divider.variables @@ -9,10 +9,10 @@ @margin: 1rem 0rem; @highlightWidth: 1px; -@highlightColor: rgba(255, 255, 255, 0.2); +@highlightColor: @whiteBorderColor; @shadowWidth: 1px; -@shadowColor: rgba(0, 0, 0, 0.1); +@shadowColor: @borderColor; /* Text */ @letterSpacing: 0.05em; @@ -44,11 +44,10 @@ /* Inverted */ @invertedTextColor: @white; @invertedHighlightColor: rgba(255, 255, 255, 0.15); -@invertedShadowColor: rgba(0, 0, 0, 0.15); +@invertedShadowColor: @borderColor; /* Section */ @sectionMargin: 2rem; - /* Sizes */ @medium: 1rem; \ No newline at end of file