Sha256: ee5fc476cc3324101b5ee6f60a1dba02f1f0e4ddb83c5cb203b880c9ac37ba28

Contents?: true

Size: 1.91 KB

Versions: 44

Compression:

Stored size: 1.91 KB

Contents

// Table of Contents
// ==================================================
// Label & Badge
// Colors
// Styles

// Label & Badge
// ==================================================
.badge,
.label {
  background: color(haze);
  border: 1px solid color(haze);
  border-radius: border-radius(b);
  color: color(black);
  display: inline-block;
  font-size: text-size(s);
  font-weight: text-weight(semibold);
  line-height: 1;
  overflow: hidden;
  padding: 6px 10px 7px;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;

  &:empty { display: none; }
}
.badge {
  border-radius: border-radius(xl);
  min-width: 14px;
  padding: 6px;
}

// Colors
// ==================================================
@each $name, $color in map-keys($colors) {
  .badge-color-#{$name},
  .label-color-#{$name} {
    background: color($name);
    border-color: color($name);
    color: text-color-on($name);

    &.badge-outline,
    &.label-outline { color: color($name); }
    &.badge-color-inverted,
    &.label-color-inverted {
      background: color-inverted($name);
      border-color: color-inverted($name);
      color: color($name);

      &.badge-outline,
      &.label-outline { border-color: color($name); }
    }
  }
}

// Sizes
// ==================================================
.badge-size-l,
.label-size-l,
.badge-size-m,
.label-size-m { font-size: text-size(b); }
.badge-size-l,
.badge-size-m { min-width: 16px; }
.badge-size-l { padding: 15px; }
.badge-size-m { padding: 10px; }
.label-size-l { padding: 13px 20px; }
.label-size-m { padding: 10px 15px; }
.badge-size-s,
.label-size-s {
  font-size: text-size(xs);
  padding: 4px 8px 5px;
}
.badge-size-s {
  min-width: 0;
  padding: 4px 6px;
}

// Styles
// ==================================================
.badge-block,
.label-block {
  display: block;
  padding-left: 0;
  padding-right: 0;
  width: 100%;
}
.badge-outline,
.label-outline { background: color(transparent); }

Version data entries

44 entries across 44 versions & 1 rubygems

Version Path
active_frontend-14.2.2 vendor/assets/stylesheets/components/_label_and_badge.scss
active_frontend-14.2.1 vendor/assets/stylesheets/components/_label_and_badge.scss
active_frontend-14.2.0 vendor/assets/stylesheets/components/_label_and_badge.scss
active_frontend-14.1.41 vendor/assets/stylesheets/components/_label_and_badge.scss
active_frontend-14.1.40 vendor/assets/stylesheets/components/_label_and_badge.scss
active_frontend-14.1.39 vendor/assets/stylesheets/components/_label_and_badge.scss
active_frontend-14.1.38 vendor/assets/stylesheets/components/_label_and_badge.scss
active_frontend-14.1.37 vendor/assets/stylesheets/components/_label_and_badge.scss
active_frontend-14.1.36 vendor/assets/stylesheets/components/_label_and_badge.scss
active_frontend-14.1.35 vendor/assets/stylesheets/components/_label_and_badge.scss
active_frontend-14.1.34 vendor/assets/stylesheets/components/_label_and_badge.scss
active_frontend-14.1.33 vendor/assets/stylesheets/components/_label_and_badge.scss
active_frontend-14.1.25 vendor/assets/stylesheets/components/_label_and_badge.scss
active_frontend-14.1.24 vendor/assets/stylesheets/components/_label_and_badge.scss
active_frontend-14.1.23 vendor/assets/stylesheets/components/_label_and_badge.scss
active_frontend-14.1.22 vendor/assets/stylesheets/components/_label_and_badge.scss
active_frontend-14.1.21 vendor/assets/stylesheets/components/_label_and_badge.scss
active_frontend-14.1.20 vendor/assets/stylesheets/components/_label_and_badge.scss
active_frontend-14.1.19 vendor/assets/stylesheets/components/_label_and_badge.scss
active_frontend-14.1.18 vendor/assets/stylesheets/components/_label_and_badge.scss