Browse Source

Fixes basic padded table, adds vertical alignment

pull/2034/head
jlukic 9 years ago
parent
commit
6fecacf398
4 changed files with 66 additions and 54 deletions
  1. 22
      src/definitions/collections/table.less
  2. 3
      src/definitions/elements/divider.less
  3. 88
      src/themes/default/collections/table.variables
  4. 7
      src/themes/default/elements/divider.variables

22
src/definitions/collections/table.less

@ -126,7 +126,6 @@
.ui.table td { .ui.table td {
padding: @cellVerticalPadding @cellHorizontalPadding; padding: @cellVerticalPadding @cellHorizontalPadding;
text-align: @cellTextAlign; text-align: @cellTextAlign;
vertical-align: @cellVerticalAlign;
} }
/* Icons */ /* Icons */
@ -484,7 +483,7 @@
} }
/*-------------- /*--------------
Aligned
Text Alignment
---------------*/ ---------------*/
.ui.table[class*="left aligned"], .ui.table[class*="left aligned"],
@ -500,6 +499,23 @@
text-align: right; 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 Collapsing
---------------*/ ---------------*/
@ -909,7 +925,7 @@
} }
.ui[class*="very basic"].table:not(.sortable):not(.striped) th, .ui[class*="very basic"].table:not(.sortable):not(.striped) th,
.ui[class*="very basic"].table:not(.sortable):not(.striped) td { .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) th:first-child,
.ui[class*="very basic"].table:not(.sortable):not(.striped) td:first-child { .ui[class*="very basic"].table:not(.sortable):not(.striped) td:first-child {

3
src/definitions/elements/divider.less

@ -211,9 +211,8 @@
.ui.divider.inverted:after, .ui.divider.inverted:after,
.ui.divider.inverted:before { .ui.divider.inverted:before {
border-top-color: @invertedShadowColor !important; border-top-color: @invertedShadowColor !important;
border-bottom-color: @invertedHighlightColor !important;
border-left-color: @invertedShadowColor !important; border-left-color: @invertedShadowColor !important;
border-bottom-color: @invertedHighlightColor !important;
border-right-color: @invertedHighlightColor !important; border-right-color: @invertedHighlightColor !important;
} }

88
src/themes/default/collections/table.variables

@ -9,60 +9,39 @@
@margin: 1em 0em; @margin: 1em 0em;
@borderCollapse: separate; @borderCollapse: separate;
@borderSpacing: 0px; @borderSpacing: 0px;
@borderRadius: @defaultBorderRadius;
@transition: @transition:
background @transitionDuration @transitionEasing, background @transitionDuration @transitionEasing,
border-color @transitionDuration @transitionEasing, border-color @transitionDuration @transitionEasing,
color @transitionDuration @transitionEasing color @transitionDuration @transitionEasing
; ;
@borderRadius: 0.25rem;
@background: #FFFFFF;
@background: @white;
@color: @textColor; @color: @textColor;
@borderWidth: 1px; @borderWidth: 1px;
@borderColor: #D0D0D0;
@border: @borderWidth solid @borderColor; @border: @borderWidth solid @borderColor;
@boxShadow: none; @boxShadow: none;
@textAlign: left; @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 Parts
---------------*/ ---------------*/
/* Table Row */ /* Table Row */
@rowBorder: 1px solid @solidBorderColor;
@rowBorder: 1px solid @borderColor;
/* Table Cell */ /* 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 */ /* Table Header */
@headerBorder: 1px solid @solidBorderColor;
@headerBorder: 1px solid @borderColor;
@headerDivider: none; @headerDivider: none;
@headerBackground: @darkWhite; @headerBackground: @darkWhite;
@headerAlign: @textAlign;
@headerVerticalAlign: middle;
@headerAlign: inherit;
@headerVerticalAlign: inherit;
@headerColor: @textColor; @headerColor: @textColor;
@headerVerticalPadding: @cellVerticalPadding; @headerVerticalPadding: @cellVerticalPadding;
@headerHorizontalPadding: @cellHorizontalPadding; @headerHorizontalPadding: @cellHorizontalPadding;
@ -73,10 +52,10 @@
/* Table Footer */ /* Table Footer */
@footerBoxShadow: none; @footerBoxShadow: none;
@footerBorder: 1px solid @solidBorderColor;
@footerBorder: 1px solid @borderColor;
@footerDivider: none; @footerDivider: none;
@footerBackground: @white; @footerBackground: @white;
@footerAlign: @textAlign;
@footerAlign: inherit;
@footerVerticalAlign: middle; @footerVerticalAlign: middle;
@footerColor: @textColor; @footerColor: @textColor;
@footerVerticalPadding: @cellVerticalPadding; @footerVerticalPadding: @cellVerticalPadding;
@ -95,13 +74,32 @@
@responsiveCellBoxShadow: none !important; @responsiveCellBoxShadow: none !important;
@responsiveStatusColor: transparent; @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 Couplings
---------------*/ ---------------*/
@iconVerticalAlign: baseline; @iconVerticalAlign: baseline;
/*-------------- /*--------------
States States
---------------*/ ---------------*/
@ -115,29 +113,30 @@
@positiveColorHover: darken(@positiveColor, 3); @positiveColorHover: darken(@positiveColor, 3);
/* Negative */ /* Negative */
@negativeColor: #CD2929;
@negativeColor: @negativeTextColor;
@negativeBoxShadow: @stateMarkerWidth 0px 0px @negativeBorderColor inset; @negativeBoxShadow: @stateMarkerWidth 0px 0px @negativeBorderColor inset;
@negativeBackgroundHover: darken(@negativeBackgroundColor, 3); @negativeBackgroundHover: darken(@negativeBackgroundColor, 3);
@negativeColorHover: darken(@negativeColor, 3); @negativeColorHover: darken(@negativeColor, 3);
/* Error */ /* Error */
@errorColor: #CD2929;
@errorColor: @errorTextColor;
@errorBoxShadow: @stateMarkerWidth 0px 0px @errorBorderColor inset; @errorBoxShadow: @stateMarkerWidth 0px 0px @errorBorderColor inset;
@errorBackgroundHover: darken(@errorBackgroundColor, 3); @errorBackgroundHover: darken(@errorBackgroundColor, 3);
@errorColorHover: darken(@errorColor, 3); @errorColorHover: darken(@errorColor, 3);
/* Warning */ /* Warning */
@warningColor: #7D6C00;
@warningColor: @warningTextColor;
@warningBoxShadow: @stateMarkerWidth 0px 0px @warningBorderColor inset; @warningBoxShadow: @stateMarkerWidth 0px 0px @warningBorderColor inset;
@warningBackgroundHover: darken(@warningBackgroundColor, 3); @warningBackgroundHover: darken(@warningBackgroundColor, 3);
@warningColorHover: darken(@warningColor, 3); @warningColorHover: darken(@warningColor, 3);
/* Active */ /* Active */
@activeColor: rgba(50, 50, 50, 0.9);
@activeColor: @textColor;
@activeBackgroundColor: #E0E0E0; @activeBackgroundColor: #E0E0E0;
@activeBoxShadow: @stateMarkerWidth 0px 0px @activeColor inset; @activeBoxShadow: @stateMarkerWidth 0px 0px @activeColor inset;
@activeBackgroundHover: #EFEFEF; @activeBackgroundHover: #EFEFEF;
@activeColorHover: rgba(50, 50, 50, 1);
@activeColorHover: @selectedTextColor;
/*-------------- /*--------------
Types Types
@ -187,10 +186,10 @@
/* Inverted */ /* Inverted */
@invertedBackground: #333333; @invertedBackground: #333333;
@invertedBorder: none; @invertedBorder: none;
@invertedCellBorderColor: rgba(0, 0, 0, 0.2);
@invertedCellBorderColor: @whiteBorderColor;
@invertedCellColor: @invertedTextColor; @invertedCellColor: @invertedTextColor;
@invertedHeaderBackground: rgba(0, 0, 0, 0.15); @invertedHeaderBackground: rgba(0, 0, 0, 0.15);
@invertedHeaderColor: rgba(255, 255, 255, 0.9);
@invertedHeaderColor: @invertedTextColor;
@invertedDefinitionColumnBackground: @subtleTransparentWhite; @invertedDefinitionColumnBackground: @subtleTransparentWhite;
@invertedDefinitionColumnColor: @invertedSelectedTextColor; @invertedDefinitionColumnColor: @invertedSelectedTextColor;
@ -198,15 +197,14 @@
/* Basic */ /* Basic */
@basicTableBackground: transparent; @basicTableBackground: transparent;
@basicTableBorder: 1px solid @borderColor;
@basicTableBorder: @borderWidth solid @borderColor;
@basicBoxShadow: none; @basicBoxShadow: none;
@basicTableHeaderBackground: transparent; @basicTableHeaderBackground: transparent;
@basicTableCellBackground: transparent; @basicTableCellBackground: transparent;
@basicTableHeaderDivider: none; @basicTableHeaderDivider: none;
@basicTableCellBorder: 1px solid rgba(0, 0, 0, 0.1); @basicTableCellBorder: 1px solid rgba(0, 0, 0, 0.1);
@basicTableCellVerticalPadding: @cellVerticalPadding;
@basicTableCellHorizontalPadding: @cellHorizontalPadding;
@basicTableCellPadding: '';
@basicTableStripedBackground: @transparentBlack; @basicTableStripedBackground: @transparentBlack;
/* Padded */ /* Padded */

7
src/themes/default/elements/divider.variables

@ -9,10 +9,10 @@
@margin: 1rem 0rem; @margin: 1rem 0rem;
@highlightWidth: 1px; @highlightWidth: 1px;
@highlightColor: rgba(255, 255, 255, 0.2);
@highlightColor: @whiteBorderColor;
@shadowWidth: 1px; @shadowWidth: 1px;
@shadowColor: rgba(0, 0, 0, 0.1);
@shadowColor: @borderColor;
/* Text */ /* Text */
@letterSpacing: 0.05em; @letterSpacing: 0.05em;
@ -44,11 +44,10 @@
/* Inverted */ /* Inverted */
@invertedTextColor: @white; @invertedTextColor: @white;
@invertedHighlightColor: rgba(255, 255, 255, 0.15); @invertedHighlightColor: rgba(255, 255, 255, 0.15);
@invertedShadowColor: rgba(0, 0, 0, 0.15);
@invertedShadowColor: @borderColor;
/* Section */ /* Section */
@sectionMargin: 2rem; @sectionMargin: 2rem;
/* Sizes */ /* Sizes */
@medium: 1rem; @medium: 1rem;
Loading…
Cancel
Save