@zohodesk/components 1.0.0-temp-164 → 1.0.0-temp-165

package/lib/Ribbon/Ribbon.module.css

@@ -1,457 +1,455 @@
-.varClass {
-  /* ribbon default variables */
-  --ribbon_padding: 0;
-  --ribbon_text_color: var(--zdt_ribbon_default_text);
-  --ribbon_text_transform: none;
-  --ribbon_font_size: 13px;
-  --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: 3px;
-  --ribbon_tag_before_border_style: solid;
-  --ribbon_tag_before_border_color: var(--zdt_ribbon_default_tag_border);
-  --ribbon_tag_before_width: 20px;
-  --ribbon_tag_before_height: 20px;
-  --ribbon_tag_before_left: -10px;
-  --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 12px 14px 0  ;
-  --ribbon_tag_before_border_width: 1px 0 0 1px  ;
-}
-
-.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: 5px 20px;
-  --ribbon_text_color: var(--zdt_ribbon_white_text);
-  --ribbon_text_transform: uppercase;
-  text-align: center;
-}
-
-.small {
-  --ribbon_font_size: 9px;
-}
-
-.medium {
-  --ribbon_font_size: 11px;
-}
-
-.large {
-  --ribbon_font_size: 13px;
-}
-
-.xlarge {
-  --ribbon_font_size: 14px;
-}
-
-.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_line_height: 20px;
-  --ribbon_text_transform: uppercase;
-}
-
-[dir=ltr] .flag {
-  --ribbon_padding: 4px 24px 4px 6px
-    /*rtl: 4px 6px 4px 24px*/
-  ;
-}
-
-[dir=rtl] .flag {
-  --ribbon_padding: 4px 24px 4px 6px  ;
-}
-
-.flag::after {
-  position: absolute;
-  /*  Variable:Ignore  */
-  top: -1px;
-  /*  Variable:Ignore  */
-  /*  Variable:Ignore  */
-  bottom: -1px;
-  content: '';
-  width: 12px;
-  border-style: solid;
-  transform: translateZ(0);
-  border-width: var(--ribbon_flag_border_width);
-}
-
-[dir=ltr] .flag::after {
-  right: -1px;
-  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: -1px;
-  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: 6px 10px;
-  --ribbon_line_height: 20px;
-  text-align: center;
-}
-
-.ribbon::after,
-.ribbon::before {
-  position: absolute;
-  content: '';
-  top: 100%;
-  height: 10px;
-  width: 10px;
-}
-
-.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: 28px;
-  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: 13px;
-  padding: 6px 8px 6px 5px
-;
-}
-
-[dir=rtl] .tag {
-  border-width: 1px 0 1px 1px  ;
-  border-radius: 3px 0 0 3px  ;
-  margin-right: 13px;
-  padding: 6px 5px 6px 8px;
-}
-
-.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: 5px 8px;
-  border-radius: 3px;
-}
-
-.stamp {
-  display: inline-block;
-  --ribbon_padding: 3px 5px;
-  --ribbon_text_transform: uppercase;
-}
-
-.sticker {
-  display: block;
-  height: 18px;
-  line-height: var(--zd_size11);
-  --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);
-  padding: 3px 10px;
-}
-
-.after,
-.before {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  width: 10px;
-}
-
-[dir=ltr] .after {
-  right: -2px;
-}
-
-[dir=rtl] .after {
-  left: -2px;
-}
-
-[dir=ltr] .before {
-  left: -8px;
-}
-
-[dir=rtl] .before {
-  right: -8px;
-}
-
-.after::after,
-.after::before,
-.before::after,
-.before::before {
-  position: absolute;
-  height: 7px;
-  width: 7px;
-  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;
-  vertical-align: top;
-  line-height: 0;
-}
-
-[dir=ltr] .children {
-  margin-right: 4px;
-}
-
-[dir=rtl] .children {
-  margin-left: 4px;
-}
-
-.childText {
-  position: relative;
+.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 12px 14px 0  ;
+  --ribbon_tag_before_border_width: 1px 0 0 1px  ;
+}
+
+.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_line_height: 20px;
+  --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_size24) var(--zd_size4) var(--zd_size6);
+}
+
+.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);
+  --ribbon_line_height: 20px;
+  text-align: center;
+}
+
+.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) ;
+  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) ;
+  padding: var(--zd_size6) var(--zd_size8) var(--zd_size6) var(--zd_size5) ;
+}
+
+[dir=rtl] .tag {
+  border-width: 1px 0 1px 1px  ;
+  border-radius: 3px 0 0 3px  ;
+  margin-right: var(--zd_size13) ;
+  padding: var(--zd_size6) var(--zd_size5) var(--zd_size6) var(--zd_size8) ;
+}
+
+.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) ;
+  line-height: var(--zd_size11);
+  --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);
+  padding: var(--zd_size3) var(--zd_size10) ;
+}
+
+.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;
+  vertical-align: top;
+  line-height: 0;
+}
+
+[dir=ltr] .children {
+  margin-right: var(--zd_size4) ;
+}
+
+[dir=rtl] .children {
+  margin-left: var(--zd_size4) ;
+}
+
+.childText {
+  position: relative;
 }