@zohodesk/dot/lib/layout/SubtabLayout/SubtabLayout.module.css

In this Library, we Provide Some Basic Components to Build Your Application

.varClass {
  --borderColor: var(--zdt_subtablayout_border);
}

.tabHead,
.shadowStyle {
  position: relative;
  composes: varClass;
}

.tabHead, .shadowStyle {
  background: var(--zdt_subtablayout_tabhead_bg);
}

[dir=ltr] .left {
  margin-right: var(--zd_size15) ;
}

[dir=rtl] .left {
  margin-left: var(--zd_size15) ;
}

.plusIconLine {
  position: relative;
  z-index: 2;
}

.plusIconLine::before {
  position: absolute;
  content: '';
  width: var(--zd_size1) ;
  height: var(--zd_size28) ;
  top: var(--zd_size38) ;
  z-index: -1;
  background: var(--zdt_subtablayout_plusicon_bg);
}

[dir=ltr] .plusIconLine::before {
  left: var(--zd_size20) ;
}

[dir=rtl] .plusIconLine::before {
  right: var(--zd_size20) ;
}

.primary_borderStyle, .secondary_borderStyle {
  border-bottom: 1px solid var(--zdt_subtablayout_primary_border);
}

.tertiary_borderStyle {
  border-bottom: 1px solid var(--borderColor);
}

.shadowStyle::before {
  bottom: 0 ;
  content: '';
  position: absolute;
  top: var(--zd_size20) ;
  z-index: -1;
  box-shadow: var(--zd_bs_subtablayout_shadow);
  border-radius: 100px/10px;
}

[dir=ltr] .shadowStyle::before {
  left: var(--zd_size50) ;
  right: var(--zd_size50) ;
}

[dir=rtl] .shadowStyle::before {
  right: var(--zd_size50) ;
  left: var(--zd_size50) ;
}

.aside {
  composes: justifyFend from '~@zohodesk/components/es/common/common.module.css';
}

.title {
  color: var(--zdt_subtablayout_title_text);
  font-size: var(--zd_font_size15) ;
}

.label {
  font-size: var(--zd_font_size12) ;
  color: var(--zdt_subtablayout_label_text);
}

.primary, .primary_peek, .secondary, .secondary_peek, .primary_detailFooter, .primary_peekFooter, .secondary_detailFooter, .secondary_peekFooter {
  padding-top: var(--zd_size27) ;
  padding-bottom: var(--zd_size26) ;
}

[dir=ltr] .primary, [dir=ltr] .primary_peek, [dir=ltr] .secondary, [dir=ltr] .secondary_peek, [dir=ltr] .primary_detailFooter, [dir=ltr] .primary_peekFooter, [dir=ltr] .secondary_detailFooter, [dir=ltr] .secondary_peekFooter {
  padding-left: var(--zd_size25) ;
}

[dir=rtl] .primary, [dir=rtl] .primary_peek, [dir=rtl] .secondary, [dir=rtl] .secondary_peek, [dir=rtl] .primary_detailFooter, [dir=rtl] .primary_peekFooter, [dir=rtl] .secondary_detailFooter, [dir=rtl] .secondary_peekFooter {
  padding-right: var(--zd_size25) ;
}

[dir=ltr] .primary, [dir=ltr] .primary_peek {
  padding-right: var(--zd_size25) ;
}

[dir=rtl] .primary, [dir=rtl] .primary_peek {
  padding-left: var(--zd_size25) ;
}

[dir=ltr] .secondary, [dir=ltr] .secondary_peek {
  padding-right: var(--zd_size115) ;
}

[dir=rtl] .secondary, [dir=rtl] .secondary_peek {
  padding-left: var(--zd_size115) ;
}

[dir=ltr] .primary_detailFooter, [dir=ltr] .primary_peekFooter {
  padding-right: var(--zd_size25) ;
}

[dir=rtl] .primary_detailFooter, [dir=rtl] .primary_peekFooter {
  padding-left: var(--zd_size25) ;
}

[dir=ltr] .secondary_detailFooter, [dir=ltr] .secondary_peekFooter {
  padding-right: var(--zd_size115) ;
}

[dir=rtl] .secondary_detailFooter, [dir=rtl] .secondary_peekFooter {
  padding-left: var(--zd_size115) ;
}

.tertiary,
.tertiary_peek {
  height: var(--zd_size50) ;
}

.tertiary, .tertiary_detailFooter {
  padding: 0 var(--zd_size65) ;
}

.tertiary_peek, .tertiary_peekFooter {
  padding: 0 var(--zd_size42) ;
}

.cursor {
  cursor: pointer;
}

.footer {
  composes: varClass;
  border-top: 1px solid var(--borderColor);
}

.medium {
  height: var(--zd_size40) ;
}

.large {
  height: var(--zd_size45) ;
}

.xlarge {
  height: var(--zd_size50) ;
}