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.

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

v4 - Missing former panel style for cards #17316

Closed
TheZoker opened this Issue Aug 25, 2015 · 6 comments

Comments

Projects
None yet
6 participants
@TheZoker

TheZoker commented Aug 25, 2015

Here are my suggestions for the former panel style:
img_2015 08 25_21h01m59s_002_

1. Split classes into card-primary-outline and card-primary-fill

SCSS

$primary: #0275d8;
$warning: #f0ad4e;

.card-primary {
  &-outline {
    border-color: $primary;
  }
  &-fill {
    background-color: $primary;
    color: #FFF;
  }
}

.card-warning {
  &-outline {
    border-color: $warning;
  }
  &-fill {
    background-color: $warning;
    color: #FFF;
  }
}

Example https://jsbin.com/kifejew/edit?html,css,output

<div class="card card-primary-outline">
    <div class="card-header card-primary-fill">
        Featured
    </div>
    <div class="card-block">
        <h4 class="card-title">Special title treatment</h4>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
    <div class="card-footer">
        2 days ago
    </div>
</div>
<div class="card card-warning-outline">
    <div class="card-header card-warning-fill">
        Featured
    </div>
    <div class="card-block">
        <h4 class="card-title">Special title treatment</h4>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-warning">Go somewhere</a>
    </div>
    <div class="card-footer">
        2 days ago
    </div>
</div>

2. Split classes into card-primary-outline and card-primary-fill and add class card-primary-header

card-primary-fill can be added to every color class (like primary, warning etc.) and applies the right color.
SCSS

$primary: #0275d8;
$warning: #f0ad4e;

.card-primary {
  &-outline {
    border-color: $primary;
  }
  &-header {
    background-color: $primary;
    color: #FFF;
  }
  &-fill {
    border-color: $primary;
    background-color: $primary;
  }
}

.card-warning {
  &-outline {
    border-color: $warning;
  }
  &-header {
    background-color: $warning;
    color: #FFF;
  }
  &-fill {
    border-color: $warning;
    background-color: $warning;
  }
}

Example https://jsbin.com/jixuyo/2/edit?html,css,output

<div class="card card-primary-outline">
  <div class="card-header card-primary-header">
      Featured
  </div>
  <div class="card-block">
      <h4 class="card-title">Special title treatment</h4>
      <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
      <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <div class="card-footer">
      2 days ago
  </div>
</div>
<div class="card card-warning-fill card-inverse">
  <div class="card-header card-warning-header">
      Featured
  </div>
  <div class="card-block">
      <h4 class="card-title">Special title treatment</h4>
      <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
      <a href="#" class="btn btn-warning">Go somewhere</a>
  </div>
  <div class="card-footer">
      2 days ago
  </div>
</div>

These are just suggestions.
Open for discussion :)


BTW, in the current v4 code there are some issues, if you use card-primary with card-headeror card-footer:
img_2015 08 25_22h13m10s_003_
img_2015 08 25_22h13m34s_004_

@petetnt

This comment has been minimized.

Show comment
Hide comment
@petetnt

petetnt Aug 26, 2015

Contributor

Similar to/extending my suggestion #17243 👍

I also reported that .text-inverse behavior to #17244

Contributor

petetnt commented Aug 26, 2015

Similar to/extending my suggestion #17243 👍

I also reported that .text-inverse behavior to #17244

@Panman8201

This comment has been minimized.

Show comment
Hide comment
@Panman8201

Panman8201 Oct 9, 2015

This is something I've been concerned about as well, having contextual colors just for the "card title" (as was possible with panels). 👍

Panman8201 commented Oct 9, 2015

This is something I've been concerned about as well, having contextual colors just for the "card title" (as was possible with panels). 👍

@mdo

This comment has been minimized.

Show comment
Hide comment
@mdo

mdo Feb 7, 2016

Member

Outlines were added in the second v4 alpha. Definitely have more things to improve, but closing this one out for now as other issues are open to address some of that.

Member

mdo commented Feb 7, 2016

Outlines were added in the second v4 alpha. Definitely have more things to improve, but closing this one out for now as other issues are open to address some of that.

@mdo mdo closed this Feb 7, 2016

@TheZoker

This comment has been minimized.

Show comment
Hide comment
@TheZoker

TheZoker Feb 7, 2016

@mdo Are there any docs for that?

TheZoker commented Feb 7, 2016

@mdo Are there any docs for that?

@psi-4ward

This comment has been minimized.

Show comment
Hide comment
@psi-4ward

psi-4ward Oct 7, 2016

any way to achieve this in alpha-4?

psi-4ward commented Oct 7, 2016

any way to achieve this in alpha-4?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment