[Card] Add .inverted variation to the card component

[Qqwy]

Steps to Reproduce

1. Create <div class="ui card inverted"></div>

Expected The Card should use white text on a dark background.

Result The Card does not do this

[jokeronaldo]

Added ti 2.1.x milestone, nice suggestion :+1:

[Maxhodges]

are those milestones public somewhere? if milestone 2.1.x is 100% and inverted card is part of it, then can I pull it into my project somehow? is there a branch with inverted card?

[natiki]

You can check the milestones at: https://github.com/Semantic-Org/Semantic-UI/milestones

[baadc0de]

I've tried this in the latest React-Semantic-UI and it did not work. I would suspect that the selected Milestone is wrong or the React build does not properly forward the inverted style.

[Maxhodges]

Hi @baadc0de actually this is not an issue with SUI React components. It's because there is no inverted style for cards in semantic-ui. Semantic-UI React is actually CSS agnostic. That is, we don't provide the CSS at all. You need to load that on your own. But if you look, you'll find there is no inverted style for card in the Semantic-UI CSS--so it's not a flaw with SUI react. You'll need to create you own, as I've done for my site, unless SUI ( @jlukic ) provides their own inverted style in the future.

[baadc0de]

Well, this is a perfect ticket to request it then. @jokeronaldo would you still consider it for inclusion into SUI, and so could you verify into which milestone release of SUI this request would go? @Maxhodges would you consider making a PR for this with your own mods to SUI?

[Maxhodges]

There are probably better ways to do it. I just did it in my custom theme by overriding the card view. I used a 'dark' class instead of inverted (in case SUI makes an inverted style later). This might help you get started, but it might not be the whole picture because I think we override default text colors too in another place

blackship/client/lib/themes/blackship/views/card.overrides.import.less

.ui.dark.cards > .dark.card, .ui.dark.card {
  max-width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  width: 290px;
  min-height: 0px;
  background: @dark-bg-40;
  padding: 0em;
  border: none;
  border-radius: 0.28571429rem;
  box-shadow: 0px 1px 3px 0px @dark-bg-40, 0px 0px 0px 1px @dark-bg-40;
  transition: box-shadow 0.1s ease, transform 0.1s ease;
  z-index: '';
}

.ui.dark.card {
  background: @dark-bg-40;
}

.ui.dark.cards > .dark.card > .content > a.header, .ui.dark.card > .content > a.header {
  color: white;
}

.ui.cards > .card .meta, .ui.card .meta {
  font-size: 1em;
  color: @grey-50;
}

.ui.dark.cards > .dark.card > .content > .header, .ui.dark.card > .content > .header {
  //display: block;
  //margin: '';
  //font-family: 'Roboto', 'sans-serif';
  color: white;
}

.ui.dark.cards > .dark.card > .content > .description, .ui.dark.card > .content > .description {
  clear: both;
  color: white;
}

.ui.dark.cards > .dark.card > .content > a.header:hover, .ui.dark.card > .content > a.header:hover {
  color: rgba(0, 0, 0, .8);
}

.ui.dark.cards > .dark.card > .extra,
.ui.dark.card > .extra {
  border-top: 1px solid @textColor !important;
  color: inherit;
}

[baadc0de]

Thanks, it certainly helps! 👍

[vsg24]

Any updates on this??

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.

[lubber-de]

The community fork Fomantic-UI implemented a inverted card variant since 2.5 https://fomantic-ui.com/views/card.html#inverted

[Qqwy]

Thank you very much for pointing me to Formantic-UI!.