Unverified Commit 03bf48df authored by Lauri Timmanee's avatar Lauri Timmanee
Browse files

Issue #3194350 by mherchel, alexpott, oksana-c, lauriii, jwitkowski79,...

Issue #3194350 by mherchel, alexpott, oksana-c, lauriii, jwitkowski79, katannshaw, andrewmacpherson, ressa: Implement new form element designs for Olivero
parent b43c49e6
Loading
Loading
Loading
Loading
+1 −9
Original line number Diff line number Diff line
@@ -54,19 +54,11 @@

  /* Width of a grid column at various breakpoints */

  /* Layout helpers */ /* Black */ /* Black 1 */ /* Black 2 */ /* Black 3 */ /* Gray Dark */ /* Gray medium */ /* Gray medium 1 */ /* Gray medium 2 */ /* Black 4 */ /* Gray light */ /* Gray light 1 */ /* Gray light 2 */ /* Blue dark */ /* Blue dark 2 */ /* Blue medium */ /* Blue bright */ /* Blue bright 5 */ /* White */ /* Red */ /* Gold */ /* Green */

  /* Shadows */

  /* Radius */

  /* Outlines */
  /* Layout helpers */ /* Black */ /* Black 1 */ /* Black 2 */ /* Black 3 */ /* Gray Dark */ /* Gray Dark 2 */ /* Gray medium */ /* Gray medium 1 */ /* Gray medium 2 */ /* Black 4 */ /* Gray light */ /* Gray light 1 */ /* Gray light 2 */ /* Blue dark */ /* Blue dark 2 */ /* Blue medium */ /* Blue bright */ /* Blue bright 5 */ /* White */ /* Red */ /* Gold */ /* Green */

  /* Header */

  /* Width of slide out navigation */

  /* Border radius */

  /* Form */
}
+3 −18
Original line number Diff line number Diff line
@@ -120,12 +120,14 @@
  --color--gray-10: #313637; /* Black 2 */
  --color--gray-20: #6e7172; /* Black 3 */
  --color--gray-25: #5d7585; /* Gray Dark */
  --color--gray-28: #7d919d; /* Gray Dark 2 */
  --color--gray-30: #7e96a7; /* Gray medium */
  --color--gray-40: #98abb9; /* Gray medium 1 */
  --color--gray-45: #afb8be; /* Gray medium 2 */
  --color--gray-50: #9ea0a1; /* Black 4 */
  --color--gray-70: #d7e1e8; /* Gray light */
  --color--gray-80: #e7edf1; /* Gray light 1 */
  --color--gray-90: #f1f4f7;
  --color--gray-95: #f7f9fa; /* Gray light 2 */
  --color--blue-20: #0d77b5; /* Blue dark */
  --color--blue-30: #3d92c4; /* Blue dark 2 */
@@ -137,19 +139,6 @@
  --color--gold: #fdca40; /* Gold */
  --color--green: #3fa21c; /* Green */

  /* Shadows */
  --shadow-focusable: 0 0 0 2px var(--color--white), 0 0 0 4px var(--color--blue-70), var(--shadow-focusable-smooth);
  --shadow-focusable-smooth: 0 0 36px rgba(83, 176, 235, 0.25);

  /* Radius */
  --border-radius-base: 2px;

  /* Outlines */
  --outline--thin: 1px solid transparent;
  --outline--thick: 6px dashed transparent;
  --outline--base: 2px solid  var(--color--blue-70);
  --outline-offset: 2px;

  /* Header */
  --header-height-wide-when-fixed: calc(6 * var(--sp));

@@ -157,9 +146,5 @@
  --mobile-nav-width: 500px;

  /* Border radius */
  --border-radius: 2px;

  /* Form */
  --form-element-border-size-base: 2px;
  --form-element-border-size-left: 6px;
  --border-radius: 3px;
}
+6 −116
Original line number Diff line number Diff line
@@ -22,83 +22,19 @@ html[dir="rtl"].js .form-autocomplete {
}

html.js .form-autocomplete {
  background:
    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18.8' viewBox='0 0 18 18.8'%3e  %3cpath fill='%237e96a7' d='M17.8,17.4l-3.6-3.6c1.4-1.5,2.2-3.4,2.2-5.6c0-4.5-3.7-8.2-8.2-8.2S0,3.7,0,8.2s3.7,8.2,8.2,8.2c1.8,0,3.4-0.6,4.7-1.5l3.7,3.7c0.3,0.3,0.8,0.3,1.2,0C18.1,18.3,18.1,17.7,17.8,17.4z M8.2,14.7c-3.6,0-6.5-2.9-6.5-6.5s2.9-6.5,6.5-6.5s6.5,2.9,6.5,6.5S11.8,14.7,8.2,14.7z'/%3e%3c/svg%3e") no-repeat right 1.125rem top 1rem,
    linear-gradient(to right, #7e96a7 0.375rem, transparent 0.375rem, transparent 100%) #f7f9fa
}

html.js .form-autocomplete:hover {
    background:
      url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18.8' viewBox='0 0 18 18.8'%3e  %3cpath fill='%237e96a7' d='M17.8,17.4l-3.6-3.6c1.4-1.5,2.2-3.4,2.2-5.6c0-4.5-3.7-8.2-8.2-8.2S0,3.7,0,8.2s3.7,8.2,8.2,8.2c1.8,0,3.4-0.6,4.7-1.5l3.7,3.7c0.3,0.3,0.8,0.3,1.2,0C18.1,18.3,18.1,17.7,17.8,17.4z M8.2,14.7c-3.6,0-6.5-2.9-6.5-6.5s2.9-6.5,6.5-6.5s6.5,2.9,6.5,6.5S11.8,14.7,8.2,14.7z'/%3e%3c/svg%3e") no-repeat right 1.125rem top 1rem,
      linear-gradient(to right, #53b0eb 0.375rem, transparent 0.375rem, transparent 100%),
      linear-gradient(to left, #53b0eb 2px, transparent 2px, transparent 100%) #f7f9fa;
  }

html.js .form-autocomplete:focus {
    background:
      url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18.8' viewBox='0 0 18 18.8'%3e  %3cpath fill='%237e96a7' d='M17.8,17.4l-3.6-3.6c1.4-1.5,2.2-3.4,2.2-5.6c0-4.5-3.7-8.2-8.2-8.2S0,3.7,0,8.2s3.7,8.2,8.2,8.2c1.8,0,3.4-0.6,4.7-1.5l3.7,3.7c0.3,0.3,0.8,0.3,1.2,0C18.1,18.3,18.1,17.7,17.8,17.4z M8.2,14.7c-3.6,0-6.5-2.9-6.5-6.5s2.9-6.5,6.5-6.5s6.5,2.9,6.5,6.5S11.8,14.7,8.2,14.7z'/%3e%3c/svg%3e") no-repeat right 1.125rem top 1rem,
      linear-gradient(to right, #53b0eb 0.375rem, transparent 0.375rem, transparent 100%),
      linear-gradient(to left, #53b0eb 2px, transparent 2px, transparent 100%) #f7f9fa;
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18.8' viewBox='0 0 18 18.8'%3e  %3cpath fill='%237e96a7' d='M17.8,17.4l-3.6-3.6c1.4-1.5,2.2-3.4,2.2-5.6c0-4.5-3.7-8.2-8.2-8.2S0,3.7,0,8.2s3.7,8.2,8.2,8.2c1.8,0,3.4-0.6,4.7-1.5l3.7,3.7c0.3,0.3,0.8,0.3,1.2,0C18.1,18.3,18.1,17.7,17.8,17.4z M8.2,14.7c-3.6,0-6.5-2.9-6.5-6.5s2.9-6.5,6.5-6.5s6.5,2.9,6.5,6.5S11.8,14.7,8.2,14.7z'/%3e%3c/svg%3e") no-repeat right 1.125rem center
}

html.js .form-autocomplete.ui-autocomplete-loading {
    background:
      url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 10 10'%3e  %3cstyle type='text/css'%3e%40keyframes s%7b0%25%7btransform:rotate(0deg) translate(-50%25,-50%25)%7d50%25%7btransform:rotate(430deg) translate(-50%25,-50%25);stroke-dashoffset:20%7d100%25%7btransform:rotate(720deg) translate(-50%25,-50%25)%7d%7dellipse%7banimation:s 1s linear infinite%7d%3c/style%3e  %3cg transform='translate(5 5)'%3e    %3cellipse fill='none' ry='4' rx='4' cy='5' cx='5' stroke='%237e96a7' stroke-width='1' stroke-dashoffset='6.125' stroke-dasharray='25' transform='translate(-5 -5)'/%3e  %3c/g%3e%3c/svg%3e") no-repeat right 1.125rem top 1rem,
      linear-gradient(to right, #7e96a7 0.375rem, transparent 0.375rem, transparent 100%) #f7f9fa
  }

html.js .form-autocomplete.ui-autocomplete-loading:hover {
      background:
        url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 10 10'%3e  %3cstyle type='text/css'%3e%40keyframes s%7b0%25%7btransform:rotate(0deg) translate(-50%25,-50%25)%7d50%25%7btransform:rotate(430deg) translate(-50%25,-50%25);stroke-dashoffset:20%7d100%25%7btransform:rotate(720deg) translate(-50%25,-50%25)%7d%7dellipse%7banimation:s 1s linear infinite%7d%3c/style%3e  %3cg transform='translate(5 5)'%3e    %3cellipse fill='none' ry='4' rx='4' cy='5' cx='5' stroke='%237e96a7' stroke-width='1' stroke-dashoffset='6.125' stroke-dasharray='25' transform='translate(-5 -5)'/%3e  %3c/g%3e%3c/svg%3e") no-repeat right 1.125rem top 1rem,
        linear-gradient(to right, #53b0eb 0.375rem, transparent 0.375rem, transparent 100%),
        linear-gradient(to left, #53b0eb 2px, transparent 2px, transparent 100%) #f7f9fa;
    }

html.js .form-autocomplete.ui-autocomplete-loading:focus {
      background:
        url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 10 10'%3e  %3cstyle type='text/css'%3e%40keyframes s%7b0%25%7btransform:rotate(0deg) translate(-50%25,-50%25)%7d50%25%7btransform:rotate(430deg) translate(-50%25,-50%25);stroke-dashoffset:20%7d100%25%7btransform:rotate(720deg) translate(-50%25,-50%25)%7d%7dellipse%7banimation:s 1s linear infinite%7d%3c/style%3e  %3cg transform='translate(5 5)'%3e    %3cellipse fill='none' ry='4' rx='4' cy='5' cx='5' stroke='%237e96a7' stroke-width='1' stroke-dashoffset='6.125' stroke-dasharray='25' transform='translate(-5 -5)'/%3e  %3c/g%3e%3c/svg%3e") no-repeat right 1.125rem top 1rem,
        linear-gradient(to right, #53b0eb 0.375rem, transparent 0.375rem, transparent 100%),
        linear-gradient(to left, #53b0eb 2px, transparent 2px, transparent 100%) #f7f9fa;
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 10 10'%3e  %3cstyle type='text/css'%3e%40keyframes s%7b0%25%7btransform:rotate(0deg) translate(-50%25,-50%25)%7d50%25%7btransform:rotate(430deg) translate(-50%25,-50%25);stroke-dashoffset:20%7d100%25%7btransform:rotate(720deg) translate(-50%25,-50%25)%7d%7dellipse%7banimation:s 1s linear infinite%7d%3c/style%3e  %3cg transform='translate(5 5)'%3e    %3cellipse fill='none' ry='4' rx='4' cy='5' cx='5' stroke='%237e96a7' stroke-width='1' stroke-dashoffset='6.125' stroke-dasharray='25' transform='translate(-5 -5)'/%3e  %3c/g%3e%3c/svg%3e") no-repeat right 1.125rem center;
  }

html.js[dir="rtl"] .form-autocomplete {
  background:
    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18.8' viewBox='0 0 18 18.8'%3e  %3cpath fill='%237e96a7' d='M17.8,17.4l-3.6-3.6c1.4-1.5,2.2-3.4,2.2-5.6c0-4.5-3.7-8.2-8.2-8.2S0,3.7,0,8.2s3.7,8.2,8.2,8.2c1.8,0,3.4-0.6,4.7-1.5l3.7,3.7c0.3,0.3,0.8,0.3,1.2,0C18.1,18.3,18.1,17.7,17.8,17.4z M8.2,14.7c-3.6,0-6.5-2.9-6.5-6.5s2.9-6.5,6.5-6.5s6.5,2.9,6.5,6.5S11.8,14.7,8.2,14.7z'/%3e%3c/svg%3e") no-repeat left 1.125rem top 1rem,
    linear-gradient(to left, #7e96a7 0.375rem, transparent 0.375rem, transparent 100%) #f7f9fa
}

html.js[dir="rtl"] .form-autocomplete:hover {
    background:
      url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18.8' viewBox='0 0 18 18.8'%3e  %3cpath fill='%237e96a7' d='M17.8,17.4l-3.6-3.6c1.4-1.5,2.2-3.4,2.2-5.6c0-4.5-3.7-8.2-8.2-8.2S0,3.7,0,8.2s3.7,8.2,8.2,8.2c1.8,0,3.4-0.6,4.7-1.5l3.7,3.7c0.3,0.3,0.8,0.3,1.2,0C18.1,18.3,18.1,17.7,17.8,17.4z M8.2,14.7c-3.6,0-6.5-2.9-6.5-6.5s2.9-6.5,6.5-6.5s6.5,2.9,6.5,6.5S11.8,14.7,8.2,14.7z'/%3e%3c/svg%3e") no-repeat left 1.125rem top 1rem,
      linear-gradient(to left, #53b0eb 0.375rem, transparent 0.375rem, transparent 100%),
      linear-gradient(to right, #53b0eb 2px, transparent 2px, transparent 100%) #f7f9fa;
  }

html.js[dir="rtl"] .form-autocomplete:focus {
    background:
      url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18.8' viewBox='0 0 18 18.8'%3e  %3cpath fill='%237e96a7' d='M17.8,17.4l-3.6-3.6c1.4-1.5,2.2-3.4,2.2-5.6c0-4.5-3.7-8.2-8.2-8.2S0,3.7,0,8.2s3.7,8.2,8.2,8.2c1.8,0,3.4-0.6,4.7-1.5l3.7,3.7c0.3,0.3,0.8,0.3,1.2,0C18.1,18.3,18.1,17.7,17.8,17.4z M8.2,14.7c-3.6,0-6.5-2.9-6.5-6.5s2.9-6.5,6.5-6.5s6.5,2.9,6.5,6.5S11.8,14.7,8.2,14.7z'/%3e%3c/svg%3e") no-repeat left 1.125rem top 1rem,
      linear-gradient(to left, #53b0eb 0.375rem, transparent 0.375rem, transparent 100%),
      linear-gradient(to right, #53b0eb 2px, transparent 2px, transparent 100%) #f7f9fa;
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18.8' viewBox='0 0 18 18.8'%3e  %3cpath fill='%237e96a7' d='M17.8,17.4l-3.6-3.6c1.4-1.5,2.2-3.4,2.2-5.6c0-4.5-3.7-8.2-8.2-8.2S0,3.7,0,8.2s3.7,8.2,8.2,8.2c1.8,0,3.4-0.6,4.7-1.5l3.7,3.7c0.3,0.3,0.8,0.3,1.2,0C18.1,18.3,18.1,17.7,17.8,17.4z M8.2,14.7c-3.6,0-6.5-2.9-6.5-6.5s2.9-6.5,6.5-6.5s6.5,2.9,6.5,6.5S11.8,14.7,8.2,14.7z'/%3e%3c/svg%3e") no-repeat left 1.125rem center
}

html.js[dir="rtl"] .form-autocomplete.ui-autocomplete-loading {
    background:
      url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 10 10'%3e  %3cstyle type='text/css'%3e%40keyframes s%7b0%25%7btransform:rotate(0deg) translate(-50%25,-50%25)%7d50%25%7btransform:rotate(430deg) translate(-50%25,-50%25);stroke-dashoffset:20%7d100%25%7btransform:rotate(720deg) translate(-50%25,-50%25)%7d%7dellipse%7banimation:s 1s linear infinite%7d%3c/style%3e  %3cg transform='translate(5 5)'%3e    %3cellipse fill='none' ry='4' rx='4' cy='5' cx='5' stroke='%237e96a7' stroke-width='1' stroke-dashoffset='6.125' stroke-dasharray='25' transform='translate(-5 -5)'/%3e  %3c/g%3e%3c/svg%3e") no-repeat left 1.125rem top 1rem,
      linear-gradient(to left, #7e96a7 0.375rem, transparent 0.375rem, transparent 100%) #f7f9fa
  }

html.js[dir="rtl"] .form-autocomplete.ui-autocomplete-loading:hover {
      background:
        url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 10 10'%3e  %3cstyle type='text/css'%3e%40keyframes s%7b0%25%7btransform:rotate(0deg) translate(-50%25,-50%25)%7d50%25%7btransform:rotate(430deg) translate(-50%25,-50%25);stroke-dashoffset:20%7d100%25%7btransform:rotate(720deg) translate(-50%25,-50%25)%7d%7dellipse%7banimation:s 1s linear infinite%7d%3c/style%3e  %3cg transform='translate(5 5)'%3e    %3cellipse fill='none' ry='4' rx='4' cy='5' cx='5' stroke='%237e96a7' stroke-width='1' stroke-dashoffset='6.125' stroke-dasharray='25' transform='translate(-5 -5)'/%3e  %3c/g%3e%3c/svg%3e") no-repeat left 1.125rem top 1rem,
        linear-gradient(to left, #53b0eb 0.375rem, transparent 0.375rem, transparent 100%),
        linear-gradient(to right, #53b0eb 2px, transparent 2px, transparent 100%) #f7f9fa;
    }

html.js[dir="rtl"] .form-autocomplete.ui-autocomplete-loading:focus {
      background:
        url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 10 10'%3e  %3cstyle type='text/css'%3e%40keyframes s%7b0%25%7btransform:rotate(0deg) translate(-50%25,-50%25)%7d50%25%7btransform:rotate(430deg) translate(-50%25,-50%25);stroke-dashoffset:20%7d100%25%7btransform:rotate(720deg) translate(-50%25,-50%25)%7d%7dellipse%7banimation:s 1s linear infinite%7d%3c/style%3e  %3cg transform='translate(5 5)'%3e    %3cellipse fill='none' ry='4' rx='4' cy='5' cx='5' stroke='%237e96a7' stroke-width='1' stroke-dashoffset='6.125' stroke-dasharray='25' transform='translate(-5 -5)'/%3e  %3c/g%3e%3c/svg%3e") no-repeat left 1.125rem top 1rem,
        linear-gradient(to left, #53b0eb 0.375rem, transparent 0.375rem, transparent 100%),
        linear-gradient(to right, #53b0eb 2px, transparent 2px, transparent 100%) #f7f9fa;
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 10 10'%3e  %3cstyle type='text/css'%3e%40keyframes s%7b0%25%7btransform:rotate(0deg) translate(-50%25,-50%25)%7d50%25%7btransform:rotate(430deg) translate(-50%25,-50%25);stroke-dashoffset:20%7d100%25%7btransform:rotate(720deg) translate(-50%25,-50%25)%7d%7dellipse%7banimation:s 1s linear infinite%7d%3c/style%3e  %3cg transform='translate(5 5)'%3e    %3cellipse fill='none' ry='4' rx='4' cy='5' cx='5' stroke='%237e96a7' stroke-width='1' stroke-dashoffset='6.125' stroke-dasharray='25' transform='translate(-5 -5)'/%3e  %3c/g%3e%3c/svg%3e") no-repeat left 1.125rem center;
  }

/* IE11 does not animate inline SVG. */
@@ -109,58 +45,12 @@ html.js[dir="rtl"] .form-autocomplete.ui-autocomplete-loading:focus {

_:-ms-fullscreen,
html[dir=ltr].js .form-autocomplete.ui-autocomplete-loading {
  background:
    url("../../images/throbber.gif") no-repeat right 1.125rem top 1rem / 1.125rem 1.125rem,
    linear-gradient(to right, #7e96a7 0.375rem, transparent 0.375rem, transparent 100%) #f7f9fa;
}

/* stylelint-disable-next-line selector-type-no-unknown */

_:-ms-fullscreen,
html[dir=ltr].js .form-autocomplete.ui-autocomplete-loading:hover {
  background:
    url("../../images/throbber.gif") no-repeat right 1.125rem top 1rem / 1.125rem 1.125rem,
    linear-gradient(to right, #53b0eb 0.375rem, transparent 0.375rem, transparent 100%),
    linear-gradient(to left, #53b0eb 2px, transparent 2px, transparent 100%) #f7f9fa;
}

/* stylelint-disable-next-line selector-type-no-unknown */

_:-ms-fullscreen,
html[dir=ltr].js .form-autocomplete.ui-autocomplete-loading:focus {
  background:
    url("../../images/throbber.gif") no-repeat right 1.125rem top 1rem / 1.125rem 1.125rem,
    linear-gradient(to right, #53b0eb 0.375rem, transparent 0.375rem, transparent 100%),
    linear-gradient(to left, #53b0eb 2px, transparent 2px, transparent 100%) #f7f9fa;
  background: url("../../images/throbber.gif") no-repeat right 1.125rem center / 1.125rem 1.125rem;
}

/* stylelint-disable-next-line selector-type-no-unknown */

_:-ms-fullscreen,
html[dir=rtl].js .form-autocomplete.ui-autocomplete-loading {
  background:
    url("../../images/throbber.gif") no-repeat left 1.125rem top 1rem / 1.125rem 1.125rem,
    linear-gradient(to left, #7e96a7 0.375rem, transparent 0.375rem, transparent 100%) #f7f9fa;
}

/* stylelint-disable-next-line selector-type-no-unknown */

_:-ms-fullscreen,
html[dir=rtl].js .form-autocomplete.ui-autocomplete-loading:hover {
  background:
    url("../../images/throbber.gif") no-repeat left 1.125rem top 1rem / 1.125rem 1.125rem,
    linear-gradient(to left, #53b0eb 0.375rem, transparent 0.375rem, transparent 100%),
    linear-gradient(to right, #53b0eb 2px, transparent 2px, transparent 100%) #f7f9fa;
  background: url("../../images/throbber.gif") no-repeat left 1.125rem center / 1.125rem 1.125rem;
}

/* stylelint-disable-next-line selector-type-no-unknown */

_:-ms-fullscreen,
html[dir=rtl].js .form-autocomplete.ui-autocomplete-loading:focus {
  background:
    url("../../images/throbber.gif") no-repeat left 1.125rem top 1rem / 1.125rem 1.125rem,
    linear-gradient(to left, #53b0eb 0.375rem, transparent 0.375rem, transparent 100%),
    linear-gradient(to right, #53b0eb 2px, transparent 2px, transparent 100%) #f7f9fa;
}

/* rtl:end:ignore */
+6 −112

File changed.

Preview size limit exceeded, changes collapsed.

+11 −55
Original line number Diff line number Diff line
@@ -26,22 +26,6 @@
  margin-left: 1.125rem
}

[dir="ltr"] .button {
  padding-left: 1.6875rem
}

[dir="rtl"] .button {
  padding-right: 1.6875rem
}

[dir="ltr"] .button {
  padding-right: 1.6875rem
}

[dir="rtl"] .button {
  padding-left: 1.6875rem
}

.button {
  display: inline-block;
  height: 3.375rem;
@@ -49,17 +33,18 @@
  margin-bottom: 1.125rem;
  padding-top: 1.125rem;
  padding-bottom: 1.125rem;
  padding-left: 1.6875rem;
  padding-right: 1.6875rem;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  color: #0d77b5;
  border: 2px solid #0d77b5;
  border-radius: 2px;
  border: solid 2px #0d77b5;
  border-radius: 0.1875rem;
  background-color: #fff;
  font-family: inherit;
  font-size: 0.875rem;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.125rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
@@ -76,13 +61,11 @@
.button:focus {
    outline: 2px solid #53b0eb;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #53b0eb, 0 0 36px rgba(83, 176, 235, 0.25);
  }

.button:active {
    color: #0d77b5;
    border-color: #0d77b5;
    box-shadow: none;
  }

.button:disabled,
@@ -102,22 +85,6 @@

@supports (display: inline-flex) {

[dir="ltr"] .button {
    padding-left: 1.6875rem
  }

[dir="rtl"] .button {
    padding-right: 1.6875rem
  }

[dir="ltr"] .button {
    padding-right: 1.6875rem
  }

[dir="rtl"] .button {
    padding-left: 1.6875rem
  }

.button {
    display: inline-flex;
    align-items: center;
@@ -125,6 +92,8 @@
    /* Top padding accounts for font not being vertically centered within line-height. */
    padding-top: 1px;
    padding-bottom: 0;
    padding-left: 1.6875rem;
    padding-right: 1.6875rem;
    line-height: 1.125rem
}
  }
@@ -152,26 +121,13 @@
  margin-bottom: 0;
}

[dir="ltr"] .button--small {
  padding-left: 1.6875rem
}

[dir="rtl"] .button--small {
  padding-right: 1.6875rem
}

[dir="ltr"] .button--small {
  padding-right: 1.6875rem
}

[dir="rtl"] .button--small {
  padding-left: 1.6875rem
}

.button--small {
  height: 2.8125rem;
  padding-top: 0.84375rem;
  padding-bottom: 0.84375rem;
  padding-left: 1.125rem;
  padding-right: 1.125rem;
  font-size: 1rem;
}

.button--primary {
Loading