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 {
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 {

3
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;
}

88
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 */

7
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;
Loading…
Cancel
Save