@vtmn/css-button/dist/index-base10.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:4.8rem;
  border:0;
  line-height:1;
  inline-size:-moz-max-content;
  inline-size:max-content;
  padding-block:1.4rem;
  padding-inline:2.4rem;
  font-family:'Roboto', 'system-ui', '-apple-system', sans-serif;
  font-weight:700;
  font-size:1.6rem;
  letter-spacing:0.027rem;
  border-radius:4px;
  color:hsl(0, 0%, 100%);
  fill:hsl(0, 0%, 100%);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  background-color:hsl(200, 100%, 36.9%);
  transition:box-shadow 200ms ease-out;
}

.vtmn-btn:not(:disabled):hover{
  background-color:hsla(200, 100%, calc(36.9% * 0.85), 1);
  cursor:pointer;
}

.vtmn-btn:not(:disabled):active{
  background-color:hsla(200, 100%, calc(36.9% * 0.7), 1);
}

.vtmn-btn:disabled{
  cursor:not-allowed;
  opacity:0.38;
}

.vtmn-btn:not(:disabled):focus-visible{
  outline:none;
  box-shadow:0 0 0 0.4rem hsl(210, 14.3%, 94.5%), 0 0 0 0.6rem hsl(200, 100%, 4.7%);
}

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

.vtmn-btn_variant--primary{
  background-color:hsl(200, 100%, 36.9%);
  color:hsl(0, 0%, 100%);
  fill:hsl(0, 0%, 100%);
}

.vtmn-btn_variant--primary:not(:disabled):hover{
  background-color:hsla(200, 100%, calc(36.9% * 0.85), 1);
}

.vtmn-btn_variant--primary:not(:disabled):active{
  background-color:hsla(200, 100%, calc(36.9% * 0.7), 1);
}

.vtmn-btn_variant--primary-reversed{
  box-shadow:none;
  background-color:hsl(0, 0%, 100%);
  color:hsl(200, 100%, 4.7%);
  fill:hsl(200, 100%, 4.7%);
}

.vtmn-btn_variant--primary-reversed:not(:disabled):hover{
  background-color:hsla(0, 0%, 100%, 0.8);
  box-shadow:inset 0 0 0 0.2rem hsl(210, 14.3%, 94.5%);
}

.vtmn-btn_variant--primary-reversed:not(:disabled):active{
  background-color:hsla(0, 0%, 100%, 0.6);
  box-shadow:inset 0 0 0 0.2rem hsl(210, 14.3%, 94.5%);
}

.vtmn-btn_variant--primary-reversed:not(:disabled):focus-visible{
  outline:none;
  box-shadow:inset 0 0 0 0.2rem hsl(210, 14.3%, 94.5%), 0 0 0 0.4rem hsl(210, 14.3%, 94.5%), 0 0 0 0.6rem hsl(200, 100%, 4.7%);
}

.vtmn-btn_variant--secondary{
  background-color:hsl(0, 0%, 100%);
  box-shadow:inset 0 0 0 0.2rem hsl(210, 11.8%, 86.7%);
  color:hsl(200, 100%, 30.8%);
  fill:hsl(200, 100%, 30.8%);
}

.vtmn-btn_variant--secondary:not(:disabled):hover{
  background-color:hsl(200, 60%, 94.1%);
}

.vtmn-btn_variant--secondary:not(:disabled):active{
  background-color:hsla(200, 60%, calc(94.1% * 0.97), 1);
}

.vtmn-btn_variant--secondary:not(:disabled):focus-visible{
  outline:none;
  box-shadow:inset 0 0 0 0.2rem hsl(210, 11.8%, 86.7%), 0 0 0 0.4rem hsl(210, 14.3%, 94.5%), 0 0 0 0.6rem hsl(200, 100%, 4.7%);
}

.vtmn-btn_variant--tertiary{
  background-color:hsl(200, 60%, 94.1%);
  color:hsl(200, 100%, 30.8%);
  fill:hsl(200, 100%, 30.8%);
}

.vtmn-btn_variant--tertiary:not(:disabled):hover{
  background-color:hsla(200, 60%, calc(94.1% * 0.95), 1);
}

.vtmn-btn_variant--tertiary:not(:disabled):active{
  background-color:hsla(200, 60%, calc(94.1% * 0.93), 1);
}

.vtmn-btn_variant--conversion{
  box-shadow:inset 0 0 0 0.2rem transparent;
  background-color:hsl(54, 100%, 57.8%);
  color:hsl(200, 100%, 4.7%);
  fill:hsl(200, 100%, 4.7%);
}

.vtmn-btn_variant--conversion:not(:disabled):hover{
  background-color:hsla(54, 100%, calc(57.8% + (100% - 57.8%) * 0.48), 1);
}

.vtmn-btn_variant--conversion:not(:disabled):active{
  background-color:hsla(54, 100%, calc(calc(57.8% + (100% - 57.8%) * 0.48) + (100% - calc(57.8% + (100% - 57.8%) * 0.48)) * 0.5), 1);
}

.vtmn-btn_variant--conversion:not(:disabled):focus-visible{
  outline:none;
  box-shadow:inset 0 0 0 0.2rem transparent, 0 0 0 0.4rem hsl(210, 14.3%, 94.5%), 0 0 0 0.6rem hsl(200, 100%, 4.7%);
}

.vtmn-btn_variant--ghost{
  background-color:transparent;
  box-shadow:inset 0 0 0 0.2rem transparent;
  color:hsl(200, 100%, 30.8%);
  fill:hsl(200, 100%, 30.8%);
}

.vtmn-btn_variant--ghost:not(:disabled):hover{
  background-color:hsl(200, 60%, 94.1%);
}

.vtmn-btn_variant--ghost:not(:disabled):active{
  background-color:hsla(200, 60%, calc(94.1% * 0.97), 1);
}

.vtmn-btn_variant--ghost:not(:disabled):focus-visible{
  outline:none;
  box-shadow:inset 0 0 0 0.2rem transparent, 0 0 0 0.4rem hsl(210, 14.3%, 94.5%), 0 0 0 0.6rem hsl(200, 100%, 4.7%);
}

.vtmn-btn_variant--ghost-reversed{
  background-color:transparent;
  color:hsl(0, 0%, 100%);
  fill:hsl(0, 0%, 100%);
}

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

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

.vtmn-btn_variant--ghost-reversed:not(:disabled):focus-visible{
  outline:none;
  box-shadow:0 0 0 0.4rem hsl(210, 14.3%, 94.5%), 0 0 0 0.6rem hsl(200, 100%, 4.7%);
}

.vtmn-btn_size--small{
  font-size:1.4rem;
  padding-block:0.8rem;
  padding-inline:1.6rem;
  block-size:3.2rem;
  letter-spacing:0.024rem;
}

.vtmn-btn_size--medium{
  font-size:1.6rem;
  padding-block:1.4rem;
  padding-inline:2.4rem;
  block-size:4.8rem;
  letter-spacing:0.027rem;
}

.vtmn-btn_size--large{
  font-size:2rem;
  padding-block:2rem;
  padding-inline:4rem;
  block-size:6.4rem;
  letter-spacing:0.034rem;
}

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

.vtmn-btn--icon-alone{
  inline-size:4.8rem;
  block-size:4.8rem;
  padding:1.4rem;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.vtmn-btn_variant--secondary-reversed{
  background-color:transparent;
  box-shadow:inset 0 0 0 0.2rem hsl(
    0,
    0%,
    100%
  );
  color:hsl(
    0,
    0%,
    100%
  );
  fill:hsl(
    0,
    0%,
    100%
  );
}

.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);
}