Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[v4 css] inverted table styling #21585

Closed
Mottie opened this issue Jan 7, 2017 · 2 comments
Closed

[v4 css] inverted table styling #21585

Mottie opened this issue Jan 7, 2017 · 2 comments
Labels
css has-pr v4
Milestone
v4.0.0-beta

Comments

@Mottie
Copy link

Mottie commented Jan 7, 2017

When inverting a table style using the table-inverse class (demo):

  1. Striping

    With a "table-striped" class, the stripes are not discernibly different. In the css, the definition is the same as for the non-inverted row styling:

    .table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, .05); /* $table-bg-accent; */
}

  2. Borders

    The border styling of the non-inverted tables is a very subtle, using a border color of #eceeef. On inverted tables, we see #fff! It's way to bright!

    .table-inverse td,
.table-inverse th,
.table-inverse thead th {
  border-color: #fff; /* $body-bg */
}

  3. Hover

    Hovering isn't as bad when no stripe is applied to the table; but when a stripe is applied, the hover is only slightly more discernible than the row color (demo)!

    .table-hover tbody tr:hover {
  background-color: rgba(0, 0, 0, .075) /* $table-bg-hover */
}

This may not seem like a big deal to some of you young 'uns out there, but for elderly and visually impaired users, it would make a difference.
@mdo mdo added this to the v4.0.0-beta.2 milestone Jan 25, 2017
@LarryAzevedo
Copy link

I agree with @Mottie.

Regarding the striping, maybe we should change $table-bg-accent: rgba($black,.05) to $table-bg-accent: rgba($gray-light,.075).

Regarding the borders, maybe we need a new variable called $table-inverse-border-color and set it's default value to lighten($table-inverse-bg, 15%).

Regarding the hover, maybe we should change $table-bg-hover: rgba($black,.075) to $table-bg-hover: rgba($gray-light,.075).

I tested these new settings and it looked good (on two completely different monitors) but would appreciate your feedback. I also experimented with changing $table-inverse-bg to different values and that worked out well too.

So to recap, I'm proposing the following changes in _variables.scss (under the $table-inverse-color variable):

$table-inverse-border-color:    lighten($table-inverse-bg, 15%) !default;

$table-bg-accent:               rgba($gray-light,.075) !default;
$table-bg-hover:                rgba($gray-light,.075) !default;

And the following changes in _tables.scss:

.table-inverse {
  color: $table-inverse-color;
  background-color: $table-inverse-bg;

  th,
  td,
  thead th {
    border-color: $table-inverse-border-color;
  }

  &.table-bordered {
    border: 0;
  }
}

What do you guys think?

@Quy Quy mentioned this issue Jan 27, 2017
Closed
@mdo mdo mentioned this issue Mar 20, 2017
Merged
mdo added a commit that referenced this issue Mar 20, 2017
@mdo
fixes rest of #21585; adds custom styles for inverse table accent hov…
bf7b2b9 
…er and active states
@mdo mdo modified the milestones: v4.0.0-beta, v4.0.0-beta.2 Mar 20, 2017
@mdo mdo added the has-pr label Mar 20, 2017
mdo added a commit that referenced this issue Mar 20, 2017
@mdo
fixes rest of #21585; adds custom styles for inverse table accent hov…
d093460 
…er and active states
@mdo mdo closed this as completed Mar 20, 2017
@mdo
Copy link
Member

mdo commented Mar 20, 2017

Fixed by #22217.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
css has-pr v4
Projects
None yet
Milestone
v4.0.0-beta
Development

No branches or pull requests
3 participants
@mdo @Mottie @LarryAzevedo