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

core/themes/olivero/css/base/variables.css

+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 */

}

core/themes/olivero/css/base/variables.pcss.css

+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;

}

core/themes/olivero/css/components/autocomplete-loading.module.css

+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 */

core/themes/olivero/css/components/autocomplete-loading.module.pcss.css

+6 −112

File changed.

Preview size limit exceeded, changes collapsed.

core/themes/olivero/css/components/button.css

+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 {