@vtmn/css-button/dist/index-with-vars.css

Decathlon Design System - Vitamin specific CSS styles for button component

.vtmn-btn{
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:center;
  position:relative;
  block-size:3rem;
  border:0;
  line-height:1;
  inline-size:-moz-max-content;
  inline-size:max-content;
  padding-block:0.875rem;
  padding-inline:1.5rem;
  font-family:var(--vtmn-typo_font-family);
  font-weight:var(--vtmn-typo_font-weight--bold);
  font-size:var(--vtmn-typo_text-2-font-size);
  letter-spacing:0.01687rem;
  border-radius:var(--vtmn-radius_100);
  color:var(--vtmn-semantic-color_content-primary-reversed);
  fill:var(--vtmn-semantic-color_content-primary-reversed);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  background-color:var(--vtmn-semantic-color_background-brand-primary);
  transition:var(--vtmn-transition_focus-visible);
}

.vtmn-btn:not(:disabled):hover{
  background-color:var(--vtmn-semantic-color_hover-brand);
  cursor:pointer;
}

.vtmn-btn:not(:disabled):active{
  background-color:var(--vtmn-semantic-color_active-brand);
}

.vtmn-btn:disabled{
  cursor:not-allowed;
  opacity:var(--vtmn-opacity_disabled-state);
}

.vtmn-btn:not(:disabled):focus-visible{
  outline:none;
  box-shadow:var(--vtmn-shadow_focus-visible);
}

.vtmn-btn:not(:disabled){
  outline:none;
}

.vtmn-btn_variant--primary{
  background-color:var(--vtmn-semantic-color_background-brand-primary);
  color:var(--vtmn-semantic-color_content-primary-reversed);
  fill:var(--vtmn-semantic-color_content-primary-reversed);
}

.vtmn-btn_variant--primary:not(:disabled):hover{
  background-color:var(--vtmn-semantic-color_hover-brand);
}

.vtmn-btn_variant--primary:not(:disabled):active{
  background-color:var(--vtmn-semantic-color_active-brand);
}

.vtmn-btn_variant--primary-reversed{
  box-shadow:none;
  background-color:var(
    --vtmn-semantic-color_background-brand-primary-reversed
  );
  color:var(--vtmn-semantic-color_content-primary);
  fill:var(--vtmn-semantic-color_content-primary);
}

.vtmn-btn_variant--primary-reversed:not(:disabled):hover{
  background-color:var(
    --vtmn-semantic-color_hover-tertiary-reversed-transparent
  );
  box-shadow:inset 0 0 0 0.125rem var(--vtmn-semantic-color_border-secondary);
}

.vtmn-btn_variant--primary-reversed:not(:disabled):active{
  background-color:var(
    --vtmn-semantic-color_active-brand-reversed-transparent
  );
  box-shadow:inset 0 0 0 0.125rem var(--vtmn-semantic-color_border-secondary);
}

.vtmn-btn_variant--primary-reversed:not(:disabled):focus-visible{
  outline:none;
  box-shadow:inset 0 0 0 0.125rem var(--vtmn-semantic-color_border-secondary), 0 0 0 0.25rem var(--vtmn-semantic-color_border-secondary), 0 0 0 0.375rem var(--vtmn-semantic-color_border-primary-reversed);
}

.vtmn-btn_variant--secondary{
  background-color:var(--vtmn-semantic-color_background-primary);
  box-shadow:inset 0 0 0 0.125rem var(--vtmn-semantic-color_border-primary);
  color:var(--vtmn-semantic-color_content-action);
  fill:var(--vtmn-semantic-color_content-action);
}

.vtmn-btn_variant--secondary:not(:disabled):hover{
  background-color:var(--vtmn-semantic-color_hover-primary);
}

.vtmn-btn_variant--secondary:not(:disabled):active{
  background-color:var(--vtmn-semantic-color_active-primary);
}

.vtmn-btn_variant--secondary:not(:disabled):focus-visible{
  outline:none;
  box-shadow:inset 0 0 0 0.125rem var(--vtmn-semantic-color_border-primary), var(--vtmn-shadow_focus-visible);
}

.vtmn-btn_variant--tertiary{
  background-color:var(--vtmn-semantic-color_background-brand-secondary);
  color:var(--vtmn-semantic-color_content-action);
  fill:var(--vtmn-semantic-color_content-action);
}

.vtmn-btn_variant--tertiary:not(:disabled):hover{
  background-color:var(--vtmn-semantic-color_hover-tertiary);
}

.vtmn-btn_variant--tertiary:not(:disabled):active{
  background-color:var(--vtmn-semantic-color_active-tertiary);
}

.vtmn-btn_variant--conversion{
  box-shadow:inset 0 0 0 0.125rem transparent;
  background-color:var(--vtmn-semantic-color_background-accent);
  color:var(--vtmn-semantic-color_content-accent);
  fill:var(--vtmn-semantic-color_content-accent);
}

.vtmn-btn_variant--conversion:not(:disabled):hover{
  background-color:var(--vtmn-semantic-color_hover-accent);
}

.vtmn-btn_variant--conversion:not(:disabled):active{
  background-color:var(--vtmn-semantic-color_active-accent);
}

.vtmn-btn_variant--conversion:not(:disabled):focus-visible{
  outline:none;
  box-shadow:inset 0 0 0 0.125rem transparent, var(--vtmn-shadow_focus-visible);
}

.vtmn-btn_variant--ghost{
  background-color:transparent;
  box-shadow:inset 0 0 0 0.125rem transparent;
  color:var(--vtmn-semantic-color_content-action);
  fill:var(--vtmn-semantic-color_content-action);
}

.vtmn-btn_variant--ghost:not(:disabled):hover{
  background-color:var(--vtmn-semantic-color_hover-primary);
}

.vtmn-btn_variant--ghost:not(:disabled):active{
  background-color:var(--vtmn-semantic-color_active-primary);
}

.vtmn-btn_variant--ghost:not(:disabled):focus-visible{
  outline:none;
  box-shadow:inset 0 0 0 0.125rem transparent, var(--vtmn-shadow_focus-visible);
}

.vtmn-btn_variant--ghost-reversed{
  background-color:transparent;
  color:var(--vtmn-semantic-color_content-action-reversed);
  fill:var(--vtmn-semantic-color_content-action-reversed);
}

.vtmn-btn_variant--ghost-reversed:not(:disabled):hover{
  background-color:var(
    --vtmn-semantic-color_hover-primary-reversed-transparent
  );
}

.vtmn-btn_variant--ghost-reversed:not(:disabled):active{
  background-color:var(
    --vtmn-semantic-color_active-primary-reversed-transparent
  );
}

.vtmn-btn_variant--ghost-reversed:not(:disabled):focus-visible{
  outline:none;
  box-shadow:0 0 0 0.25rem var(--vtmn-semantic-color_border-secondary), 0 0 0 0.375rem var(--vtmn-semantic-color_border-primary-reversed);
}

.vtmn-btn_size--small{
  font-size:0.875rem;
  padding-block:0.5rem;
  padding-inline:1rem;
  block-size:2rem;
  letter-spacing:0.015rem;
}

.vtmn-btn_size--medium{
  font-size:1rem;
  padding-block:0.875rem;
  padding-inline:1.5rem;
  block-size:3rem;
  letter-spacing:0.01687rem;
}

.vtmn-btn_size--large{
  font-size:1.25rem;
  padding-block:1.25rem;
  padding-inline:2.5rem;
  block-size:4rem;
  letter-spacing:0.02125rem;
}

.vtmn-btn_size--stretched{
  inline-size:100%;
}

.vtmn-btn--icon-alone{
  inline-size:3rem;
  block-size:3rem;
  padding:0.875rem;
}

.vtmn-btn--icon-alone span[class^='vtmx-']{
  font-size:1.5rem;
}

.vtmn-btn_size--small.vtmn-btn--icon-alone{
  inline-size:2rem;
  block-size:2rem;
  padding:0.5rem;
}

.vtmn-btn_size--small.vtmn-btn--icon-alone span[class^='vtmx-']{
  font-size:1.25rem;
}

.vtmn-btn_size--medium.vtmn-btn--icon-alone{
  inline-size:3rem;
  block-size:3rem;
  padding:0.875rem;
}

.vtmn-btn_size--medium.vtmn-btn--icon-alone span[class^='vtmx-']{
  font-size:1.5rem;
}

.vtmn-btn_size--large.vtmn-btn--icon-alone{
  inline-size:4rem;
  block-size:4rem;
  padding:1.25rem;
}

.vtmn-btn_size--large.vtmn-btn--icon-alone span[class^='vtmx-']{
  font-size:2rem;
}

.vtmn-btn--icon-left span[class^='vtmx-'],
.vtmn-btn_size--medium.vtmn-btn--icon-left span[class^='vtmx-']{
  -webkit-padding-end:0.5rem;
          padding-inline-end:0.5rem;
  font-size:1.25rem;
}

.vtmn-btn_size--small.vtmn-btn--icon-left span[class^='vtmx-']{
  -webkit-padding-end:0.375rem;
          padding-inline-end:0.375rem;
  font-size:1rem;
}

.vtmn-btn_size--small.vtmn-btn--icon-right span[class^='vtmx-']{
  -webkit-padding-start:0.375rem;
          padding-inline-start:0.375rem;
  font-size:1rem;
}

.vtmn-btn_size--small.vtmn-btn--icon-left svg{
  -webkit-margin-end:0.375rem;
          margin-inline-end:0.375rem;
}

.vtmn-btn_size--small.vtmn-btn--icon-right svg{
  -webkit-margin-start:0.375rem;
          margin-inline-start:0.375rem;
}

.vtmn-btn--icon-right span[class^='vtmx-'],
.vtmn-btn_size--medium.vtmn-btn--icon-right span[class^='vtmx-']{
  -webkit-padding-start:0.5rem;
          padding-inline-start:0.5rem;
  font-size:1.25rem;
}

.vtmn-btn_size--medium.vtmn-btn--icon-left svg{
  -webkit-margin-end:0.5rem;
          margin-inline-end:0.5rem;
}

.vtmn-btn_size--medium.vtmn-btn--icon-right svg{
  -webkit-margin-start:0.5rem;
          margin-inline-start:0.5rem;
}

.vtmn-btn_size--large.vtmn-btn--icon-left span[class^='vtmx-']{
  -webkit-padding-end:0.75rem;
          padding-inline-end:0.75rem;
  font-size:1.5rem;
}

.vtmn-btn_size--large.vtmn-btn--icon-right span[class^='vtmx-']{
  -webkit-padding-start:0.75rem;
          padding-inline-start:0.75rem;
  font-size:1.5rem;
}

.vtmn-btn_size--large.vtmn-btn--icon-left svg{
  -webkit-margin-end:0.75rem;
          margin-inline-end:0.75rem;
}

.vtmn-btn_size--large.vtmn-btn--icon-right svg{
  -webkit-margin-start:0.75rem;
          margin-inline-start:0.75rem;
}

.vtmn-btn--multiline{
  white-space:normal;
}

.vtmn-btn_variant--secondary-reversed{
  background-color:transparent;
  box-shadow:inset 0 0 0 0.125rem var(--vtmn-base-color_white);
  color:var(--vtmn-base-color_white);
  fill:var(--vtmn-base-color_white);
}

.vtmn-btn_variant--secondary-reversed:not(:disabled):hover{
  background-color:hsla(0, 0%, 100%, 0.2);
}

.vtmn-btn_variant--secondary-reversed:not(:disabled):active{
  background-color:hsla(0, 0%, 100%, 0.4);
}

@media screen and (min-width: 600px) and (max-width: 899px){
}

@media screen and (min-width: 900px) and (max-width: 1199px){
}

@media screen and (min-width: 1200px) and (max-width: 1799px){
}

@media screen and (min-width: 1800px){
}