@zohodesk/components/lib/Ribbon/Ribbon.module.css

Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development

.varClass {
  /* ribbon default variables */
  --ribbon_padding: 0;
  --ribbon_text_color: var(--zdt_ribbon_default_text);
  --ribbon_text_transform: none;
  --ribbon_font_size: var(--zd_font_size13);
  --ribbon_bg_color: var(--zdt_ribbon_default_bg);
  --ribbon_box_shadow: none;
  --ribbon_border_width: 0;
  --ribbon_border_color: var(--zdt_ribbon_default_border);
  --ribbon_line_height: normal;

  /* flag ribbon default variable */

  /* tag ribbon default variables */
  --ribbon_tag_before_top: var(--zd_size3);
  --ribbon_tag_before_border_style: solid;
  --ribbon_tag_before_border_color: var(--zdt_ribbon_default_tag_border);
  --ribbon_tag_before_width: var(--zd_size20);
  --ribbon_tag_before_height: var(--zd_size20);
  --ribbon_tag_before_left: calc( var(--zd_size10) * -1 );
  --ribbon_tag_before_border_radius: 3px 0 0 0;
}[dir=ltr] .varClass {
  --ribbon_flag_border_width: 14px 12px 14px 0
    /*rtl: 14px 0 14px 12px*/
  ;
  --ribbon_tag_before_border_width: 1px 0 0 1px
    /*rtl: 1px 1px 0 0*/
  ;
}[dir=rtl] .varClass {
  --ribbon_flag_border_width: 14px 0 14px 12px;
  --ribbon_tag_before_border_width: 1px 1px 0 0;
}

/* css:lineheight-validation:ignore */
.basic {
  composes: varClass;
  position: relative;
  color: var(--ribbon_text_color);
  text-transform: var(--ribbon_text_transform);
  font-size: var(--ribbon_font_size);
  line-height: var(--ribbon_line_height);
  padding: var(--ribbon_padding);
  background-color: var(--ribbon_bg_color);
  box-shadow: var(--ribbon_box_shadow);
  border-width: var(--ribbon_border_width);
  border-style: solid;
  border-color: var(--ribbon_border_color);
}

.default,
.flag,
.plain,
.ribbon,
.box,
.stamp,
.sticker {
  composes: dotted from '../common/common.module.css';
}

.default {
  composes: semibold from '../common/common.module.css';
  display: block;
  --ribbon_padding: var(--zd_size5) var(--zd_size20);
  --ribbon_text_color: var(--zdt_ribbon_white_text);
  --ribbon_text_transform: uppercase;
  text-align: center;
}

.small {
  --ribbon_font_size: var(--zd_font_size9);
}

.medium {
  --ribbon_font_size: var(--zd_font_size11);
}

.large {
  --ribbon_font_size: var(--zd_font_size13);
}

.xlarge {
  --ribbon_font_size: var(--zd_font_size14);
}

.palette_default {
  --ribbon_bg_color: var(--zdt_ribbon_palette_bg);
}

.palette_danger {
  --ribbon_bg_color: var(--zdt_ribbon_danger_bg);
}

.palette_primary {
  --ribbon_bg_color: var(--zdt_ribbon_primary_bg);
}

.palette_secondary {
  --ribbon_bg_color: var(--zdt_ribbon_secondary_bg);
}

.palette_info {
  --ribbon_bg_color: var(--zdt_ribbon_info_bg);
}

.palette_dark {
  --ribbon_bg_color: var(--zdt_ribbon_dark_bg);
}

.plain_default {
  --ribbon_text_color: var(--zdt_ribbon_plain_text);
}

.plain_danger {
  --ribbon_text_color: var(--zdt_ribbon_danger_text);
}

.plain_primary {
  --ribbon_text_color: var(--zdt_ribbon_primary_text);
}

.plain_secondary {
  --ribbon_text_color: var(--zdt_ribbon_secondary_text);
}

.plain_info {
  --ribbon_text_color: var(--zdt_ribbon_info_text);
}

.plain_dark {
  --ribbon_text_color: var(--zdt_ribbon_default_text);
}

.default_default {
  --ribbon_box_shadow: var(--zd_bs_ribbon_default);
}

.default_danger {
  --ribbon_box_shadow: var(--zd_bs_ribbon_danger);
}

.default_primary {
  --ribbon_box_shadow: var(--zd_bs_ribbon_primary);
}

.default_secondary {
  --ribbon_box_shadow: var(--zd_bs_ribbon_secondary);
}

.default_info {
  --ribbon_box_shadow: var(--zd_bs_ribbon_info);
}

.default_dark {
  --ribbon_box_shadow: var(--zd_bs_ribbon_dark);
}

.box_default {
  --ribbon_border_width: 1px;
  --ribbon_border_color: var(--zdt_ribbon_default_border);
}

.box_danger {
  --ribbon_border_width: 1px;
  --ribbon_border_color: var(--zdt_ribbon_danger_border);
}

.box_primary {
  --ribbon_border_width: 1px;
  --ribbon_border_color: var(--zdt_ribbon_primary_border);
}

.box_secondary {
  --ribbon_border_width: 1px;
  --ribbon_border_color: var(--zdt_ribbon_secondary_border);
}

.box_info {
  --ribbon_border_width: 1px;
  --ribbon_border_color: var(--zdt_ribbon_info_border);
}

.box_dark {
  --ribbon_border_width: 1px;
  --ribbon_border_color: var(--zdt_ribbon_dark_border);
}

.stamp_default {
  --ribbon_bg_color: var(--zdt_ribbon_default_stamp_bg);
}

.stamp_danger {
  --ribbon_bg_color: var(--zdt_ribbon_danger_stamp_bg);
}

.stamp_primary {
  --ribbon_bg_color: var(--zdt_ribbon_primary_stamp_bg);
}

.stamp_secondary {
  --ribbon_bg_color: var(--zdt_ribbon_secondary_stamp_bg);
}

.stamp_info {
  --ribbon_bg_color: var(--zdt_ribbon_info_stamp_bg);
}

.stamp_dark {
  --ribbon_bg_color: var(--zdt_ribbon_dark_stamp_bg);
}

.flag {
  composes: dotted from '../common/common.module.css';
  display: block;
  --ribbon_text_color: var(--zdt_ribbon_white_text);
  --ribbon_text_transform: uppercase;
}

[dir=ltr] .flag {
  --ribbon_padding: var(--zd_size4) var(--zd_size24) var(--zd_size4) var(--zd_size6);
}

[dir=rtl] .flag {
  --ribbon_padding: var(--zd_size4) var(--zd_size6) var(--zd_size4) var(--zd_size24);
}

.flag.small {
  --ribbon_line_height: 2.2223;
}

.flag.medium {
  --ribbon_line_height: 1.8182;
}

.flag.large {
  --ribbon_line_height: 1.5385;
}

.flag.xlarge {
  --ribbon_line_height: 1.4286;
}

.flag::after {
  position: absolute;
  /*  Variable:Ignore  */
  top: -1px;
  /*  Variable:Ignore  */
  /*  Variable:Ignore  */
  bottom: -1px;
  content: '';
  width: var(--zd_size12) ;
  border-style: solid;
  transform: translateZ(0);
  border-width: var(--ribbon_flag_border_width);
}

[dir=ltr] .flag::after {
  right: calc( var(--zd_size1) * -1 ) ;
  border-color: var(--zdt_ribbon_flag_mirror_border) var(--zdt_ribbon_flag_white_border) var(--zdt_ribbon_flag_mirror_border) var(--zdt_ribbon_flag_mirror_border);
}

[dir=rtl] .flag::after {
  left: calc( var(--zd_size1) * -1 ) ;
  border-color: var(--zdt_ribbon_flag_mirror_border) var(--zdt_ribbon_flag_mirror_border) var(--zdt_ribbon_flag_mirror_border) var(--zdt_ribbon_flag_white_border);
}

.plain {
  display: inline-block;
  composes: semibold from '../common/common.module.css';
}

.ribbon {
  composes: semibold from '../common/common.module.css';
  display: block;
  --ribbon_text_color: var(--zdt_ribbon_white_text);
  --ribbon_text_transform: uppercase;
  --ribbon_padding: var(--zd_size6) var(--zd_size10);
  text-align: center;
}

.ribbon.small {
  --ribbon_line_height: 2.2223;
}

.ribbon.medium {
  --ribbon_line_height: 1.8182;
}

.ribbon.large {
  --ribbon_line_height: 1.5385;
}

.ribbon.xlarge {
  --ribbon_line_height: 1.4286;
}

.ribbon::after,
.ribbon::before {
  position: absolute;
  content: '';
  top: 100% ;
  height: var(--zd_size10) ;
  width: var(--zd_size10) ;
}

.ribbon::after, .ribbon::before {
  border-style: solid;
  border-width: 5px;
  background-color: inherit;
}

[dir=ltr] .ribbon::after, [dir=ltr] .ribbon::before {
  border-color: transparent transparent var(--zdt_ribbon_flag_white_border) var(--zdt_ribbon_flag_white_border);
}

[dir=rtl] .ribbon::after, [dir=rtl] .ribbon::before {
  border-color: transparent var(--zdt_ribbon_flag_white_border) var(--zdt_ribbon_flag_white_border) transparent;
}

[dir=ltr] .ribbon::after {
  right: 0 ;
}

[dir=rtl] .ribbon::after {
  left: 0 ;
}

[dir=ltr] .ribbon::before {
  left: 0 ;
  transform: rotateY(180deg);
}

[dir=rtl] .ribbon::before {
  right: 0 ;
  transform: rotateY(-180deg);
}

.tag {
  composes: semibold from '../common/common.module.css';
  display: inline-block;
  height: var(--zd_size28) ;
  padding-block:var(--zd_size6) ;
  padding-inline:var(--zd_size5) var(--zd_size8) ;
  border-style: solid;
  border-color: var(--zdt_ribbon_default_tag_border);
;
}

[dir=ltr] .tag {
  border-width: 1px 1px 1px 0
    /*rtl: 1px 0 1px 1px*/
  ;
  border-radius: 0 3px 3px 0
    /*rtl: 3px 0 0 3px*/
  ;
  margin-left: var(--zd_size13) ;
;
}

[dir=rtl] .tag {
  border-width: 1px 0 1px 1px
  ;
  border-radius: 3px 0 0 3px
  ;
  margin-right: var(--zd_size13) ;
;
}

.tag::before {
  position: absolute;
  content: '';
  top: var(--ribbon_tag_before_top);
  width: var(--ribbon_tag_before_width);
  height: var(--ribbon_tag_before_height);
  background-color: inherit;
  border-style: var(--ribbon_tag_before_border_style);
  border-color: var(--ribbon_tag_before_border_color);
  border-width: var(--ribbon_tag_before_border_width);
  border-radius: var(--ribbon_tag_before_border_radius);
}

[dir=ltr] .tag::before {
  transform: rotate(-45deg);
  left: var(--ribbon_tag_before_left);
}

[dir=rtl] .tag::before {
  transform: rotate(45deg);
  right: var(--ribbon_tag_before_left);
}

.box {
  display: inline-block;
  --ribbon_bg_color: var(--zdt_ribbon_white_bg);
  --ribbon_padding: var(--zd_size5) var(--zd_size8);
  border-radius: 3px;
}

.stamp {
  display: inline-block;
  --ribbon_padding: var(--zd_size3) var(--zd_size5);
  --ribbon_text_transform: uppercase;
}

.sticker {
  display: block;
  height: var(--zd_size18) ;
  padding-block:var(--zd_size3) ;
  padding-inline:var(--zd_size10) ;
  --ribbon_text_color: var(--zdt_ribbon_white_text);
  --ribbon_text_transform: uppercase;
  text-align: center;
  border-width: 1px 0;
  border-style: solid;
  border-color: var(--zdt_ribbon_flag_white_border);
}

.sticker.small {
  line-height: 1.2223;
}

.sticker.medium {
  line-height: 1;
}

.sticker.large {
  line-height: 0.8462;
}

.sticker.xlarge {
  line-height: 0.7858;
}

.after,
.before {
  position: absolute;
  top: 0 ;
  bottom: 0 ;
  width: var(--zd_size10) ;
}

[dir=ltr] .after {
  right: calc( var(--zd_size2) * -1 ) ;
}

[dir=rtl] .after {
  left: calc( var(--zd_size2) * -1 ) ;
}

[dir=ltr] .before {
  left: calc( var(--zd_size8) * -1 ) ;
}

[dir=rtl] .before {
  right: calc( var(--zd_size8) * -1 ) ;
}

.after::after,
.after::before,
.before::after,
.before::before {
  position: absolute;
  height: var(--zd_size7) ;
  width: var(--zd_size7) ;
  content: '';
}

.after::after, .after::before, .before::after, .before::before {
  background-color: var(--zdt_ribbon_white_bg);
}

[dir=ltr] .after::after, [dir=ltr] .after::before, [dir=ltr] .before::after, [dir=ltr] .before::before {
  transform: rotate(45deg);
}

[dir=rtl] .after::after, [dir=rtl] .after::before, [dir=rtl] .before::after, [dir=rtl] .before::before {
  transform: rotate(-45deg);
}

.after::after,
.before::after {
  top: 0 ;
}

.after::before,
.before::before {
  bottom: 0 ;
}

.children {
  display: inline-block;
  margin-inline-end: var(--zd_size4) ;
  vertical-align: top;
  line-height: 0;
}

.childText {
  position: relative;
}