Browse Source

Fix several bugs in inverted tables with celled, disabled content

pull/1139/merge
jlukic 10 years ago
parent
commit
1b4ca20721
3 changed files with 45 additions and 36 deletions
  1. 41
      src/definitions/collections/table.less
  2. 38
      src/themes/packages/default/collections/table.variables
  3. 2
      src/themes/packages/default/globals/site.variables

41
src/definitions/collections/table.less

@ -354,7 +354,7 @@
.ui.table tr.disabled:hover td, .ui.table tr.disabled:hover td,
.ui.table tr:hover td.disabled { .ui.table tr:hover td.disabled {
pointer-events: none; pointer-events: none;
color: rgba(150, 150, 150, 0.3);
color: @disabledTextColor;
} }
/******************************* /*******************************
@ -444,39 +444,30 @@
.ui.black.table { .ui.black.table {
border-top: @coloredBorderSize solid @black; border-top: @coloredBorderSize solid @black;
border-radius: @coloredBorderRadius;
} }
.ui.blue.table { .ui.blue.table {
border-top: @coloredBorderSize solid @blue; border-top: @coloredBorderSize solid @blue;
border-radius: @coloredBorderRadius;
} }
.ui.green.table { .ui.green.table {
border-top: @coloredBorderSize solid @green; border-top: @coloredBorderSize solid @green;
border-radius: @coloredBorderRadius;
} }
.ui.orange.table { .ui.orange.table {
border-top: @coloredBorderSize solid @orange; border-top: @coloredBorderSize solid @orange;
border-radius: @coloredBorderRadius;
} }
.ui.pink.table { .ui.pink.table {
border-top: @coloredBorderSize solid @pink; border-top: @coloredBorderSize solid @pink;
border-radius: @coloredBorderRadius;
} }
.ui.purple.table { .ui.purple.table {
border-top: @coloredBorderSize solid @purple; border-top: @coloredBorderSize solid @purple;
border-radius: @coloredBorderRadius;
} }
.ui.red.table { .ui.red.table {
border-top: @coloredBorderSize solid @red; border-top: @coloredBorderSize solid @red;
border-radius: @coloredBorderRadius;
} }
.ui.teal.table { .ui.teal.table {
border-top: @coloredBorderSize solid @teal; border-top: @coloredBorderSize solid @teal;
border-radius: @coloredBorderRadius;
} }
.ui.yellow.table { .ui.yellow.table {
border-top: @coloredBorderSize solid @yellow; border-top: @coloredBorderSize solid @yellow;
border-radius: @coloredBorderRadius;
} }
/*------------------- /*-------------------
@ -486,47 +477,38 @@
.ui.inverted.table, .ui.inverted.table,
.ui.inverted.black.table { .ui.inverted.black.table {
background-color: @black !important; background-color: @black !important;
border-radius: @borderRadius;
color: @white !important; color: @white !important;
} }
.ui.inverted.blue.table { .ui.inverted.blue.table {
background-color: @blue !important; background-color: @blue !important;
border-radius: @borderRadius;
color: @white !important; color: @white !important;
} }
.ui.inverted.green.table { .ui.inverted.green.table {
background-color: @green !important; background-color: @green !important;
border-radius: @borderRadius;
color: @white !important; color: @white !important;
} }
.ui.inverted.orange.table { .ui.inverted.orange.table {
background-color: @orange !important; background-color: @orange !important;
border-radius: @borderRadius;
color: @white !important; color: @white !important;
} }
.ui.inverted.pink.table { .ui.inverted.pink.table {
background-color: @pink !important; background-color: @pink !important;
border-radius: @borderRadius;
color: @white !important; color: @white !important;
} }
.ui.inverted.purple.table { .ui.inverted.purple.table {
background-color: @purple !important; background-color: @purple !important;
border-radius: @borderRadius;
color: @white !important; color: @white !important;
} }
.ui.inverted.red.table { .ui.inverted.red.table {
background-color: @red !important; background-color: @red !important;
border-radius: @borderRadius;
color: @white !important; color: @white !important;
} }
.ui.inverted.teal.table { .ui.inverted.teal.table {
background-color: @teal !important; background-color: @teal !important;
border-radius: @borderRadius;
color: @white !important; color: @white !important;
} }
.ui.inverted.yellow.table { .ui.inverted.yellow.table {
background-color: @yellow !important; background-color: @yellow !important;
border-radius: @borderRadius;
color: @white !important; color: @white !important;
} }
@ -738,13 +720,30 @@
} }
.ui.inverted.table th { .ui.inverted.table th {
background-color: @invertedHeaderBackground; background-color: @invertedHeaderBackground;
border-color: @invertedCellBorderColor;
border-color: @invertedCellBorderColor !important;
color: @invertedHeaderColor; color: @invertedHeaderColor;
} }
.ui.inverted.table tr td { .ui.inverted.table tr td {
border-color: @invertedCellBorderColor;
border-color: @invertedCellBorderColor !important;
} }
.ui.inverted.table tr.disabled td,
.ui.inverted.table tr td.disabled,
.ui.inverted.table tr.disabled:hover td,
.ui.inverted.table tr:hover td.disabled {
pointer-events: none;
color: @invertedDisabledTextColor;
}
/* Definition */
.ui.inverted.definition.table tfoot:not(.full-width) th:first-child,
.ui.inverted.definition.table thead:not(.full-width) th:first-child {
background: @definitionPageBackground;
}
.ui.inverted.definition.table tr td:first-child {
background: @invertedDefinitionColumnBackground;
color: @invertedDefinitionColumnColor;
}
/*-------------- /*--------------
Collapsing Collapsing

38
src/themes/packages/default/collections/table.variables

@ -18,6 +18,26 @@
@border: @borderWidth solid @borderColor; @border: @borderWidth solid @borderColor;
@boxShadow: none; @boxShadow: none;
/*-------------------
Types
--------------------*/
/* Definition */
@definitionPageBackground: @white;
@definitionHeaderBackground: transparent;
@definitionHeaderColor: @unselectedTextColor;
@definitionHeaderFontWeight: normal;
@definitionFooterBackground: @definitionHeaderBackground;
@definitionFooterColor: @definitionHeaderColor;
@definitionFooterFontWeight: @definitionHeaderFontWeight;
@definitionColumnBackground: @subtleTransparentBlack;
@definitionColumnColor: @selectedTextColor;
@definitionColumnFontWeight: bold;
/*-------------- /*--------------
Parts Parts
---------------*/ ---------------*/
@ -170,21 +190,9 @@
@invertedHeaderBackground: rgba(0, 0, 0, 0.15); @invertedHeaderBackground: rgba(0, 0, 0, 0.15);
@invertedHeaderColor: rgba(255, 255, 255, 0.9); @invertedHeaderColor: rgba(255, 255, 255, 0.9);
/* Definition */
@definitionPageBackground: @white;
@definitionHeaderBackground: transparent;
@definitionHeaderColor: @unselectedTextColor;
@definitionHeaderFontWeight: normal;
@definitionFooterBackground: @definitionHeaderBackground;
@definitionFooterColor: @definitionHeaderColor;
@definitionFooterFontWeight: @definitionHeaderFontWeight;
@definitionColumnBackground: @subtleTransparentBlack;
@definitionColumnColor: @selectedTextColor;
@definitionColumnFontWeight: bold;
@invertedDefinitionColumnBackground: @subtleTransparentWhite;
@invertedDefinitionColumnColor: @invertedSelectedTextColor;
@invertedDefinitionColumnFontWeight: bold;
/* Basic */ /* Basic */
@basicTableBackground: transparent; @basicTableBackground: transparent;

2
src/themes/packages/default/globals/site.variables

@ -350,6 +350,8 @@
--------------------*/ --------------------*/
@disabledOpacity: 0.3; @disabledOpacity: 0.3;
@disabledTextColor: rgba(40, 40, 40, 0.3);
@invertedDisabledTextColor: rgba(225, 225, 225, 0.3);
/*------------------- /*-------------------
Hover Hover

Loading…
Cancel
Save