Issue #3194350 by mherchel, alexpott, oksana-c, lauriii, jwitkowski79, katannshaw, andrewmacpherson, ressa: Implement new form element designs for Olivero
Lauri Eskola
parent
b43c49e6b0
commit
03bf48df25
|
|
@ -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 */
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,85 +22,21 @@ 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
|
||||
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: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;
|
||||
}
|
||||
|
||||
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
|
||||
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 .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;
|
||||
}
|
||||
|
||||
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
|
||||
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: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;
|
||||
}
|
||||
|
||||
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
|
||||
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;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
/* IE11 does not animate inline SVG. */
|
||||
|
||||
/* rtl:begin:ignore */
|
||||
|
|
@ -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;
|
||||
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: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;
|
||||
}
|
||||
|
||||
/* 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 */
|
||||
|
|
|
|||
|
|
@ -11,87 +11,22 @@
|
|||
--autocomplete-throbber-IE-icon-url: url("../../images/throbber.gif");
|
||||
--autocomplete-throbber-IE-size: 1.125rem 1.125rem; /* 18 18 */
|
||||
--autocomplete-icon-right-offset: var(--sp1);
|
||||
--autocomplete-icon-top-offset: calc(var(--sp1) - var(--form-element-border-size-base));
|
||||
}
|
||||
|
||||
html.js .form-autocomplete {
|
||||
padding-inline-end: var(--sp3);
|
||||
background:
|
||||
var(--autocomplete-search-icon-url) no-repeat right var(--autocomplete-icon-right-offset) top var(--autocomplete-icon-top-offset),
|
||||
linear-gradient(to right, var(--color--gray-30) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%) var(--color--gray-95);
|
||||
|
||||
&:hover {
|
||||
background:
|
||||
var(--autocomplete-search-icon-url) no-repeat right var(--autocomplete-icon-right-offset) top var(--autocomplete-icon-top-offset),
|
||||
linear-gradient(to right, var(--color--blue-70) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%),
|
||||
linear-gradient(to left, var(--color--blue-70) var(--form-element-border-size-base), transparent var(--form-element-border-size-base), transparent 100%) var(--color--gray-95);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background:
|
||||
var(--autocomplete-search-icon-url) no-repeat right var(--autocomplete-icon-right-offset) top var(--autocomplete-icon-top-offset),
|
||||
linear-gradient(to right, var(--color--blue-70) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%),
|
||||
linear-gradient(to left, var(--color--blue-70) var(--form-element-border-size-base), transparent var(--form-element-border-size-base), transparent 100%) var(--color--gray-95);
|
||||
}
|
||||
background: var(--autocomplete-search-icon-url) no-repeat right var(--autocomplete-icon-right-offset) center;
|
||||
|
||||
&.ui-autocomplete-loading {
|
||||
background:
|
||||
var(--autocomplete-throbber-icon-url) no-repeat right var(--autocomplete-icon-right-offset) top var(--autocomplete-icon-top-offset),
|
||||
linear-gradient(to right, var(--color--gray-30) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%) var(--color--gray-95);
|
||||
|
||||
&:hover {
|
||||
background:
|
||||
var(--autocomplete-throbber-icon-url) no-repeat right var(--autocomplete-icon-right-offset) top var(--autocomplete-icon-top-offset),
|
||||
linear-gradient(to right, var(--color--blue-70) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%),
|
||||
linear-gradient(to left, var(--color--blue-70) var(--form-element-border-size-base), transparent var(--form-element-border-size-base), transparent 100%) var(--color--gray-95);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background:
|
||||
var(--autocomplete-throbber-icon-url) no-repeat right var(--autocomplete-icon-right-offset) top var(--autocomplete-icon-top-offset),
|
||||
linear-gradient(to right, var(--color--blue-70) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%),
|
||||
linear-gradient(to left, var(--color--blue-70) var(--form-element-border-size-base), transparent var(--form-element-border-size-base), transparent 100%) var(--color--gray-95);
|
||||
}
|
||||
background: var(--autocomplete-throbber-icon-url) no-repeat right var(--autocomplete-icon-right-offset) center;
|
||||
}
|
||||
}
|
||||
|
||||
html.js[dir="rtl"] .form-autocomplete {
|
||||
background:
|
||||
var(--autocomplete-search-icon-url) no-repeat left var(--autocomplete-icon-right-offset) top var(--autocomplete-icon-top-offset),
|
||||
linear-gradient(to left, var(--color--gray-30) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%) var(--color--gray-95);
|
||||
|
||||
&:hover {
|
||||
background:
|
||||
var(--autocomplete-search-icon-url) no-repeat left var(--autocomplete-icon-right-offset) top var(--autocomplete-icon-top-offset),
|
||||
linear-gradient(to left, var(--color--blue-70) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%),
|
||||
linear-gradient(to right, var(--color--blue-70) var(--form-element-border-size-base), transparent var(--form-element-border-size-base), transparent 100%) var(--color--gray-95);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background:
|
||||
var(--autocomplete-search-icon-url) no-repeat left var(--autocomplete-icon-right-offset) top var(--autocomplete-icon-top-offset),
|
||||
linear-gradient(to left, var(--color--blue-70) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%),
|
||||
linear-gradient(to right, var(--color--blue-70) var(--form-element-border-size-base), transparent var(--form-element-border-size-base), transparent 100%) var(--color--gray-95);
|
||||
}
|
||||
background: var(--autocomplete-search-icon-url) no-repeat left var(--autocomplete-icon-right-offset) center;
|
||||
|
||||
&.ui-autocomplete-loading {
|
||||
background:
|
||||
var(--autocomplete-throbber-icon-url) no-repeat left var(--autocomplete-icon-right-offset) top var(--autocomplete-icon-top-offset),
|
||||
linear-gradient(to left, var(--color--gray-30) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%) var(--color--gray-95);
|
||||
|
||||
&:hover {
|
||||
background:
|
||||
var(--autocomplete-throbber-icon-url) no-repeat left var(--autocomplete-icon-right-offset) top var(--autocomplete-icon-top-offset),
|
||||
linear-gradient(to left, var(--color--blue-70) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%),
|
||||
linear-gradient(to right, var(--color--blue-70) var(--form-element-border-size-base), transparent var(--form-element-border-size-base), transparent 100%) var(--color--gray-95);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background:
|
||||
var(--autocomplete-throbber-icon-url) no-repeat left var(--autocomplete-icon-right-offset) top var(--autocomplete-icon-top-offset),
|
||||
linear-gradient(to left, var(--color--blue-70) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%),
|
||||
linear-gradient(to right, var(--color--blue-70) var(--form-element-border-size-base), transparent var(--form-element-border-size-base), transparent 100%) var(--color--gray-95);
|
||||
}
|
||||
background: var(--autocomplete-throbber-icon-url) no-repeat left var(--autocomplete-icon-right-offset) center;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -100,52 +35,11 @@ html.js[dir="rtl"] .form-autocomplete {
|
|||
/* stylelint-disable-next-line selector-type-no-unknown */
|
||||
_:-ms-fullscreen,
|
||||
html[dir=ltr].js .form-autocomplete.ui-autocomplete-loading {
|
||||
background:
|
||||
var(--autocomplete-throbber-IE-icon-url) no-repeat right var(--autocomplete-icon-right-offset) top var(--autocomplete-icon-top-offset) / var(--autocomplete-throbber-IE-size),
|
||||
linear-gradient(to right, var(--color--gray-30) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%) var(--color--gray-95);
|
||||
}
|
||||
|
||||
/* stylelint-disable-next-line selector-type-no-unknown */
|
||||
_:-ms-fullscreen,
|
||||
html[dir=ltr].js .form-autocomplete.ui-autocomplete-loading:hover {
|
||||
background:
|
||||
var(--autocomplete-throbber-IE-icon-url) no-repeat right var(--autocomplete-icon-right-offset) top var(--autocomplete-icon-top-offset) / var(--autocomplete-throbber-IE-size),
|
||||
linear-gradient(to right, var(--color--blue-70) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%),
|
||||
linear-gradient(to left, var(--color--blue-70) var(--form-element-border-size-base), transparent var(--form-element-border-size-base), transparent 100%) var(--color--gray-95);
|
||||
}
|
||||
|
||||
/* stylelint-disable-next-line selector-type-no-unknown */
|
||||
_:-ms-fullscreen,
|
||||
html[dir=ltr].js .form-autocomplete.ui-autocomplete-loading:focus {
|
||||
background:
|
||||
var(--autocomplete-throbber-IE-icon-url) no-repeat right var(--autocomplete-icon-right-offset) top var(--autocomplete-icon-top-offset) / var(--autocomplete-throbber-IE-size),
|
||||
linear-gradient(to right, var(--color--blue-70) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%),
|
||||
linear-gradient(to left, var(--color--blue-70) var(--form-element-border-size-base), transparent var(--form-element-border-size-base), transparent 100%) var(--color--gray-95);
|
||||
background: var(--autocomplete-throbber-IE-icon-url) no-repeat right var(--autocomplete-icon-right-offset) center / var(--autocomplete-throbber-IE-size);
|
||||
}
|
||||
|
||||
/* stylelint-disable-next-line selector-type-no-unknown */
|
||||
_:-ms-fullscreen,
|
||||
html[dir=rtl].js .form-autocomplete.ui-autocomplete-loading {
|
||||
background:
|
||||
var(--autocomplete-throbber-IE-icon-url) no-repeat left var(--autocomplete-icon-right-offset) top var(--autocomplete-icon-top-offset) / var(--autocomplete-throbber-IE-size),
|
||||
linear-gradient(to left, var(--color--gray-30) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%) var(--color--gray-95);
|
||||
background: var(--autocomplete-throbber-IE-icon-url) no-repeat left var(--autocomplete-icon-right-offset) center / var(--autocomplete-throbber-IE-size);
|
||||
}
|
||||
|
||||
/* stylelint-disable-next-line selector-type-no-unknown */
|
||||
_:-ms-fullscreen,
|
||||
html[dir=rtl].js .form-autocomplete.ui-autocomplete-loading:hover {
|
||||
background:
|
||||
var(--autocomplete-throbber-IE-icon-url) no-repeat left var(--autocomplete-icon-right-offset) top var(--autocomplete-icon-top-offset) / var(--autocomplete-throbber-IE-size),
|
||||
linear-gradient(to left, var(--color--blue-70) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%),
|
||||
linear-gradient(to right, var(--color--blue-70) var(--form-element-border-size-base), transparent var(--form-element-border-size-base), transparent 100%) var(--color--gray-95);
|
||||
}
|
||||
|
||||
/* stylelint-disable-next-line selector-type-no-unknown */
|
||||
_:-ms-fullscreen,
|
||||
html[dir=rtl].js .form-autocomplete.ui-autocomplete-loading:focus {
|
||||
background:
|
||||
var(--autocomplete-throbber-IE-icon-url) no-repeat left var(--autocomplete-icon-right-offset) top var(--autocomplete-icon-top-offset) / var(--autocomplete-throbber-IE-size),
|
||||
linear-gradient(to left, var(--color--blue-70) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%),
|
||||
linear-gradient(to right, var(--color--blue-70) var(--form-element-border-size-base), transparent var(--form-element-border-size-base), transparent 100%) var(--color--gray-95);
|
||||
}
|
||||
/* rtl:end:ignore */
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -74,15 +59,13 @@
|
|||
}
|
||||
|
||||
.button:focus {
|
||||
outline: 2px solid #53b0eb;
|
||||
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 {
|
||||
|
|
|
|||
|
|
@ -5,10 +5,6 @@
|
|||
|
||||
@import "../base/variables.pcss.css";
|
||||
|
||||
:root {
|
||||
--button-border-width: var(--form-element-border-size-base);
|
||||
}
|
||||
|
||||
.button {
|
||||
display: inline-block;
|
||||
height: var(--sp3);
|
||||
|
|
@ -16,19 +12,17 @@
|
|||
margin-inline-start: 0;
|
||||
margin-inline-end: var(--sp1);
|
||||
padding-block: calc((var(--sp3) - var(--line-height-s)) / 2);
|
||||
padding-inline-start: var(--sp1-5);
|
||||
padding-inline-end: var(--sp1-5);
|
||||
padding-inline: var(--sp1-5);
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
color: var(--color--blue-20);
|
||||
border: var(--button-border-width) solid var(--color--blue-20);
|
||||
border-radius: var(--border-radius-base);
|
||||
border: solid 2px var(--color--blue-20);
|
||||
border-radius: var(--border-radius);
|
||||
background-color: var(--color--white);
|
||||
font-family: inherit;
|
||||
font-size: var(--font-size-s);
|
||||
font-size: var(--font-size-l);
|
||||
font-weight: 700;
|
||||
line-height: var(--line-height-s);
|
||||
appearance: none;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
||||
|
|
@ -40,15 +34,13 @@
|
|||
}
|
||||
|
||||
&:focus {
|
||||
outline: var(--outline--base);
|
||||
outline-offset: var(--outline-offset);
|
||||
box-shadow: var(--shadow-focusable);
|
||||
outline: 2px solid var(--color--blue-70);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: var(--color--blue-20);
|
||||
border-color: var(--color--blue-20);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
|
|
@ -68,8 +60,7 @@
|
|||
|
||||
/* Top padding accounts for font not being vertically centered within line-height. */
|
||||
padding-block: 1px 0;
|
||||
padding-inline-start: var(--sp1-5);
|
||||
padding-inline-end: var(--sp1-5);
|
||||
padding-inline: var(--sp1-5);
|
||||
line-height: var(--line-height-s);
|
||||
}
|
||||
}
|
||||
|
|
@ -84,8 +75,8 @@
|
|||
.button--small {
|
||||
height: var(--sp2-5);
|
||||
padding-block: calc((var(--sp2-5) - var(--line-height-s)) / 2);
|
||||
padding-inline-start: var(--sp1-5);
|
||||
padding-inline-end: var(--sp1-5);
|
||||
padding-inline: var(--sp);
|
||||
font-size: var(--font-size-base);
|
||||
}
|
||||
|
||||
.button--primary {
|
||||
|
|
|
|||
|
|
@ -4,258 +4,18 @@
|
|||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* CKE Dialogs.
|
||||
*/
|
||||
/** cspell:ignore acke */
|
||||
[dir="ltr"] .cke_dialog td,[dir="ltr"]
|
||||
.cke_dialog th {
|
||||
padding-left: 0.28125rem;
|
||||
|
||||
select.cke_dialog_ui_input_select {
|
||||
-webkit-appearance: auto;
|
||||
-moz-appearance: auto;
|
||||
appearance: auto
|
||||
}
|
||||
[dir="rtl"] .cke_dialog td,[dir="rtl"]
|
||||
.cke_dialog th {
|
||||
padding-right: 0.28125rem;
|
||||
}
|
||||
[dir="ltr"] .cke_dialog td,[dir="ltr"]
|
||||
.cke_dialog th {
|
||||
padding-right: 0.28125rem;
|
||||
}
|
||||
[dir="rtl"] .cke_dialog td,[dir="rtl"]
|
||||
.cke_dialog th {
|
||||
padding-left: 0.28125rem;
|
||||
}
|
||||
.cke_dialog td,
|
||||
.cke_dialog th {
|
||||
padding-top: 0.28125rem;
|
||||
padding-bottom: 0.28125rem;
|
||||
|
||||
select.cke_dialog_ui_input_select::-ms-expand {
|
||||
display: block;
|
||||
}
|
||||
[dir="ltr"] .cke_dialog .cke_dialog_ui_hbox_last {
|
||||
padding-left: 0;
|
||||
}
|
||||
[dir="rtl"] .cke_dialog .cke_dialog_ui_hbox_last {
|
||||
padding-right: 0;
|
||||
}
|
||||
[dir="ltr"] .cke_dialog .cke_dialog_ui_hbox_last {
|
||||
padding-right: 0;
|
||||
}
|
||||
[dir="rtl"] .cke_dialog .cke_dialog_ui_hbox_last {
|
||||
padding-left: 0;
|
||||
}
|
||||
.cke_dialog .cke_dialog_ui_hbox_last {
|
||||
padding-top: 1px;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.cke_dialog .cke_dialog_contents_body .cke_dialog_ui_text,
|
||||
.cke_dialog .cke_dialog_contents_body .cke_dialog_ui_select,
|
||||
.cke_dialog .cke_dialog_contents_body .cke_dialog_ui_hbox_last > a.cke_dialog_ui_button {
|
||||
margin-top: 0.5625rem;
|
||||
}
|
||||
.cke_dialog .cke_dialog_body label + .cke_dialog_ui_labeled_content {
|
||||
width: 100% !important; /* Override inline width. */
|
||||
}
|
||||
[dir="ltr"] .cke_dialog input.cke_dialog_ui_input_text,[dir="ltr"]
|
||||
.cke_dialog input.cke_dialog_ui_input_password,[dir="ltr"]
|
||||
.cke_dialog input.cke_dialog_ui_input_tel,[dir="ltr"]
|
||||
.cke_dialog textarea.cke_dialog_ui_input_textarea {
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
[dir="rtl"] .cke_dialog input.cke_dialog_ui_input_text,[dir="rtl"]
|
||||
.cke_dialog input.cke_dialog_ui_input_password,[dir="rtl"]
|
||||
.cke_dialog input.cke_dialog_ui_input_tel,[dir="rtl"]
|
||||
.cke_dialog textarea.cke_dialog_ui_input_textarea {
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
[dir="ltr"] .cke_dialog input.cke_dialog_ui_input_text,[dir="ltr"]
|
||||
.cke_dialog input.cke_dialog_ui_input_password,[dir="ltr"]
|
||||
.cke_dialog input.cke_dialog_ui_input_tel,[dir="ltr"]
|
||||
.cke_dialog textarea.cke_dialog_ui_input_textarea {
|
||||
padding-right: 1.25rem;
|
||||
}
|
||||
[dir="rtl"] .cke_dialog input.cke_dialog_ui_input_text,[dir="rtl"]
|
||||
.cke_dialog input.cke_dialog_ui_input_password,[dir="rtl"]
|
||||
.cke_dialog input.cke_dialog_ui_input_tel,[dir="rtl"]
|
||||
.cke_dialog textarea.cke_dialog_ui_input_textarea {
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
.cke_dialog input.cke_dialog_ui_input_text,
|
||||
.cke_dialog input.cke_dialog_ui_input_password,
|
||||
.cke_dialog input.cke_dialog_ui_input_tel,
|
||||
.cke_dialog textarea.cke_dialog_ui_input_textarea {
|
||||
padding-top: 0.8125rem;
|
||||
padding-bottom: 0.8125rem;
|
||||
color: #313637;
|
||||
border-width: 2px 0
|
||||
}
|
||||
.cke_dialog input.cke_dialog_ui_input_text:hover, .cke_dialog input.cke_dialog_ui_input_password:hover, .cke_dialog input.cke_dialog_ui_input_tel:hover, .cke_dialog textarea.cke_dialog_ui_input_textarea:hover {
|
||||
border-width: 2px 0;
|
||||
}
|
||||
.cke_dialog .cke_dialog_ui_input_select {
|
||||
display: block
|
||||
}
|
||||
[dir="ltr"] .cke_dialog .cke_dialog_ui_input_select select,[dir="ltr"]
|
||||
.cke_dialog .cke_dialog_ui_input_select .cke_dialog_ui_input_select {
|
||||
margin-left: 0;
|
||||
}
|
||||
[dir="rtl"] .cke_dialog .cke_dialog_ui_input_select select,[dir="rtl"]
|
||||
.cke_dialog .cke_dialog_ui_input_select .cke_dialog_ui_input_select {
|
||||
margin-right: 0;
|
||||
}
|
||||
[dir="ltr"] .cke_dialog .cke_dialog_ui_input_select select,[dir="ltr"]
|
||||
.cke_dialog .cke_dialog_ui_input_select .cke_dialog_ui_input_select {
|
||||
margin-right: 0;
|
||||
}
|
||||
[dir="rtl"] .cke_dialog .cke_dialog_ui_input_select select,[dir="rtl"]
|
||||
.cke_dialog .cke_dialog_ui_input_select .cke_dialog_ui_input_select {
|
||||
margin-left: 0;
|
||||
}
|
||||
[dir="ltr"] .cke_dialog .cke_dialog_ui_input_select select,[dir="ltr"]
|
||||
.cke_dialog .cke_dialog_ui_input_select .cke_dialog_ui_input_select {
|
||||
padding-left: 1.21875rem;
|
||||
}
|
||||
[dir="rtl"] .cke_dialog .cke_dialog_ui_input_select select,[dir="rtl"]
|
||||
.cke_dialog .cke_dialog_ui_input_select .cke_dialog_ui_input_select {
|
||||
padding-right: 1.21875rem;
|
||||
}
|
||||
[dir="ltr"] .cke_dialog .cke_dialog_ui_input_select select,[dir="ltr"]
|
||||
.cke_dialog .cke_dialog_ui_input_select .cke_dialog_ui_input_select {
|
||||
padding-right: 3.65625rem;
|
||||
}
|
||||
[dir="rtl"] .cke_dialog .cke_dialog_ui_input_select select,[dir="rtl"]
|
||||
.cke_dialog .cke_dialog_ui_input_select .cke_dialog_ui_input_select {
|
||||
padding-left: 3.65625rem;
|
||||
}
|
||||
.cke_dialog .cke_dialog_ui_input_select select,
|
||||
.cke_dialog .cke_dialog_ui_input_select .cke_dialog_ui_input_select {
|
||||
width: 100% !important;
|
||||
height: 2.8125rem;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
color: #313637;
|
||||
border: 1px solid transparent;
|
||||
border-width: 2px 0;
|
||||
border-style: solid;
|
||||
border-color: transparent;
|
||||
border-top-left-radius: 0; /* LTR */
|
||||
border-top-right-radius: 2px; /* LTR */
|
||||
border-bottom-right-radius: 2px; /* LTR */
|
||||
border-bottom-left-radius: 0; /* LTR */
|
||||
outline: 1px solid transparent;
|
||||
background-color: #f7f9fa;
|
||||
line-height: 2.8125rem
|
||||
}
|
||||
.cke_dialog .cke_dialog_ui_input_select select:hover,
|
||||
.cke_dialog .cke_dialog_ui_input_select select:focus,
|
||||
.cke_dialog .cke_dialog_ui_input_select .cke_dialog_ui_input_select:hover,
|
||||
.cke_dialog .cke_dialog_ui_input_select .cke_dialog_ui_input_select:focus {
|
||||
border-color: #53b0eb;
|
||||
background-image:
|
||||
url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='10.5' viewBox='0 0 18 10.5'%3e %3cpath fill='%23fff' d='M18,1.5c0-0.1-0.1-0.3-0.2-0.4l-0.9-0.9c-0.2-0.2-0.6-0.2-0.8,0L9,7.3L1.9,0.2c-0.2-0.2-0.6-0.2-0.8,0L0.2,1.1c-0.2,0.2-0.2,0.6,0,0.8l8.4,8.4c0.2,0.2,0.6,0.2,0.8,0l8.4-8.4C17.9,1.8,18,1.6,18,1.5z'/%3e%3c/svg%3e"),
|
||||
url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='54' height='54' viewBox='0 0 54 54'%3e %3cpath fill='%2353b0eb' d='M0 0h54v54H0z'/%3e%3c/svg%3e"),
|
||||
url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='54' height='54' viewBox='0 0 54 54'%3e %3cpath fill='%2353b0eb' d='M0 0h54v54H0z'/%3e%3c/svg%3e");
|
||||
}
|
||||
.cke_dialog .cke_dialog_ui_input_select select:focus, .cke_dialog .cke_dialog_ui_input_select .cke_dialog_ui_input_select:focus {
|
||||
outline: 6px dashed transparent;
|
||||
}
|
||||
[dir="ltr"] .cke_dialog .cke_dialog_footer_buttons {
|
||||
margin-left: 0;
|
||||
}
|
||||
[dir="rtl"] .cke_dialog .cke_dialog_footer_buttons {
|
||||
margin-right: 0;
|
||||
}
|
||||
[dir="ltr"] .cke_dialog .cke_dialog_footer_buttons {
|
||||
margin-right: 0.5625rem;
|
||||
}
|
||||
[dir="rtl"] .cke_dialog .cke_dialog_footer_buttons {
|
||||
margin-left: 0.5625rem;
|
||||
}
|
||||
.cke_dialog .cke_dialog_footer_buttons {
|
||||
margin-top: 0.5625rem;
|
||||
margin-bottom: 0.5625rem
|
||||
}
|
||||
[dir="ltr"] .cke_dialog .cke_dialog_footer_buttons .cke_dialog_ui_hbox_last {
|
||||
padding-left: 0.28125rem;
|
||||
}
|
||||
[dir="rtl"] .cke_dialog .cke_dialog_footer_buttons .cke_dialog_ui_hbox_last {
|
||||
padding-right: 0.28125rem;
|
||||
}
|
||||
[dir="ltr"] .cke_dialog .cke_dialog_footer_buttons .cke_dialog_ui_hbox_last {
|
||||
padding-right: 0.28125rem;
|
||||
}
|
||||
[dir="rtl"] .cke_dialog .cke_dialog_footer_buttons .cke_dialog_ui_hbox_last {
|
||||
padding-left: 0.28125rem;
|
||||
}
|
||||
.cke_dialog .cke_dialog_footer_buttons .cke_dialog_ui_hbox_last {
|
||||
padding-top: 0.28125rem;
|
||||
padding-bottom: 0.28125rem;
|
||||
}
|
||||
[dir="ltr"] .cke_dialog .cke_dialog_footer_buttons a,[dir="ltr"]
|
||||
.cke_dialog .cke_dialog_footer_buttons .acke_dialog_ui_button {
|
||||
margin-left: 0;
|
||||
}
|
||||
[dir="rtl"] .cke_dialog .cke_dialog_footer_buttons a,[dir="rtl"]
|
||||
.cke_dialog .cke_dialog_footer_buttons .acke_dialog_ui_button {
|
||||
margin-right: 0;
|
||||
}
|
||||
[dir="ltr"] .cke_dialog .cke_dialog_footer_buttons a,[dir="ltr"]
|
||||
.cke_dialog .cke_dialog_footer_buttons .acke_dialog_ui_button {
|
||||
margin-right: 0.28125rem;
|
||||
}
|
||||
[dir="rtl"] .cke_dialog .cke_dialog_footer_buttons a,[dir="rtl"]
|
||||
.cke_dialog .cke_dialog_footer_buttons .acke_dialog_ui_button {
|
||||
margin-left: 0.28125rem;
|
||||
}
|
||||
.cke_dialog .cke_dialog_footer_buttons a,
|
||||
.cke_dialog .cke_dialog_footer_buttons .acke_dialog_ui_button {
|
||||
display: inline-block;
|
||||
margin-top: 0.28125rem;
|
||||
margin-bottom: 0.28125rem;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
color: #0d77b5;
|
||||
border: 2px solid #0d77b5;
|
||||
border-radius: 2px;
|
||||
background-color: #fff;
|
||||
font-family: inherit;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.125rem;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
-webkit-font-smoothing: antialiased
|
||||
}
|
||||
.cke_dialog .cke_dialog_footer_buttons a:hover,
|
||||
.cke_dialog .cke_dialog_footer_buttons a:focus,
|
||||
.cke_dialog .cke_dialog_footer_buttons .acke_dialog_ui_button:hover,
|
||||
.cke_dialog .cke_dialog_footer_buttons .acke_dialog_ui_button:focus {
|
||||
text-decoration: none;
|
||||
color: #2494db;
|
||||
border-color: #2494db;
|
||||
}
|
||||
.cke_dialog .cke_dialog_footer_buttons a:focus, .cke_dialog .cke_dialog_footer_buttons .acke_dialog_ui_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);
|
||||
}
|
||||
.cke_dialog .cke_dialog_footer_buttons a.cke_dialog_ui_button_ok, .cke_dialog .cke_dialog_footer_buttons .acke_dialog_ui_button.cke_dialog_ui_button_ok {
|
||||
color: #fff;
|
||||
background-color: #0d77b5
|
||||
}
|
||||
.cke_dialog .cke_dialog_footer_buttons a.cke_dialog_ui_button_ok:hover,
|
||||
.cke_dialog .cke_dialog_footer_buttons a.cke_dialog_ui_button_ok:focus,
|
||||
.cke_dialog .cke_dialog_footer_buttons .acke_dialog_ui_button.cke_dialog_ui_button_ok:hover,
|
||||
.cke_dialog .cke_dialog_footer_buttons .acke_dialog_ui_button.cke_dialog_ui_button_ok:focus {
|
||||
color: #fff;
|
||||
background-color: #2494db;
|
||||
}
|
||||
[dir="rtl"] .cke_dialog .cke_dialog_ui_input_select select,
|
||||
[dir="rtl"] .cke_dialog .cke_dialog_ui_input_select .cke_dialog_ui_input_select {
|
||||
border-top-left-radius: 2px;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 2px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,164 +2,11 @@
|
|||
* @file
|
||||
* CKE Dialogs.
|
||||
*/
|
||||
/** cspell:ignore acke */
|
||||
|
||||
@import "../base/variables.pcss.css";
|
||||
select.cke_dialog_ui_input_select {
|
||||
appearance: auto;
|
||||
|
||||
:root {
|
||||
--form-element-select-icon: url("../../images/chevron-down.svg");
|
||||
--form-element-select-bg: url("../../images/select-chevron-bg-default.svg");
|
||||
--form-element-select-bg--highlight: url("../../images/select-chevron-bg-highlight.svg");
|
||||
}
|
||||
|
||||
.cke_dialog {
|
||||
& td,
|
||||
& th {
|
||||
padding-block: var(--sp0-25);
|
||||
padding-inline-start: var(--sp0-25);
|
||||
padding-inline-end: var(--sp0-25);
|
||||
}
|
||||
|
||||
& .cke_dialog_ui_hbox_last {
|
||||
padding-block-start: 1px;
|
||||
padding-block-end: 0;
|
||||
padding-inline-start: 0;
|
||||
padding-inline-end: 0;
|
||||
}
|
||||
|
||||
& .cke_dialog_contents_body .cke_dialog_ui_text,
|
||||
& .cke_dialog_contents_body .cke_dialog_ui_select,
|
||||
& .cke_dialog_contents_body .cke_dialog_ui_hbox_last > a.cke_dialog_ui_button {
|
||||
margin-block-start: var(--sp0-5);
|
||||
}
|
||||
|
||||
& .cke_dialog_body label + .cke_dialog_ui_labeled_content {
|
||||
width: 100% !important; /* Override inline width. */
|
||||
}
|
||||
|
||||
& input.cke_dialog_ui_input_text,
|
||||
& input.cke_dialog_ui_input_password,
|
||||
& input.cke_dialog_ui_input_tel,
|
||||
& textarea.cke_dialog_ui_input_textarea {
|
||||
padding-block: calc((var(--sp3) - (var(--font-size-base) * 1.5) - (var(--form-element-border-size-base) * 2)) / 2);
|
||||
padding-inline-start: calc(var(--sp1) + var(--form-element-border-size-left));
|
||||
padding-inline-end: calc(var(--sp1) + var(--form-element-border-size-base));
|
||||
color: var(--color--gray-10);
|
||||
border-width: var(--form-element-border-size-base) 0;
|
||||
|
||||
&:hover {
|
||||
border-width: var(--form-element-border-size-base) 0;
|
||||
}
|
||||
}
|
||||
|
||||
& .cke_dialog_ui_input_select {
|
||||
&::-ms-expand {
|
||||
display: block;
|
||||
|
||||
& select,
|
||||
& .cke_dialog_ui_input_select {
|
||||
width: 100% !important;
|
||||
height: var(--sp2-5);
|
||||
margin-block: 0;
|
||||
margin-inline-start: 0;
|
||||
margin-inline-end: 0;
|
||||
padding-block: 0;
|
||||
padding-inline-start: calc(var(--sp0-75) + var(--form-element-border-size-left));
|
||||
padding-inline-end: calc(var(--sp2-5) + var(--sp0-75));
|
||||
color: var(--color--gray-10);
|
||||
border: 1px solid transparent;
|
||||
border-width: var(--form-element-border-size-base) 0;
|
||||
border-style: solid;
|
||||
border-color: transparent;
|
||||
border-top-left-radius: 0; /* LTR */
|
||||
border-top-right-radius: var(--border-radius-base); /* LTR */
|
||||
border-bottom-right-radius: var(--border-radius-base); /* LTR */
|
||||
border-bottom-left-radius: 0; /* LTR */
|
||||
outline: var(--outline--thin);
|
||||
background-color: var(--color--gray-95);
|
||||
line-height: var(--sp2-5);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
border-color: var(--color--blue-70);
|
||||
background-image:
|
||||
var(--form-element-select-icon),
|
||||
var(--form-element-select-bg--highlight),
|
||||
var(--form-element-select-bg--highlight);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: var(--outline--thick);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& .cke_dialog_footer_buttons {
|
||||
margin-block-start: var(--sp0-5);
|
||||
margin-block-end: var(--sp0-5);
|
||||
margin-inline-start: 0;
|
||||
margin-inline-end: var(--sp0-5);
|
||||
|
||||
& .cke_dialog_ui_hbox_last {
|
||||
padding-block: var(--sp0-25);
|
||||
padding-inline-start: var(--sp0-25);
|
||||
padding-inline-end: var(--sp0-25);
|
||||
}
|
||||
|
||||
& a,
|
||||
& .acke_dialog_ui_button {
|
||||
display: inline-block;
|
||||
margin-block: var(--sp0-25);
|
||||
margin-inline-start: 0;
|
||||
margin-inline-end: var(--sp0-25);
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
color: var(--color--blue-20);
|
||||
border: var(--form-element-border-size-base) solid var(--color--blue-20);
|
||||
border-radius: var(--border-radius-base);
|
||||
background-color: var(--color--white);
|
||||
font-family: inherit;
|
||||
font-size: var(--font-size-s);
|
||||
font-weight: 700;
|
||||
line-height: var(--line-height-s);
|
||||
appearance: none;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
color: var(--color--blue-50);
|
||||
border-color: var(--color--blue-50);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: var(--outline--base);
|
||||
outline-offset: var(--outline-offset);
|
||||
box-shadow: var(--shadow-focusable);
|
||||
}
|
||||
|
||||
&.cke_dialog_ui_button_ok {
|
||||
color: var(--color--white);
|
||||
background-color: var(--color--blue-20);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: var(--color--white);
|
||||
background-color: var(--color--blue-50);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[dir="rtl"] .cke_dialog {
|
||||
& .cke_dialog_ui_input_select {
|
||||
& select,
|
||||
& .cke_dialog_ui_input_select {
|
||||
border-top-left-radius: var(--border-radius-base);
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: var(--border-radius-base);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
margin-bottom: 1.125rem;
|
||||
color: inherit;
|
||||
border: 1px solid #e7edf1;
|
||||
border-radius: 2px;
|
||||
border-radius: 0.1875rem;
|
||||
box-shadow: 0 1px 4px #d7e1e8;
|
||||
}
|
||||
|
||||
|
|
@ -98,7 +98,7 @@
|
|||
content: "";
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
border-radius: 2px;
|
||||
border-radius: 0.1875rem;
|
||||
box-shadow: inset 0 0 0 2px #53b0eb;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
margin-block: var(--sp1);
|
||||
color: inherit;
|
||||
border: var(--details-border-width) solid var(--color--gray-80);
|
||||
border-radius: var(--border-radius-base);
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: 0 1px 4px var(--color--gray-70);
|
||||
}
|
||||
|
||||
|
|
@ -67,7 +67,7 @@
|
|||
content: "";
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
border-radius: var(--border-radius-base);
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: inset 0 0 0 2px var(--color--blue-70);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -10,19 +10,14 @@
|
|||
* Drop button specific styles.
|
||||
*/
|
||||
|
||||
.dropbutton {
|
||||
border-top-left-radius: 2px; /* LTR */
|
||||
border-top-right-radius: 0; /* LTR */
|
||||
border-bottom-right-radius: 0; /* LTR */
|
||||
border-bottom-left-radius: 2px; /* LTR */
|
||||
background-color: #0d77b5;
|
||||
.dropbutton-widget {
|
||||
overflow: hidden;
|
||||
border: solid 1px #fff;
|
||||
border-radius: 0.1875rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .dropbutton {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 2px;
|
||||
border-bottom-right-radius: 2px;
|
||||
border-bottom-left-radius: 0;
|
||||
.dropbutton {
|
||||
background-color: #0d77b5;
|
||||
}
|
||||
|
||||
.js .dropbutton-widget .dropbutton {
|
||||
|
|
@ -54,11 +49,7 @@
|
|||
padding-top: 0.28125rem;
|
||||
padding-bottom: 0.28125rem;
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
border-top-left-radius: 2px; /* LTR */
|
||||
border-top-right-radius: 0; /* LTR */
|
||||
border-bottom-right-radius: 0; /* LTR */
|
||||
border-bottom-left-radius: 2px /* LTR */
|
||||
color: #fff
|
||||
}
|
||||
|
||||
.dropbutton-action a:hover {
|
||||
|
|
@ -66,21 +57,17 @@
|
|||
}
|
||||
|
||||
.dropbutton-action a:focus {
|
||||
outline: 2px solid #53b0eb;
|
||||
outline: 2px solid #53b0eb;
|
||||
outline-offset: 2px;
|
||||
background-color: #2494db;
|
||||
box-shadow: var(--shadow-focusable-with-outline);
|
||||
}
|
||||
|
||||
[dir="rtl"] .dropbutton-action a {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 2px;
|
||||
border-bottom-right-radius: 2px;
|
||||
border-bottom-left-radius: 0;
|
||||
.open .dropbutton-action:not(:last-child) {
|
||||
border-bottom: solid 1px #fff;
|
||||
}
|
||||
|
||||
.js .dropbutton-action a:focus {
|
||||
outline: 2px solid #53b0eb;
|
||||
outline: 2px solid #53b0eb;
|
||||
}
|
||||
|
||||
[dir="ltr"] .dropbutton-toggle {
|
||||
|
|
@ -92,10 +79,6 @@
|
|||
}
|
||||
|
||||
.dropbutton-toggle {
|
||||
border-top-left-radius: 0; /* LTR */
|
||||
border-top-right-radius: 2px; /* LTR */
|
||||
border-bottom-right-radius: 2px; /* LTR */
|
||||
border-bottom-left-radius: 0; /* LTR */
|
||||
background-color: #0d77b5
|
||||
}
|
||||
|
||||
|
|
@ -103,32 +86,10 @@
|
|||
background-color: #2494db;
|
||||
}
|
||||
|
||||
.dropbutton-toggle button {
|
||||
border-top-left-radius: 0; /* LTR */
|
||||
border-top-right-radius: 2px; /* LTR */
|
||||
border-bottom-right-radius: 2px; /* LTR */
|
||||
border-bottom-left-radius: 0 /* LTR */
|
||||
}
|
||||
|
||||
.dropbutton-toggle button:focus {
|
||||
outline: 2px solid #53b0eb;
|
||||
outline-offset: 2px;
|
||||
background-color: #2494db;
|
||||
box-shadow: var(--shadow-focusable-with-outline);
|
||||
}
|
||||
|
||||
[dir="rtl"] .dropbutton-toggle {
|
||||
border-top-left-radius: 2px;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 2px
|
||||
}
|
||||
|
||||
[dir="rtl"] .dropbutton-toggle button {
|
||||
border-top-left-radius: 2px;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 2px;
|
||||
outline: solid 2px #53b0eb;
|
||||
outline-offset: 2px;
|
||||
background-color: #2494db;
|
||||
}
|
||||
|
||||
.dropbutton-arrow {
|
||||
|
|
|
|||
|
|
@ -5,19 +5,14 @@
|
|||
|
||||
@import "../base/variables.pcss.css";
|
||||
|
||||
.dropbutton {
|
||||
border-top-left-radius: var(--border-radius-base); /* LTR */
|
||||
border-top-right-radius: 0; /* LTR */
|
||||
border-bottom-right-radius: 0; /* LTR */
|
||||
border-bottom-left-radius: var(--border-radius-base); /* LTR */
|
||||
background-color: var(--color--blue-20);
|
||||
.dropbutton-widget {
|
||||
overflow: hidden;
|
||||
border: solid 1px var(--color--white);
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
[dir="rtl"] .dropbutton {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: var(--border-radius-base);
|
||||
border-bottom-right-radius: var(--border-radius-base);
|
||||
border-bottom-left-radius: 0;
|
||||
.dropbutton {
|
||||
background-color: var(--color--blue-20);
|
||||
}
|
||||
|
||||
.js .dropbutton-widget .dropbutton {
|
||||
|
|
@ -34,73 +29,39 @@
|
|||
padding-inline-end: var(--sp1);
|
||||
text-decoration: none;
|
||||
color: var(--color--white);
|
||||
border-top-left-radius: var(--border-radius); /* LTR */
|
||||
border-top-right-radius: 0; /* LTR */
|
||||
border-bottom-right-radius: 0; /* LTR */
|
||||
border-bottom-left-radius: var(--border-radius); /* LTR */
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color--blue-50);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: var(--outline--base);
|
||||
outline-offset: var(--outline-offset);
|
||||
outline: 2px solid var(--color--blue-70);
|
||||
outline-offset: 2px;
|
||||
background-color: var(--color--blue-50);
|
||||
box-shadow: var(--shadow-focusable-with-outline);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[dir="rtl"] .dropbutton-action a {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: var(--border-radius);
|
||||
border-bottom-right-radius: var(--border-radius);
|
||||
border-bottom-left-radius: 0;
|
||||
.open .dropbutton-action:not(:last-child) {
|
||||
border-block-end: solid 1px var(--color--white);
|
||||
}
|
||||
|
||||
.js .dropbutton-action a:focus {
|
||||
outline: var(--outline--base);
|
||||
outline: 2px solid var(--color--blue-70);
|
||||
}
|
||||
|
||||
.dropbutton-toggle {
|
||||
border-inline-start: 1px solid var(--color--white);
|
||||
border-top-left-radius: 0; /* LTR */
|
||||
border-top-right-radius: var(--border-radius-base); /* LTR */
|
||||
border-bottom-right-radius: var(--border-radius-base); /* LTR */
|
||||
border-bottom-left-radius: 0; /* LTR */
|
||||
background-color: var(--color--blue-20);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color--blue-50);
|
||||
}
|
||||
|
||||
& button {
|
||||
border-top-left-radius: 0; /* LTR */
|
||||
border-top-right-radius: var(--border-radius-base); /* LTR */
|
||||
border-bottom-right-radius: var(--border-radius-base); /* LTR */
|
||||
border-bottom-left-radius: 0; /* LTR */
|
||||
|
||||
&:focus {
|
||||
outline: var(--outline--base);
|
||||
outline-offset: var(--outline-offset);
|
||||
background-color: var(--color--blue-50);
|
||||
box-shadow: var(--shadow-focusable-with-outline);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[dir="rtl"] .dropbutton-toggle {
|
||||
border-top-left-radius: var(--border-radius-base);
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: var(--border-radius-base);
|
||||
|
||||
& button {
|
||||
border-top-left-radius: var(--border-radius-base);
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: var(--border-radius-base);
|
||||
& button:focus {
|
||||
outline: solid 2px var(--color--blue-70);
|
||||
outline-offset: 2px;
|
||||
background-color: var(--color--blue-50);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -49,8 +49,8 @@
|
|||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
color: inherit;
|
||||
border: 2px solid #7e96a7;
|
||||
border-radius: 2px;
|
||||
border: solid 2px #7e96a7;
|
||||
border-radius: 0.1875rem;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
|
|
@ -72,24 +72,22 @@ _:-ms-fullscreen,
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
[dir="ltr"] .fieldset__legend {
|
||||
float: left;
|
||||
}
|
||||
|
||||
[dir="rtl"] .fieldset__legend {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.fieldset__legend {
|
||||
float: left; /* Prevent sticking out of top of fieldset. */
|
||||
width: 100%;
|
||||
margin-bottom: 1.125rem;
|
||||
color: inherit;
|
||||
border-top-left-radius: 3px;
|
||||
border-top-right-radius: 3px;
|
||||
background-color: #7e96a7;
|
||||
font-size: 1.125rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.6875rem
|
||||
}
|
||||
|
||||
.fieldset__legend + * {
|
||||
clear: left;
|
||||
}
|
||||
|
||||
.fieldset__legend .fieldset__label.form-required:after {
|
||||
background-image: url("data:image/svg+xml,%3Csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 7.562 1.114-3.438c2.565.906 4.43 1.688 5.59 2.35-.306-2.921-.467-4.93-.484-6.027h3.511c-.05 1.597-.234 3.6-.558 6.003 1.664-.838 3.566-1.613 5.714-2.325l1.113 3.437c-2.05.678-4.06 1.131-6.028 1.356.984.856 2.372 2.381 4.166 4.575l-2.906 2.059c-.935-1.274-2.041-3.009-3.316-5.206-1.194 2.275-2.244 4.013-3.147 5.206l-2.856-2.059c1.872-2.307 3.211-3.832 4.017-4.575-2.081-.402-4.058-.856-5.93-1.356' fill='%23ffffff'/%3E%3C/svg%3E%0A");
|
||||
}
|
||||
|
|
@ -177,31 +175,19 @@ _:-ms-fullscreen,
|
|||
background-position: left top;
|
||||
}
|
||||
|
||||
[dir="ltr"] .fieldset__legend--visible ~ .fieldset__wrapper {
|
||||
padding-left: 1.125rem;
|
||||
.fieldset__wrapper {
|
||||
padding: 1.125rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .fieldset__legend--visible ~ .fieldset__wrapper {
|
||||
padding-right: 1.125rem;
|
||||
}
|
||||
|
||||
[dir="ltr"] .fieldset__legend--visible ~ .fieldset__wrapper {
|
||||
padding-right: 1.125rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .fieldset__legend--visible ~ .fieldset__wrapper {
|
||||
padding-left: 1.125rem;
|
||||
}
|
||||
|
||||
.fieldset__legend--visible ~ .fieldset__wrapper {
|
||||
.fieldset__legend--invisible ~ .fieldset__wrapper {
|
||||
margin-top: 0;
|
||||
padding-top: 1.125rem;
|
||||
padding-bottom: 1.125rem;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.fieldset--group .fieldset__legend--visible ~ .fieldset__wrapper {
|
||||
border: 2px solid #7e96a7;
|
||||
border-radius: 2px;
|
||||
border: solid 2px #7e96a7;
|
||||
border-bottom-right-radius: 3px;
|
||||
border-bottom-left-radius: 3px;
|
||||
}
|
||||
|
||||
[dir="ltr"] .fieldset__wrapper--group {
|
||||
|
|
|
|||
|
|
@ -14,8 +14,8 @@
|
|||
padding-inline-start: 0;
|
||||
padding-inline-end: 0;
|
||||
color: inherit;
|
||||
border: var(--form-element-border-size-base) solid var(--color--gray-30);
|
||||
border-radius: var(--border-radius-base);
|
||||
border: solid 2px var(--color--gray-30);
|
||||
border-radius: var(--border-radius);
|
||||
background-color: var(--color--white);
|
||||
}
|
||||
|
||||
|
|
@ -37,15 +37,20 @@ _:-ms-fullscreen,
|
|||
}
|
||||
|
||||
.fieldset__legend {
|
||||
float: inline-start;
|
||||
float: left; /* Prevent sticking out of top of fieldset. */
|
||||
width: 100%;
|
||||
margin-block-end: var(--sp1);
|
||||
color: inherit;
|
||||
border-top-left-radius: var(--border-radius);
|
||||
border-top-right-radius: var(--border-radius);
|
||||
background-color: var(--color--gray-30);
|
||||
font-size: var(--font-size-l);
|
||||
font-weight: 700;
|
||||
line-height: var(--line-height-base);
|
||||
|
||||
& + * {
|
||||
clear: left;
|
||||
}
|
||||
|
||||
& .fieldset__label {
|
||||
&.form-required {
|
||||
&:after {
|
||||
|
|
@ -111,16 +116,19 @@ _:-ms-fullscreen,
|
|||
background-position: left top;
|
||||
}
|
||||
|
||||
.fieldset__legend--visible ~ .fieldset__wrapper {
|
||||
.fieldset__wrapper {
|
||||
padding: var(--sp);
|
||||
}
|
||||
|
||||
.fieldset__legend--invisible ~ .fieldset__wrapper {
|
||||
margin-block-start: 0;
|
||||
padding-block: var(--sp);
|
||||
padding-inline-start: var(--sp);
|
||||
padding-inline-end: var(--sp);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.fieldset--group .fieldset__legend--visible ~ .fieldset__wrapper {
|
||||
border: var(--form-element-border-size-base) solid var(--color--gray-30);
|
||||
border-radius: var(--border-radius-base);
|
||||
border: solid 2px var(--color--gray-30);
|
||||
border-bottom-right-radius: var(--border-radius);
|
||||
border-bottom-left-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.fieldset__wrapper--group {
|
||||
|
|
|
|||
|
|
@ -15,10 +15,11 @@ input[type="radio"] {
|
|||
display: inline-block;
|
||||
width: 1.6875rem;
|
||||
height: 1.6875rem;
|
||||
vertical-align: text-bottom;
|
||||
border: 2px solid #7e96a7;
|
||||
border-radius: 2px;
|
||||
background-color: #f7f9fa;
|
||||
margin: 0;
|
||||
vertical-align: middle;
|
||||
border: 1px solid #7e96a7;
|
||||
border-radius: 0.1875rem;
|
||||
background-color: #fff;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50% 50%;
|
||||
background-size: 1.125rem 1.125rem;
|
||||
|
|
@ -28,14 +29,17 @@ input[type="radio"] {
|
|||
}
|
||||
|
||||
input[type="checkbox"]:focus, input[type="radio"]:focus {
|
||||
outline: 6px dashed transparent;
|
||||
box-shadow: 0 0 0 2px #fff, 0 0 0 4px #53b0eb, 0 0 36px rgba(83, 176, 235, 0.25)
|
||||
border: solid 2px #2494db;
|
||||
outline: solid 2px #2494db
|
||||
}
|
||||
|
||||
@supports (outline-style: double) {
|
||||
|
||||
input[type="checkbox"]:focus, input[type="radio"]:focus {
|
||||
outline-style: double
|
||||
border-width: 1px;
|
||||
outline-width: 6px;
|
||||
outline-style: double;
|
||||
outline-offset: -1px
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -44,13 +48,30 @@ input[type="checkbox"]:hover, input[type="radio"]:hover {
|
|||
}
|
||||
|
||||
input[type="checkbox"][disabled], input[type="radio"][disabled] {
|
||||
opacity: 0.3;
|
||||
background-color: #f1f4f7
|
||||
}
|
||||
|
||||
input[type="checkbox"][disabled]:hover, input[type="radio"][disabled]:hover {
|
||||
border-color: #7e96a7;
|
||||
}
|
||||
|
||||
input[type="checkbox"][disabled]:checked, input[type="radio"][disabled]:checked {
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked, input[type="radio"]:checked {
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
input[type="checkbox"].error, input[type="radio"].error {
|
||||
border-color: #e33f1e;
|
||||
border: solid 2px #e33f1e
|
||||
}
|
||||
|
||||
input[type="checkbox"].error:focus, input[type="radio"].error:focus {
|
||||
outline-color: #e33f1e;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
|
||||
|
|
@ -61,8 +82,20 @@ input[type="checkbox"].error::-ms-check, input[type="radio"].error::-ms-check {
|
|||
border: 1px solid #e33f1e;
|
||||
}
|
||||
|
||||
[dir="ltr"] input[type="checkbox"] + label,[dir="ltr"] input[type="radio"] + label {
|
||||
padding-left: 0.5625rem
|
||||
}
|
||||
|
||||
[dir="rtl"] input[type="checkbox"] + label,[dir="rtl"] input[type="radio"] + label {
|
||||
padding-right: 0.5625rem
|
||||
}
|
||||
|
||||
input[type="checkbox"] + label, input[type="radio"] + label {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked {
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='18' height='14' viewBox='0 0 18 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%232494DB' d='M14.8232 0.176777C14.9209 0.0791457 15.0791 0.0791455 15.1768 0.176777L16.9445 1.94454C17.0422 2.04217 17.0422 2.20047 16.9445 2.2981L6.23744 13.0052C6.13981 13.1028 5.98151 13.1028 5.88388 13.0052L0.176777 7.2981C0.0791456 7.20047 0.0791456 7.04218 0.176777 6.94454L1.94454 5.17678C2.04217 5.07915 2.20047 5.07915 2.2981 5.17678L5.88388 8.76256C5.98151 8.86019 6.13981 8.86019 6.23744 8.76256L14.8232 0.176777Z'/%3E%3C/svg%3E%0A");
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='17px' height='13px' viewBox='0 0 17 13' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath d='M14.8232,0.176777 C14.9209,0.0791457 15.0791,0.0791455 15.1768,0.176777 L16.9445,1.94454 C17.0422,2.04217 17.0422,2.20047 16.9445,2.2981 L6.23744,13.0052 C6.13981,13.1028 5.98151,13.1028 5.88388,13.0052 L0.176777,7.2981 C0.0791456,7.20047 0.0791456,7.04218 0.176777,6.94454 L1.94454,5.17678 C2.04217,5.07915 2.20047,5.07915 2.2981,5.17678 L5.88388,8.76256 C5.98151,8.86019 6.13981,8.86019 6.23744,8.76256 L14.8232,0.176777 Z' id='Path' fill='%232494DB' fill-rule='nonzero'%3E%3C/path%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
|
|
@ -71,84 +104,22 @@ input[type="radio"] {
|
|||
|
||||
input[type="radio"]:checked {
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8.5' cy='8.5' r='8.5' fill='%232494DB'/%3E%3C/svg%3E%0A");
|
||||
background-size: 1.0625rem 1.0625rem;
|
||||
background-size: 1.0625rem;
|
||||
}
|
||||
|
||||
[dir="ltr"] .form-type-boolean {
|
||||
margin-left: 2.25rem
|
||||
}
|
||||
input[type="radio"]:focus {
|
||||
border-width: 2px;
|
||||
border-color: #2494db;
|
||||
outline-color: transparent;
|
||||
box-shadow: 0 0 0 2px white, 0 0 0 4px #2494db;
|
||||
}
|
||||
|
||||
[dir="rtl"] .form-type-boolean {
|
||||
margin-right: 2.25rem
|
||||
}
|
||||
input[type="radio"].error:focus {
|
||||
outline-color: transparent;
|
||||
box-shadow: 0 0 0 2px white, 0 0 0 4px #e33f1e;
|
||||
}
|
||||
|
||||
.form-type-boolean {
|
||||
clear: both
|
||||
}
|
||||
|
||||
[dir="ltr"] .form-type-boolean input[type="checkbox"],[dir="ltr"]
|
||||
.form-type-boolean input[type="radio"] {
|
||||
float: left
|
||||
}
|
||||
|
||||
[dir="rtl"] .form-type-boolean input[type="checkbox"],[dir="rtl"]
|
||||
.form-type-boolean input[type="radio"] {
|
||||
float: right
|
||||
}
|
||||
|
||||
[dir="ltr"] .form-type-boolean input[type="checkbox"],[dir="ltr"]
|
||||
.form-type-boolean input[type="radio"] {
|
||||
margin-left: -2.25rem
|
||||
}
|
||||
|
||||
[dir="rtl"] .form-type-boolean input[type="checkbox"],[dir="rtl"]
|
||||
.form-type-boolean input[type="radio"] {
|
||||
margin-right: -2.25rem
|
||||
}
|
||||
|
||||
.form-type-boolean input[type="checkbox"],
|
||||
.form-type-boolean input[type="radio"] {
|
||||
position: relative;
|
||||
top: 0.5625rem;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
[dir="ltr"] .form-type-boolean.form-no-label {
|
||||
margin-left: 0
|
||||
}
|
||||
|
||||
[dir="rtl"] .form-type-boolean.form-no-label {
|
||||
margin-right: 0
|
||||
}
|
||||
|
||||
.form-type-boolean.form-no-label input[type="checkbox"],
|
||||
.form-type-boolean.form-no-label input[type="radio"] {
|
||||
position: static;
|
||||
float: none;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
[dir="ltr"] .form-type-boolean .form-item__description,[dir="ltr"]
|
||||
.form-type-boolean .form-item--error-message {
|
||||
margin-left: -2.25rem
|
||||
}
|
||||
|
||||
[dir="rtl"] .form-type-boolean .form-item__description,[dir="rtl"]
|
||||
.form-type-boolean .form-item--error-message {
|
||||
margin-right: -2.25rem
|
||||
}
|
||||
|
||||
.form-boolean-group .form-type-boolean {
|
||||
margin-top: 1.125rem;
|
||||
margin-bottom: 1.125rem;
|
||||
}
|
||||
|
||||
[dir="ltr"] .container-inline .form-boolean-group .form-type-boolean:not(:last-child) {
|
||||
margin-right: 1.125rem
|
||||
}
|
||||
|
||||
[dir="rtl"] .container-inline .form-boolean-group .form-type-boolean:not(:last-child) {
|
||||
margin-left: 1.125rem
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,30 +5,30 @@
|
|||
|
||||
@import "../base/variables.pcss.css";
|
||||
|
||||
:root {
|
||||
--form-boolean-radio-icon-size: 17px;
|
||||
}
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
display: inline-block;
|
||||
width: var(--sp1-5);
|
||||
height: var(--sp1-5);
|
||||
vertical-align: text-bottom;
|
||||
border: var(--form-element-border-size-base) solid var(--color--gray-30);
|
||||
border-radius: var(--border-radius-base);
|
||||
background-color: var(--color--gray-95);
|
||||
margin: 0;
|
||||
vertical-align: middle;
|
||||
border: 1px solid var(--color--gray-30);
|
||||
border-radius: 3px;
|
||||
background-color: var(--color--white);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50% 50%;
|
||||
background-size: var(--sp1) var(--sp1);
|
||||
appearance: none;
|
||||
|
||||
&:focus {
|
||||
outline: var(--outline--thick);
|
||||
box-shadow: var(--shadow-focusable);
|
||||
border: solid 2px var(--color--blue-50);
|
||||
outline: solid 2px var(--color--blue-50);
|
||||
|
||||
@supports (outline-style: double) {
|
||||
border-width: 1px;
|
||||
outline-width: 6px;
|
||||
outline-style: double;
|
||||
outline-offset: -1px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -37,22 +37,44 @@ input[type="radio"] {
|
|||
}
|
||||
|
||||
&[disabled] {
|
||||
opacity: 0.3;
|
||||
background-color: var(--color--gray-90);
|
||||
|
||||
&:hover {
|
||||
border-color: var(--color--gray-30);
|
||||
}
|
||||
|
||||
&:checked {
|
||||
border-width: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
&:checked {
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
&.error {
|
||||
border-color: var(--color--red);
|
||||
border: solid 2px var(--color--red);
|
||||
|
||||
&:focus {
|
||||
outline-color: var(--color--red);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Specific pseudo-element to apply red borders for IE11 bool elements in case of error */
|
||||
&.error::-ms-check {
|
||||
border: 1px solid var(--color--red);
|
||||
}
|
||||
|
||||
& + label {
|
||||
display: inline-block;
|
||||
padding-inline-start: var(--sp0-5);
|
||||
}
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
&:checked {
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='18' height='14' viewBox='0 0 18 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%232494DB' d='M14.8232 0.176777C14.9209 0.0791457 15.0791 0.0791455 15.1768 0.176777L16.9445 1.94454C17.0422 2.04217 17.0422 2.20047 16.9445 2.2981L6.23744 13.0052C6.13981 13.1028 5.98151 13.1028 5.88388 13.0052L0.176777 7.2981C0.0791456 7.20047 0.0791456 7.04218 0.176777 6.94454L1.94454 5.17678C2.04217 5.07915 2.20047 5.07915 2.2981 5.17678L5.88388 8.76256C5.98151 8.86019 6.13981 8.86019 6.23744 8.76256L14.8232 0.176777Z'/%3E%3C/svg%3E%0A");
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='17px' height='13px' viewBox='0 0 17 13' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath d='M14.8232,0.176777 C14.9209,0.0791457 15.0791,0.0791455 15.1768,0.176777 L16.9445,1.94454 C17.0422,2.04217 17.0422,2.20047 16.9445,2.2981 L6.23744,13.0052 C6.13981,13.1028 5.98151,13.1028 5.88388,13.0052 L0.176777,7.2981 C0.0791456,7.20047 0.0791456,7.04218 0.176777,6.94454 L1.94454,5.17678 C2.04217,5.07915 2.20047,5.07915 2.2981,5.17678 L5.88388,8.76256 C5.98151,8.86019 6.13981,8.86019 6.23744,8.76256 L14.8232,0.176777 Z' id='Path' fill='%232494DB' fill-rule='nonzero'%3E%3C/path%3E%3C/svg%3E");
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -61,45 +83,22 @@ input[type="radio"] {
|
|||
|
||||
&:checked {
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8.5' cy='8.5' r='8.5' fill='%232494DB'/%3E%3C/svg%3E%0A");
|
||||
background-size: var(--form-boolean-radio-icon-size) var(--form-boolean-radio-icon-size);
|
||||
background-size: 17px;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-width: 2px;
|
||||
border-color: var(--color--blue-50);
|
||||
outline-color: transparent;
|
||||
box-shadow: 0 0 0 2px white, 0 0 0 4px var(--color--blue-50);
|
||||
}
|
||||
|
||||
&.error:focus {
|
||||
outline-color: transparent;
|
||||
box-shadow: 0 0 0 2px white, 0 0 0 4px var(--color--red);
|
||||
}
|
||||
}
|
||||
|
||||
.form-type-boolean {
|
||||
clear: both;
|
||||
margin-inline-start: var(--sp2);
|
||||
|
||||
& input[type="checkbox"],
|
||||
& input[type="radio"] {
|
||||
position: relative;
|
||||
top: var(--sp0-5);
|
||||
float: inline-start;
|
||||
margin-inline-start: calc(var(--sp2) * -1);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
&.form-no-label {
|
||||
margin-inline-start: 0;
|
||||
|
||||
& input[type="checkbox"],
|
||||
& input[type="radio"] {
|
||||
position: static;
|
||||
float: none;
|
||||
margin-inline: 0;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
& .form-item__description,
|
||||
& .form-item--error-message {
|
||||
margin-inline-start: calc(var(--sp2) * -1);
|
||||
}
|
||||
}
|
||||
|
||||
.form-boolean-group .form-type-boolean {
|
||||
margin-block: var(--sp1);
|
||||
}
|
||||
|
||||
.container-inline .form-boolean-group .form-type-boolean:not(:last-child) {
|
||||
margin-inline-end: var(--sp);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,19 +11,19 @@
|
|||
*/
|
||||
|
||||
[dir="ltr"] select {
|
||||
padding-left: 1.5rem
|
||||
padding-left: 1.125rem
|
||||
}
|
||||
|
||||
[dir="rtl"] select {
|
||||
padding-right: 1.5rem
|
||||
padding-right: 1.125rem
|
||||
}
|
||||
|
||||
[dir="ltr"] select {
|
||||
padding-right: 4.5rem
|
||||
padding-right: 3.375rem
|
||||
}
|
||||
|
||||
[dir="rtl"] select {
|
||||
padding-left: 4.5rem
|
||||
padding-left: 3.375rem
|
||||
}
|
||||
|
||||
select {
|
||||
|
|
@ -31,63 +31,35 @@ select {
|
|||
height: 3.375rem;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
color: #313637;
|
||||
border-width: 2px 0;
|
||||
border-style: solid;
|
||||
border-color: transparent;
|
||||
border-top-left-radius: 0; /* LTR */
|
||||
border-top-right-radius: 2px; /* LTR */
|
||||
border-bottom-right-radius: 2px; /* LTR */
|
||||
border-bottom-left-radius: 0; /* LTR */
|
||||
outline: 1px solid transparent;
|
||||
/*
|
||||
Couple of notes here:
|
||||
|
||||
The select element is styled with external images so it's visible in Firefox in Windows high contrast
|
||||
mode. There's a number of browser bugs that limit what we can do including not linear-gradients negating the
|
||||
entire ruleset. To work around this, we split off the various backgrounds into separate SVG images, and
|
||||
call them as appropriate. We cannot use the background CSS property because we split off the background-color.
|
||||
We also cannot use a left border because it angles at the end to blend in with the top and bottom
|
||||
transparent borders, so we re-use the background SVG image for this.
|
||||
|
||||
@todo - look at inlining some of the SVGs with an eye on CSS filesize.
|
||||
*/
|
||||
background-color: #f7f9fa;
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='10.5' viewBox='0 0 18 10.5'%3e %3cpath fill='%23fff' d='M18,1.5c0-0.1-0.1-0.3-0.2-0.4l-0.9-0.9c-0.2-0.2-0.6-0.2-0.8,0L9,7.3L1.9,0.2c-0.2-0.2-0.6-0.2-0.8,0L0.2,1.1c-0.2,0.2-0.2,0.6,0,0.8l8.4,8.4c0.2,0.2,0.6,0.2,0.8,0l8.4-8.4C17.9,1.8,18,1.6,18,1.5z'/%3e%3c/svg%3e"), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='54' height='54' viewBox='0 0 54 54'%3e %3cpath fill='%237e96a7' d='M0 0h54v54H0z'/%3e%3c/svg%3e"), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='54' height='54' viewBox='0 0 54 54'%3e %3cpath fill='%237e96a7' d='M0 0h54v54H0z'/%3e%3c/svg%3e");
|
||||
color: #0d1214;
|
||||
border: 1px solid #7e96a7;
|
||||
border-radius: 0.1875rem;
|
||||
background-color: #fff;
|
||||
background-image: url("data:image/svg+xml,%3csvg width='18' height='11' viewBox='0 0 18 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M18 1.49699C18 1.35271 17.9279 1.19038 17.8196 1.08216L16.9178 0.18036C16.8096 0.0721439 16.6473 0 16.503 0C16.3587 0 16.1964 0.0721439 16.0882 0.18036L9 7.26854L1.91182 0.18036C1.80361 0.0721439 1.64128 0 1.49699 0C1.33467 0 1.19038 0.0721439 1.08216 0.18036L0.180361 1.08216C0.0721442 1.19038 0 1.35271 0 1.49699C0 1.64128 0.0721442 1.80361 0.180361 1.91182L8.58517 10.3166C8.69339 10.4248 8.85571 10.497 9 10.497C9.14429 10.497 9.30661 10.4248 9.41483 10.3166L17.8196 1.91182C17.9279 1.80361 18 1.64128 18 1.49699Z' fill='%235D7585'/%3e%3c/svg%3e");
|
||||
background-repeat: no-repeat;
|
||||
background-position: /* LTR */
|
||||
right 18px center,
|
||||
right 0 top -2px,
|
||||
left -48px top -2px;
|
||||
background-position: right 18px center; /* LTR */
|
||||
font-family: inherit;
|
||||
font-size: 1rem;
|
||||
line-height: 3.125rem;
|
||||
font-size: inherit;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none
|
||||
}
|
||||
|
||||
select:focus {
|
||||
border-color: #7e96a7;
|
||||
outline: 6px dashed transparent;
|
||||
box-shadow: 0 0 0 2px #fff, 0 0 0 4px #53b0eb, 0 0 36px rgba(83, 176, 235, 0.25)
|
||||
border: solid 2px #2494db;
|
||||
outline: solid 2px #2494db
|
||||
}
|
||||
|
||||
@supports (outline-style: double) {
|
||||
|
||||
select:focus {
|
||||
outline-style: double
|
||||
border-width: 1px;
|
||||
outline-width: 6px;
|
||||
outline-style: double;
|
||||
outline-offset: -1px
|
||||
}
|
||||
}
|
||||
|
||||
select:hover {
|
||||
border-color: #53b0eb;
|
||||
background-image:
|
||||
url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='10.5' viewBox='0 0 18 10.5'%3e %3cpath fill='%23fff' d='M18,1.5c0-0.1-0.1-0.3-0.2-0.4l-0.9-0.9c-0.2-0.2-0.6-0.2-0.8,0L9,7.3L1.9,0.2c-0.2-0.2-0.6-0.2-0.8,0L0.2,1.1c-0.2,0.2-0.2,0.6,0,0.8l8.4,8.4c0.2,0.2,0.6,0.2,0.8,0l8.4-8.4C17.9,1.8,18,1.6,18,1.5z'/%3e%3c/svg%3e"),
|
||||
url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='54' height='54' viewBox='0 0 54 54'%3e %3cpath fill='%2353b0eb' d='M0 0h54v54H0z'/%3e%3c/svg%3e"),
|
||||
url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='54' height='54' viewBox='0 0 54 54'%3e %3cpath fill='%2353b0eb' d='M0 0h54v54H0z'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
select {
|
||||
|
||||
/* Disables border of select specifically for ms browser */
|
||||
|
|
@ -98,145 +70,31 @@ select::-ms-expand {
|
|||
}
|
||||
|
||||
select[disabled] {
|
||||
pointer-events: none;
|
||||
opacity: 0.6;
|
||||
color: #7e96a7;
|
||||
background-color: #f1f4f7;
|
||||
}
|
||||
|
||||
select.error {
|
||||
border-color: #e33f1e;
|
||||
background-image:
|
||||
url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='10.5' viewBox='0 0 18 10.5'%3e %3cpath fill='%23fff' d='M18,1.5c0-0.1-0.1-0.3-0.2-0.4l-0.9-0.9c-0.2-0.2-0.6-0.2-0.8,0L9,7.3L1.9,0.2c-0.2-0.2-0.6-0.2-0.8,0L0.2,1.1c-0.2,0.2-0.2,0.6,0,0.8l8.4,8.4c0.2,0.2,0.6,0.2,0.8,0l8.4-8.4C17.9,1.8,18,1.6,18,1.5z'/%3e%3c/svg%3e"),
|
||||
url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='54' height='54' viewBox='0 0 54 54'%3e %3cpath fill='%23e33f1e' d='M0 0h54v54H0z'/%3e%3c/svg%3e"),
|
||||
url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='54' height='54' viewBox='0 0 54 54'%3e %3cpath fill='%23e33f1e' d='M0 0h54v54H0z'/%3e%3c/svg%3e");
|
||||
border: solid 2px #e33f1e
|
||||
}
|
||||
|
||||
[dir="ltr"] select[multiple] {
|
||||
padding-left: 0.5625rem
|
||||
}
|
||||
|
||||
[dir="rtl"] select[multiple] {
|
||||
padding-right: 0.5625rem
|
||||
}
|
||||
|
||||
[dir="ltr"] select[multiple] {
|
||||
padding-right: 0.5625rem
|
||||
}
|
||||
|
||||
[dir="rtl"] select[multiple] {
|
||||
padding-left: 0.5625rem
|
||||
}
|
||||
|
||||
[dir="ltr"] select[multiple] {
|
||||
border-right: solid 2px transparent
|
||||
}
|
||||
|
||||
[dir="rtl"] select[multiple] {
|
||||
border-left: solid 2px transparent
|
||||
}
|
||||
|
||||
[dir="ltr"] select[multiple] {
|
||||
border-left: solid 6px #7e96a7
|
||||
}
|
||||
|
||||
[dir="rtl"] select[multiple] {
|
||||
border-right: solid 6px #7e96a7
|
||||
}
|
||||
select.error:focus {
|
||||
outline-color: #e33f1e;
|
||||
}
|
||||
|
||||
select[multiple] {
|
||||
height: auto;
|
||||
padding-top: 0.5625rem;
|
||||
padding-bottom: 0.5625rem;
|
||||
border-top: 0;
|
||||
border-bottom: 0;
|
||||
padding: 0.5625rem;
|
||||
background-image: none;
|
||||
background-repeat: repeat-y;
|
||||
background-position: left -48px top -2px; /* LTR */
|
||||
line-height: 1 /* Needed by non-Chromium based MS Edge browsers. */
|
||||
}
|
||||
|
||||
[dir="ltr"] select[multiple] option {
|
||||
padding-left: 0.5625rem
|
||||
}
|
||||
|
||||
[dir="rtl"] select[multiple] option {
|
||||
padding-right: 0.5625rem
|
||||
}
|
||||
|
||||
[dir="ltr"] select[multiple] option {
|
||||
padding-right: 0.5625rem
|
||||
}
|
||||
|
||||
[dir="rtl"] select[multiple] option {
|
||||
padding-left: 0.5625rem
|
||||
}
|
||||
|
||||
select[multiple] option {
|
||||
padding-top: 0.5625rem;
|
||||
padding-bottom: 0.5625rem;
|
||||
padding: 0.5625rem;
|
||||
}
|
||||
|
||||
select[multiple]:focus {
|
||||
border-color: #7e96a7;
|
||||
box-shadow:
|
||||
0 -2px 0 #7e96a7,
|
||||
0 2px 0 #7e96a7,
|
||||
0 -2px 0 2px #fff,
|
||||
0 2px 0 2px #fff,
|
||||
0 -2px 0 4px #53b0eb,
|
||||
0 2px 0 4px #53b0eb,
|
||||
0 0 36px rgba(83, 176, 235, 0.25);
|
||||
}
|
||||
|
||||
select[multiple]:hover {
|
||||
border-color: #53b0eb;
|
||||
box-shadow:
|
||||
0 -2px 0 #53b0eb,
|
||||
0 2px 0 #53b0eb;
|
||||
}
|
||||
|
||||
select[multiple]:focus:hover {
|
||||
box-shadow:
|
||||
0 -2px 0 #53b0eb,
|
||||
0 2px 0 #53b0eb,
|
||||
0 -2px 0 2px #fff,
|
||||
0 2px 0 2px #fff,
|
||||
0 -2px 0 4px #53b0eb,
|
||||
0 2px 0 4px #53b0eb,
|
||||
0 0 36px rgba(83, 176, 235, 0.25);
|
||||
}
|
||||
|
||||
select[multiple].error {
|
||||
border-color: #e33f1e;
|
||||
box-shadow:
|
||||
0 -2px 0 #e33f1e,
|
||||
0 2px 0 #e33f1e
|
||||
}
|
||||
|
||||
select[multiple].error:focus {
|
||||
box-shadow:
|
||||
0 -2px 0 #e33f1e,
|
||||
0 2px 0 #e33f1e,
|
||||
0 -2px 0 2px #fff,
|
||||
0 2px 0 2px #fff,
|
||||
0 -2px 0 4px #53b0eb,
|
||||
0 2px 0 4px #53b0eb,
|
||||
0 0 36px rgba(83, 176, 235, 0.25);
|
||||
}
|
||||
|
||||
[dir="ltr"] select.form-element--small {
|
||||
padding-left: 1.21875rem;
|
||||
padding-right: 3.65625rem
|
||||
}
|
||||
|
||||
[dir="rtl"] select.form-element--small {
|
||||
padding-right: 1.21875rem;
|
||||
padding-left: 3.65625rem
|
||||
}
|
||||
|
||||
select.form-element--small {
|
||||
height: 2.8125rem;
|
||||
background-position: right 13.5px center, right -10px top -2px, left -48px top -2px; /* LTR */
|
||||
line-height: 2.5625rem;
|
||||
}
|
||||
|
||||
select {
|
||||
|
|
@ -247,25 +105,14 @@ select {
|
|||
@media screen and (-ms-high-contrast: active) {
|
||||
|
||||
select {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='10.5' viewBox='0 0 18 10.5'%3e %3cpath fill='%23fff' d='M18,1.5c0-0.1-0.1-0.3-0.2-0.4l-0.9-0.9c-0.2-0.2-0.6-0.2-0.8,0L9,7.3L1.9,0.2c-0.2-0.2-0.6-0.2-0.8,0L0.2,1.1c-0.2,0.2-0.2,0.6,0,0.8l8.4,8.4c0.2,0.2,0.6,0.2,0.8,0l8.4-8.4C17.9,1.8,18,1.6,18,1.5z'/%3e%3c/svg%3e")
|
||||
background-image: url("data:image/svg+xml,%3csvg width='18' height='11' viewBox='0 0 18 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M18 1.49699C18 1.35271 17.9279 1.19038 17.8196 1.08216L16.9178 0.18036C16.8096 0.0721439 16.6473 0 16.503 0C16.3587 0 16.1964 0.0721439 16.0882 0.18036L9 7.26854L1.91182 0.18036C1.80361 0.0721439 1.64128 0 1.49699 0C1.33467 0 1.19038 0.0721439 1.08216 0.18036L0.180361 1.08216C0.0721442 1.19038 0 1.35271 0 1.49699C0 1.64128 0.0721442 1.80361 0.180361 1.91182L8.58517 10.3166C8.69339 10.4248 8.85571 10.497 9 10.497C9.14429 10.497 9.30661 10.4248 9.41483 10.3166L17.8196 1.91182C17.9279 1.80361 18 1.64128 18 1.49699Z' fill='%235D7585'/%3e%3c/svg%3e")
|
||||
}
|
||||
|
||||
select[multiple] {
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
|
||||
[dir="rtl"] select {
|
||||
border-top-left-radius: 2px;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 2px;
|
||||
background-position:
|
||||
left 18px center,
|
||||
left 0 top -2px,
|
||||
right -48px top -2px
|
||||
background-position: left 18px center;
|
||||
}
|
||||
|
||||
[dir="rtl"] select[multiple] {
|
||||
background-position: right -48px top -2px;
|
||||
}
|
||||
|
||||
[dir="rtl"] select.form-element--small {
|
||||
background-position: left 13.5px center, right -48px top -2px, left -10px top -2px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,187 +6,81 @@
|
|||
@import "../base/variables.pcss.css";
|
||||
|
||||
:root {
|
||||
--form-element-select-height: var(--sp3);
|
||||
--form-element-select-height--small: var(--sp2-5);
|
||||
--form-element-select-icon: url("../../images/chevron-down.svg");
|
||||
--form-element-select-bg: url("../../images/select-chevron-bg-default.svg");
|
||||
--form-element-select-bg--highlight: url("../../images/select-chevron-bg-highlight.svg");
|
||||
--form-element-select-bg--error: url("../../images/select-chevron-bg-error.svg");
|
||||
--form-element-select-border-size-right: var(--sp3);
|
||||
}
|
||||
|
||||
select {
|
||||
max-width: 100%;
|
||||
height: var(--form-element-select-height);
|
||||
height: var(--sp3);
|
||||
padding-block: 0;
|
||||
padding-inline-start: calc(var(--sp1) + var(--form-element-border-size-left));
|
||||
padding-inline-end: calc(var(--sp1) + var(--form-element-select-border-size-right));
|
||||
color: var(--color--gray-10);
|
||||
border-width: var(--form-element-border-size-base) 0;
|
||||
border-style: solid;
|
||||
border-color: transparent;
|
||||
border-top-left-radius: 0; /* LTR */
|
||||
border-top-right-radius: var(--border-radius-base); /* LTR */
|
||||
border-bottom-right-radius: var(--border-radius-base); /* LTR */
|
||||
border-bottom-left-radius: 0; /* LTR */
|
||||
outline: var(--outline--thin);
|
||||
/*
|
||||
Couple of notes here:
|
||||
|
||||
The select element is styled with external images so it's visible in Firefox in Windows high contrast
|
||||
mode. There's a number of browser bugs that limit what we can do including not linear-gradients negating the
|
||||
entire ruleset. To work around this, we split off the various backgrounds into separate SVG images, and
|
||||
call them as appropriate. We cannot use the background CSS property because we split off the background-color.
|
||||
We also cannot use a left border because it angles at the end to blend in with the top and bottom
|
||||
transparent borders, so we re-use the background SVG image for this.
|
||||
|
||||
@todo - look at inlining some of the SVGs with an eye on CSS filesize.
|
||||
*/
|
||||
background-color: var(--color--gray-95);
|
||||
background-image: var(--form-element-select-icon), var(--form-element-select-bg), var(--form-element-select-bg);
|
||||
padding-inline-start: var(--sp);
|
||||
padding-inline-end: var(--sp3);
|
||||
color: var(--color--gray-0);
|
||||
border: 1px solid var(--color--gray-30);
|
||||
border-radius: var(--border-radius);
|
||||
background-color: var(--color--white);
|
||||
background-image: var(--form-element-select-icon);
|
||||
background-repeat: no-repeat;
|
||||
background-position: /* LTR */
|
||||
right var(--sp1) center,
|
||||
right 0 top calc(-1 * var(--form-element-border-size-base)),
|
||||
left -48px top calc(-1 * var(--form-element-border-size-base));
|
||||
background-position: right var(--sp) center; /* LTR */
|
||||
font-family: inherit;
|
||||
font-size: var(--font-size-base);
|
||||
line-height: calc(var(--form-element-select-height) - 2 * var(--form-element-border-size-base));
|
||||
font-size: inherit;
|
||||
appearance: none;
|
||||
|
||||
&:focus {
|
||||
border-color: var(--color--gray-30);
|
||||
outline: var(--outline--thick);
|
||||
box-shadow: var(--shadow-focusable);
|
||||
border: solid 2px var(--color--blue-50);
|
||||
outline: solid 2px var(--color--blue-50);
|
||||
|
||||
@supports (outline-style: double) {
|
||||
border-width: 1px;
|
||||
outline-width: 6px;
|
||||
outline-style: double;
|
||||
outline-offset: -1px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: var(--color--blue-70);
|
||||
background-image:
|
||||
var(--form-element-select-icon),
|
||||
var(--form-element-select-bg--highlight),
|
||||
var(--form-element-select-bg--highlight);
|
||||
}
|
||||
|
||||
/* Disables border of select specifically for ms browser */
|
||||
&::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
pointer-events: none;
|
||||
opacity: 0.6;
|
||||
color: var(--color--gray-30);
|
||||
background-color: var(--color--gray-90);
|
||||
}
|
||||
|
||||
&.error {
|
||||
border-color: var(--color--red);
|
||||
background-image:
|
||||
var(--form-element-select-icon),
|
||||
var(--form-element-select-bg--error),
|
||||
var(--form-element-select-bg--error);
|
||||
border: solid 2px var(--color--red);
|
||||
|
||||
&:focus {
|
||||
outline-color: var(--color--red);
|
||||
}
|
||||
}
|
||||
|
||||
&[multiple] {
|
||||
height: auto;
|
||||
padding-block: var(--sp0-5);
|
||||
padding-inline-start: var(--sp0-5);
|
||||
padding-inline-end: var(--sp0-5);
|
||||
border-block-start: 0;
|
||||
border-inline-end: solid 2px transparent;
|
||||
border-block-end: 0;
|
||||
border-inline-start: solid 6px var(--color--gray-30);
|
||||
padding: var(--sp0-5);
|
||||
background-image: none;
|
||||
background-repeat: repeat-y;
|
||||
background-position: left -48px top calc(-1 * var(--form-element-border-size-base)); /* LTR */
|
||||
line-height: 1; /* Needed by non-Chromium based MS Edge browsers. */
|
||||
|
||||
& option {
|
||||
padding-block: var(--sp0-5);
|
||||
padding-inline-start: var(--sp0-5);
|
||||
padding-inline-end: var(--sp0-5);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: var(--color--gray-30);
|
||||
box-shadow:
|
||||
0 -2px 0 var(--color--gray-30),
|
||||
0 2px 0 var(--color--gray-30),
|
||||
0 -2px 0 2px var(--color--white),
|
||||
0 2px 0 2px var(--color--white),
|
||||
0 -2px 0 4px var(--color--blue-70),
|
||||
0 2px 0 4px var(--color--blue-70),
|
||||
var(--shadow-focusable-smooth);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: var(--color--blue-70);
|
||||
box-shadow:
|
||||
0 -2px 0 var(--color--blue-70),
|
||||
0 2px 0 var(--color--blue-70);
|
||||
}
|
||||
|
||||
&:focus:hover {
|
||||
box-shadow:
|
||||
0 -2px 0 var(--color--blue-70),
|
||||
0 2px 0 var(--color--blue-70),
|
||||
0 -2px 0 2px var(--color--white),
|
||||
0 2px 0 2px var(--color--white),
|
||||
0 -2px 0 4px var(--color--blue-70),
|
||||
0 2px 0 4px var(--color--blue-70),
|
||||
var(--shadow-focusable-smooth);
|
||||
}
|
||||
|
||||
&.error {
|
||||
border-color: var(--color--red);
|
||||
box-shadow:
|
||||
0 -2px 0 var(--color--red),
|
||||
0 2px 0 var(--color--red);
|
||||
|
||||
&:focus {
|
||||
box-shadow:
|
||||
0 -2px 0 var(--color--red),
|
||||
0 2px 0 var(--color--red),
|
||||
0 -2px 0 2px var(--color--white),
|
||||
0 2px 0 2px var(--color--white),
|
||||
0 -2px 0 4px var(--color--blue-70),
|
||||
0 2px 0 4px var(--color--blue-70),
|
||||
var(--shadow-focusable-smooth);
|
||||
}
|
||||
padding: var(--sp0-5);
|
||||
}
|
||||
}
|
||||
|
||||
&.form-element--small {
|
||||
height: var(--form-element-select-height--small);
|
||||
padding-inline: calc(var(--sp0-75) + var(--form-element-border-size-left)) calc(var(--form-element-select-height--small) + var(--sp0-75));
|
||||
background-position: right var(--sp0-75) center, right -10px top -2px, left -48px top -2px; /* LTR */
|
||||
line-height: calc(var(--form-element-select-height--small) - 2 * var(--form-element-border-size-base));
|
||||
height: var(--sp2-5);
|
||||
}
|
||||
|
||||
/* Necessary for IE11 to show chevron. */
|
||||
@media screen and (-ms-high-contrast: active) {
|
||||
background-image: var(--form-element-select-icon);
|
||||
|
||||
&[multiple] {
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[dir="rtl"] select {
|
||||
border-top-left-radius: var(--border-radius-base);
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: var(--border-radius-base);
|
||||
background-position:
|
||||
left var(--sp1) center,
|
||||
left 0 top calc(-1 * var(--form-element-border-size-base)),
|
||||
right -48px top calc(-1 * var(--form-element-border-size-base));
|
||||
|
||||
&[multiple] {
|
||||
background-position: right -48px top calc(-1 * var(--form-element-border-size-base));
|
||||
}
|
||||
|
||||
&.form-element--small {
|
||||
background-position: left var(--sp0-75) center, right -48px top -2px, left -10px top -2px;
|
||||
}
|
||||
background-position: left var(--sp) center;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,78 +10,6 @@
|
|||
* Text input elements.
|
||||
*/
|
||||
|
||||
[dir="ltr"] [type="color"],[dir="ltr"]
|
||||
[type="date"],[dir="ltr"]
|
||||
[type="datetime-local"],[dir="ltr"]
|
||||
[type="email"],[dir="ltr"]
|
||||
[type="file"],[dir="ltr"]
|
||||
[type="month"],[dir="ltr"]
|
||||
[type="number"],[dir="ltr"]
|
||||
[type="password"],[dir="ltr"]
|
||||
[type="search"],[dir="ltr"]
|
||||
[type="tel"],[dir="ltr"]
|
||||
[type="text"],[dir="ltr"]
|
||||
[type="time"],[dir="ltr"]
|
||||
[type="url"],[dir="ltr"]
|
||||
[type="week"],[dir="ltr"]
|
||||
textarea {
|
||||
padding-left: 1.5rem
|
||||
}
|
||||
|
||||
[dir="rtl"] [type="color"],[dir="rtl"]
|
||||
[type="date"],[dir="rtl"]
|
||||
[type="datetime-local"],[dir="rtl"]
|
||||
[type="email"],[dir="rtl"]
|
||||
[type="file"],[dir="rtl"]
|
||||
[type="month"],[dir="rtl"]
|
||||
[type="number"],[dir="rtl"]
|
||||
[type="password"],[dir="rtl"]
|
||||
[type="search"],[dir="rtl"]
|
||||
[type="tel"],[dir="rtl"]
|
||||
[type="text"],[dir="rtl"]
|
||||
[type="time"],[dir="rtl"]
|
||||
[type="url"],[dir="rtl"]
|
||||
[type="week"],[dir="rtl"]
|
||||
textarea {
|
||||
padding-right: 1.5rem
|
||||
}
|
||||
|
||||
[dir="ltr"] [type="color"],[dir="ltr"]
|
||||
[type="date"],[dir="ltr"]
|
||||
[type="datetime-local"],[dir="ltr"]
|
||||
[type="email"],[dir="ltr"]
|
||||
[type="file"],[dir="ltr"]
|
||||
[type="month"],[dir="ltr"]
|
||||
[type="number"],[dir="ltr"]
|
||||
[type="password"],[dir="ltr"]
|
||||
[type="search"],[dir="ltr"]
|
||||
[type="tel"],[dir="ltr"]
|
||||
[type="text"],[dir="ltr"]
|
||||
[type="time"],[dir="ltr"]
|
||||
[type="url"],[dir="ltr"]
|
||||
[type="week"],[dir="ltr"]
|
||||
textarea {
|
||||
padding-right: 1.25rem
|
||||
}
|
||||
|
||||
[dir="rtl"] [type="color"],[dir="rtl"]
|
||||
[type="date"],[dir="rtl"]
|
||||
[type="datetime-local"],[dir="rtl"]
|
||||
[type="email"],[dir="rtl"]
|
||||
[type="file"],[dir="rtl"]
|
||||
[type="month"],[dir="rtl"]
|
||||
[type="number"],[dir="rtl"]
|
||||
[type="password"],[dir="rtl"]
|
||||
[type="search"],[dir="rtl"]
|
||||
[type="tel"],[dir="rtl"]
|
||||
[type="text"],[dir="rtl"]
|
||||
[type="time"],[dir="rtl"]
|
||||
[type="url"],[dir="rtl"]
|
||||
[type="week"],[dir="rtl"]
|
||||
textarea {
|
||||
padding-left: 1.25rem
|
||||
}
|
||||
|
||||
[type="color"],
|
||||
[type="date"],
|
||||
[type="datetime-local"],
|
||||
|
|
@ -99,90 +27,53 @@ textarea {
|
|||
textarea {
|
||||
max-width: 100%;
|
||||
min-height: 3.375rem;
|
||||
padding-top: 0.8125rem;
|
||||
padding-bottom: 0.8125rem;
|
||||
color: #313637;
|
||||
border-width: 2px 0;
|
||||
border-style: solid;
|
||||
border-color: transparent;
|
||||
border-top-left-radius: 0; /* LTR */
|
||||
border-top-right-radius: 2px; /* LTR */
|
||||
border-bottom-right-radius: 2px; /* LTR */
|
||||
border-bottom-left-radius: 0; /* LTR */
|
||||
outline: 1px solid transparent;
|
||||
background: linear-gradient(to right, #7e96a7 0.375rem, transparent 0.375rem, transparent 100%) #f7f9fa; /* LTR */
|
||||
padding: 0 1.125rem;
|
||||
color: #0d1214;
|
||||
border: 1px solid #7e96a7;
|
||||
border-radius: 0.1875rem;
|
||||
background-color: #fff;
|
||||
font-family: inherit;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5rem;
|
||||
font-size: inherit;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none
|
||||
}
|
||||
|
||||
[type="color"]:focus, [type="date"]:focus, [type="datetime-local"]:focus, [type="email"]:focus, [type="file"]:focus, [type="month"]:focus, [type="number"]:focus, [type="password"]:focus, [type="search"]:focus, [type="tel"]:focus, [type="text"]:focus, [type="time"]:focus, [type="url"]:focus, [type="week"]:focus, textarea:focus {
|
||||
border-color: #7e96a7;
|
||||
outline: 6px dashed transparent;
|
||||
background: /* LTR */
|
||||
linear-gradient(to right, #7e96a7 0.375rem, transparent 0.375rem, transparent 100%),
|
||||
linear-gradient(to left, #7e96a7 2px, transparent 2px, transparent 100%) #f7f9fa;
|
||||
box-shadow: 0 0 0 2px #fff, 0 0 0 4px #53b0eb, 0 0 36px rgba(83, 176, 235, 0.25)
|
||||
border: solid 2px #2494db;
|
||||
outline: solid 2px #2494db
|
||||
}
|
||||
|
||||
@supports (outline-style: double) {
|
||||
|
||||
[type="color"]:focus, [type="date"]:focus, [type="datetime-local"]:focus, [type="email"]:focus, [type="file"]:focus, [type="month"]:focus, [type="number"]:focus, [type="password"]:focus, [type="search"]:focus, [type="tel"]:focus, [type="text"]:focus, [type="time"]:focus, [type="url"]:focus, [type="week"]:focus, textarea:focus {
|
||||
outline-style: double
|
||||
border-width: 1px;
|
||||
outline-width: 6px;
|
||||
outline-style: double;
|
||||
outline-offset: -1px
|
||||
}
|
||||
}
|
||||
|
||||
[type="color"]:hover, [type="date"]:hover, [type="datetime-local"]:hover, [type="email"]:hover, [type="file"]:hover, [type="month"]:hover, [type="number"]:hover, [type="password"]:hover, [type="search"]:hover, [type="tel"]:hover, [type="text"]:hover, [type="time"]:hover, [type="url"]:hover, [type="week"]:hover, textarea:hover {
|
||||
border-color: #53b0eb;
|
||||
background: /* LTR */
|
||||
linear-gradient(to right, #53b0eb 0.375rem, transparent 0.375rem, transparent 100%),
|
||||
linear-gradient(to left, #53b0eb 2px, transparent 2px, transparent 100%) #f7f9fa;
|
||||
}
|
||||
|
||||
[type="color"]::-ms-clear, [type="date"]::-ms-clear, [type="datetime-local"]::-ms-clear, [type="email"]::-ms-clear, [type="file"]::-ms-clear, [type="month"]::-ms-clear, [type="number"]::-ms-clear, [type="password"]::-ms-clear, [type="search"]::-ms-clear, [type="tel"]::-ms-clear, [type="text"]::-ms-clear, [type="time"]::-ms-clear, [type="url"]::-ms-clear, [type="week"]::-ms-clear, textarea::-ms-clear {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[type="color"][disabled], [type="date"][disabled], [type="datetime-local"][disabled], [type="email"][disabled], [type="file"][disabled], [type="month"][disabled], [type="number"][disabled], [type="password"][disabled], [type="search"][disabled], [type="tel"][disabled], [type="text"][disabled], [type="time"][disabled], [type="url"][disabled], [type="week"][disabled], textarea[disabled] {
|
||||
color: #7e96a7;
|
||||
border-color: transparent;
|
||||
background: linear-gradient(to right, #d7e1e8 0.375rem, transparent 0.375rem, transparent 100%) #f7f9fa; /* LTR */
|
||||
background-color: #f1f4f7;
|
||||
}
|
||||
|
||||
[type="color"].error, [type="date"].error, [type="datetime-local"].error, [type="email"].error, [type="file"].error, [type="month"].error, [type="number"].error, [type="password"].error, [type="search"].error, [type="tel"].error, [type="text"].error, [type="time"].error, [type="url"].error, [type="week"].error, textarea.error {
|
||||
border-color: #e33f1e;
|
||||
background: /* LTR */
|
||||
linear-gradient(to right, #e33f1e 0.375rem, transparent 0.375rem, transparent 100%),
|
||||
linear-gradient(to left, #e33f1e 2px, transparent 2px, transparent 100%) #f7f9fa
|
||||
border: solid 2px #e33f1e
|
||||
}
|
||||
|
||||
[type="color"].error:focus, [type="date"].error:focus, [type="datetime-local"].error:focus, [type="email"].error:focus, [type="file"].error:focus, [type="month"].error:focus, [type="number"].error:focus, [type="password"].error:focus, [type="search"].error:focus, [type="tel"].error:focus, [type="text"].error:focus, [type="time"].error:focus, [type="url"].error:focus, [type="week"].error:focus, textarea.error:focus {
|
||||
box-shadow: 0 0 0 2px #fff, 0 0 0 4px #53b0eb, 0 0 36px rgba(83, 176, 235, 0.25);
|
||||
outline-color: #e33f1e;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
[dir="ltr"] [type="color"].form-element--small,[dir="ltr"] [type="date"].form-element--small,[dir="ltr"] [type="datetime-local"].form-element--small,[dir="ltr"] [type="email"].form-element--small,[dir="ltr"] [type="file"].form-element--small,[dir="ltr"] [type="month"].form-element--small,[dir="ltr"] [type="number"].form-element--small,[dir="ltr"] [type="password"].form-element--small,[dir="ltr"] [type="search"].form-element--small,[dir="ltr"] [type="tel"].form-element--small,[dir="ltr"] [type="text"].form-element--small,[dir="ltr"] [type="time"].form-element--small,[dir="ltr"] [type="url"].form-element--small,[dir="ltr"] [type="week"].form-element--small,[dir="ltr"] textarea.form-element--small {
|
||||
padding-left: 1.21875rem
|
||||
}
|
||||
|
||||
[dir="rtl"] [type="color"].form-element--small,[dir="rtl"] [type="date"].form-element--small,[dir="rtl"] [type="datetime-local"].form-element--small,[dir="rtl"] [type="email"].form-element--small,[dir="rtl"] [type="file"].form-element--small,[dir="rtl"] [type="month"].form-element--small,[dir="rtl"] [type="number"].form-element--small,[dir="rtl"] [type="password"].form-element--small,[dir="rtl"] [type="search"].form-element--small,[dir="rtl"] [type="tel"].form-element--small,[dir="rtl"] [type="text"].form-element--small,[dir="rtl"] [type="time"].form-element--small,[dir="rtl"] [type="url"].form-element--small,[dir="rtl"] [type="week"].form-element--small,[dir="rtl"] textarea.form-element--small {
|
||||
padding-right: 1.21875rem
|
||||
}
|
||||
|
||||
[dir="ltr"] [type="color"].form-element--small,[dir="ltr"] [type="date"].form-element--small,[dir="ltr"] [type="datetime-local"].form-element--small,[dir="ltr"] [type="email"].form-element--small,[dir="ltr"] [type="file"].form-element--small,[dir="ltr"] [type="month"].form-element--small,[dir="ltr"] [type="number"].form-element--small,[dir="ltr"] [type="password"].form-element--small,[dir="ltr"] [type="search"].form-element--small,[dir="ltr"] [type="tel"].form-element--small,[dir="ltr"] [type="text"].form-element--small,[dir="ltr"] [type="time"].form-element--small,[dir="ltr"] [type="url"].form-element--small,[dir="ltr"] [type="week"].form-element--small,[dir="ltr"] textarea.form-element--small {
|
||||
padding-right: 0.96875rem
|
||||
}
|
||||
|
||||
[dir="rtl"] [type="color"].form-element--small,[dir="rtl"] [type="date"].form-element--small,[dir="rtl"] [type="datetime-local"].form-element--small,[dir="rtl"] [type="email"].form-element--small,[dir="rtl"] [type="file"].form-element--small,[dir="rtl"] [type="month"].form-element--small,[dir="rtl"] [type="number"].form-element--small,[dir="rtl"] [type="password"].form-element--small,[dir="rtl"] [type="search"].form-element--small,[dir="rtl"] [type="tel"].form-element--small,[dir="rtl"] [type="text"].form-element--small,[dir="rtl"] [type="time"].form-element--small,[dir="rtl"] [type="url"].form-element--small,[dir="rtl"] [type="week"].form-element--small,[dir="rtl"] textarea.form-element--small {
|
||||
padding-left: 0.96875rem
|
||||
}
|
||||
|
||||
[type="color"].form-element--small, [type="date"].form-element--small, [type="datetime-local"].form-element--small, [type="email"].form-element--small, [type="file"].form-element--small, [type="month"].form-element--small, [type="number"].form-element--small, [type="password"].form-element--small, [type="search"].form-element--small, [type="tel"].form-element--small, [type="text"].form-element--small, [type="time"].form-element--small, [type="url"].form-element--small, [type="week"].form-element--small, textarea.form-element--small {
|
||||
min-height: 2.8125rem;
|
||||
padding-top: 0.53125rem;
|
||||
padding-bottom: 0.53125rem;
|
||||
}
|
||||
|
||||
[type="date"] {
|
||||
|
|
@ -210,46 +101,8 @@ textarea {
|
|||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] [type="color"],
|
||||
[dir="rtl"] [type="date"],
|
||||
[dir="rtl"] [type="datetime-local"],
|
||||
[dir="rtl"] [type="email"],
|
||||
[dir="rtl"] [type="file"],
|
||||
[dir="rtl"] [type="month"],
|
||||
[dir="rtl"] [type="number"],
|
||||
[dir="rtl"] [type="password"],
|
||||
[dir="rtl"] [type="search"],
|
||||
[dir="rtl"] [type="tel"],
|
||||
[dir="rtl"] [type="text"],
|
||||
[dir="rtl"] [type="time"],
|
||||
[dir="rtl"] [type="url"],
|
||||
[dir="rtl"] [type="week"],
|
||||
[dir="rtl"] textarea {
|
||||
border-top-left-radius: 2px;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 2px;
|
||||
background: linear-gradient(to left, #7e96a7 0.375rem, transparent 0.375rem, transparent 100%) #f7f9fa
|
||||
}
|
||||
|
||||
[dir="rtl"] [type="color"]:focus, [dir="rtl"] [type="date"]:focus, [dir="rtl"] [type="datetime-local"]:focus, [dir="rtl"] [type="email"]:focus, [dir="rtl"] [type="file"]:focus, [dir="rtl"] [type="month"]:focus, [dir="rtl"] [type="number"]:focus, [dir="rtl"] [type="password"]:focus, [dir="rtl"] [type="search"]:focus, [dir="rtl"] [type="tel"]:focus, [dir="rtl"] [type="text"]:focus, [dir="rtl"] [type="time"]:focus, [dir="rtl"] [type="url"]:focus, [dir="rtl"] [type="week"]:focus, [dir="rtl"] textarea:focus {
|
||||
background:
|
||||
linear-gradient(to left, #7e96a7 0.375rem, transparent 0.375rem, transparent 100%),
|
||||
linear-gradient(to right, #7e96a7 2px, transparent 2px, transparent 100%) #f7f9fa;
|
||||
}
|
||||
|
||||
[dir="rtl"] [type="color"]:hover, [dir="rtl"] [type="date"]:hover, [dir="rtl"] [type="datetime-local"]:hover, [dir="rtl"] [type="email"]:hover, [dir="rtl"] [type="file"]:hover, [dir="rtl"] [type="month"]:hover, [dir="rtl"] [type="number"]:hover, [dir="rtl"] [type="password"]:hover, [dir="rtl"] [type="search"]:hover, [dir="rtl"] [type="tel"]:hover, [dir="rtl"] [type="text"]:hover, [dir="rtl"] [type="time"]:hover, [dir="rtl"] [type="url"]:hover, [dir="rtl"] [type="week"]:hover, [dir="rtl"] textarea:hover {
|
||||
background:
|
||||
linear-gradient(to left, #53b0eb 0.375rem, transparent 0.375rem, transparent 100%),
|
||||
linear-gradient(to right, #53b0eb 2px, transparent 2px, transparent 100%) #f7f9fa;
|
||||
}
|
||||
|
||||
[dir="rtl"] [type="color"][disabled], [dir="rtl"] [type="date"][disabled], [dir="rtl"] [type="datetime-local"][disabled], [dir="rtl"] [type="email"][disabled], [dir="rtl"] [type="file"][disabled], [dir="rtl"] [type="month"][disabled], [dir="rtl"] [type="number"][disabled], [dir="rtl"] [type="password"][disabled], [dir="rtl"] [type="search"][disabled], [dir="rtl"] [type="tel"][disabled], [dir="rtl"] [type="text"][disabled], [dir="rtl"] [type="time"][disabled], [dir="rtl"] [type="url"][disabled], [dir="rtl"] [type="week"][disabled], [dir="rtl"] textarea[disabled] {
|
||||
background: linear-gradient(to left, #d7e1e8 0.375rem, transparent 0.375rem, transparent 100%) #f7f9fa;
|
||||
}
|
||||
|
||||
[dir="rtl"] [type="color"].error, [dir="rtl"] [type="date"].error, [dir="rtl"] [type="datetime-local"].error, [dir="rtl"] [type="email"].error, [dir="rtl"] [type="file"].error, [dir="rtl"] [type="month"].error, [dir="rtl"] [type="number"].error, [dir="rtl"] [type="password"].error, [dir="rtl"] [type="search"].error, [dir="rtl"] [type="tel"].error, [dir="rtl"] [type="text"].error, [dir="rtl"] [type="time"].error, [dir="rtl"] [type="url"].error, [dir="rtl"] [type="week"].error, [dir="rtl"] textarea.error {
|
||||
background:
|
||||
linear-gradient(to left, #e33f1e 0.375rem, transparent 0.375rem, transparent 100%),
|
||||
linear-gradient(to right, #e33f1e 2px, transparent 2px, transparent 100%) #f7f9fa;
|
||||
}
|
||||
[type="file"] {
|
||||
height: auto;
|
||||
padding-top: 0.84375rem;
|
||||
padding-bottom: 0.84375rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,70 +22,47 @@
|
|||
textarea {
|
||||
max-width: 100%;
|
||||
min-height: var(--sp3);
|
||||
padding-block: calc((var(--sp3) - (var(--font-size-base) * 1.5) - (var(--form-element-border-size-base) * 2)) / 2);
|
||||
padding-inline-start: calc(var(--sp1) + var(--form-element-border-size-left));
|
||||
padding-inline-end: calc(var(--sp1) + var(--form-element-border-size-base));
|
||||
color: var(--color--gray-10);
|
||||
border-width: var(--form-element-border-size-base) 0;
|
||||
border-style: solid;
|
||||
border-color: transparent;
|
||||
border-top-left-radius: 0; /* LTR */
|
||||
border-top-right-radius: var(--border-radius-base); /* LTR */
|
||||
border-bottom-right-radius: var(--border-radius-base); /* LTR */
|
||||
border-bottom-left-radius: 0; /* LTR */
|
||||
outline: var(--outline--thin);
|
||||
background: linear-gradient(to right, var(--color--gray-30) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%) var(--color--gray-95); /* LTR */
|
||||
padding: 0 var(--sp);
|
||||
color: var(--color--gray-0);
|
||||
border: 1px solid var(--color--gray-30);
|
||||
border-radius: var(--border-radius);
|
||||
background-color: var(--color--white);
|
||||
font-family: inherit;
|
||||
font-size: var(--font-size-base);
|
||||
line-height: calc(var(--font-size-base) * 1.5);
|
||||
font-size: inherit;
|
||||
appearance: none;
|
||||
|
||||
&:focus {
|
||||
border-color: var(--color--gray-30);
|
||||
outline: var(--outline--thick);
|
||||
background: /* LTR */
|
||||
linear-gradient(to right, var(--color--gray-30) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%),
|
||||
linear-gradient(to left, var(--color--gray-30) var(--form-element-border-size-base), transparent var(--form-element-border-size-base), transparent 100%) var(--color--gray-95);
|
||||
box-shadow: var(--shadow-focusable);
|
||||
border: solid 2px var(--color--blue-50);
|
||||
outline: solid 2px var(--color--blue-50);
|
||||
|
||||
@supports (outline-style: double) {
|
||||
border-width: 1px;
|
||||
outline-width: 6px;
|
||||
outline-style: double;
|
||||
outline-offset: -1px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: var(--color--blue-70);
|
||||
background: /* LTR */
|
||||
linear-gradient(to right, var(--color--blue-70) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%),
|
||||
linear-gradient(to left, var(--color--blue-70) var(--form-element-border-size-base), transparent var(--form-element-border-size-base), transparent 100%) var(--color--gray-95);
|
||||
}
|
||||
|
||||
&::-ms-clear {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
color: var(--color--gray-30);
|
||||
border-color: transparent;
|
||||
background: linear-gradient(to right, var(--color--gray-70) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%) var(--color--gray-95); /* LTR */
|
||||
background-color: var(--color--gray-90);
|
||||
}
|
||||
|
||||
&.error {
|
||||
border-color: var(--color--red);
|
||||
background: /* LTR */
|
||||
linear-gradient(to right, var(--color--red) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%),
|
||||
linear-gradient(to left, var(--color--red) var(--form-element-border-size-base), transparent var(--form-element-border-size-base), transparent 100%) var(--color--gray-95);
|
||||
border: solid 2px var(--color--red);
|
||||
|
||||
&:focus {
|
||||
box-shadow: var(--shadow-focusable);
|
||||
outline-color: var(--color--red);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
}
|
||||
|
||||
&.form-element--small {
|
||||
min-height: var(--sp2-5);
|
||||
padding-block: calc((var(--sp2-5) - (var(--font-size-base) * 1.5) - (var(--form-element-border-size-base) * 2)) / 2);
|
||||
padding-inline-start: calc(var(--sp0-75) + var(--form-element-border-size-left));
|
||||
padding-inline-end: calc(var(--sp0-75) + var(--form-element-border-size-base));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -98,48 +75,7 @@ textarea {
|
|||
}
|
||||
}
|
||||
|
||||
[dir="rtl"] {
|
||||
& [type="color"],
|
||||
& [type="date"],
|
||||
& [type="datetime-local"],
|
||||
& [type="email"],
|
||||
& [type="file"],
|
||||
& [type="month"],
|
||||
& [type="number"],
|
||||
& [type="password"],
|
||||
& [type="search"],
|
||||
& [type="tel"],
|
||||
& [type="text"],
|
||||
& [type="time"],
|
||||
& [type="url"],
|
||||
& [type="week"],
|
||||
& textarea {
|
||||
border-top-left-radius: var(--border-radius-base);
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: var(--border-radius-base);
|
||||
background: linear-gradient(to left, var(--color--gray-30) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%) var(--color--gray-95);
|
||||
|
||||
&:focus {
|
||||
background:
|
||||
linear-gradient(to left, var(--color--gray-30) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%),
|
||||
linear-gradient(to right, var(--color--gray-30) var(--form-element-border-size-base), transparent var(--form-element-border-size-base), transparent 100%) var(--color--gray-95);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background:
|
||||
linear-gradient(to left, var(--color--blue-70) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%),
|
||||
linear-gradient(to right, var(--color--blue-70) var(--form-element-border-size-base), transparent var(--form-element-border-size-base), transparent 100%) var(--color--gray-95);
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
background: linear-gradient(to left, var(--color--gray-70) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%) var(--color--gray-95);
|
||||
}
|
||||
|
||||
&.error {
|
||||
background:
|
||||
linear-gradient(to left, var(--color--red) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%),
|
||||
linear-gradient(to right, var(--color--red) var(--form-element-border-size-base), transparent var(--form-element-border-size-base), transparent 100%) var(--color--gray-95);
|
||||
}
|
||||
}
|
||||
[type="file"] {
|
||||
height: auto;
|
||||
padding-block: var(--sp0-75);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,4 +14,5 @@ textarea {
|
|||
display: block;
|
||||
width: 100%;
|
||||
min-height: 9rem;
|
||||
padding: 1.125rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,4 +9,5 @@ textarea {
|
|||
display: block;
|
||||
width: 100%;
|
||||
min-height: var(--sp8);
|
||||
padding: var(--sp);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -58,11 +58,9 @@ tr .form-item,
|
|||
*/
|
||||
|
||||
.form-item__label {
|
||||
display: table;
|
||||
display: block;
|
||||
margin-top: 0.5625rem;
|
||||
margin-bottom: 0.5625rem;
|
||||
font-size: 1.125rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
[dir="ltr"] .container-inline .form-item__label {
|
||||
|
|
|
|||
|
|
@ -42,10 +42,8 @@ tr .form-item,
|
|||
* Form element label.
|
||||
*/
|
||||
.form-item__label {
|
||||
display: table;
|
||||
display: block;
|
||||
margin-block: var(--sp0-5);
|
||||
font-size: var(--font-size-l);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.container-inline .form-item__label {
|
||||
|
|
|
|||
|
|
@ -195,13 +195,11 @@
|
|||
appearance: none
|
||||
}
|
||||
|
||||
.messages__close::before,
|
||||
.messages__close::after {
|
||||
.messages__close:before,
|
||||
.messages__close:after {
|
||||
position: absolute;
|
||||
/* stylelint-disable csstools/use-logical */
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
/* stylelint-enable csstools/use-logical */
|
||||
display: block;
|
||||
width: 2.0625rem;
|
||||
height: 2px;
|
||||
|
|
@ -209,11 +207,11 @@
|
|||
background-color: #7e96a7;
|
||||
}
|
||||
|
||||
.messages__close::before {
|
||||
.messages__close:before {
|
||||
transform: translate(-50%, -50%) rotate(45deg);
|
||||
}
|
||||
|
||||
.messages__close::after {
|
||||
.messages__close:after {
|
||||
transform: translate(-50%, -50%) rotate(-45deg);
|
||||
}
|
||||
|
||||
|
|
@ -256,11 +254,11 @@
|
|||
}
|
||||
|
||||
[dir="ltr"] .js-form-managed-file .messages {
|
||||
border-left: 6px solid #e33f1e;
|
||||
border-left: solid 6px #e33f1e;
|
||||
}
|
||||
|
||||
[dir="rtl"] .js-form-managed-file .messages {
|
||||
border-right: 6px solid #e33f1e;
|
||||
border-right: solid 6px #e33f1e;
|
||||
}
|
||||
|
||||
.js-form-managed-file .messages {
|
||||
|
|
|
|||
|
|
@ -93,13 +93,11 @@
|
|||
background: none;
|
||||
appearance: none;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
&:before,
|
||||
&:after {
|
||||
position: absolute;
|
||||
/* stylelint-disable csstools/use-logical */
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
/* stylelint-enable csstools/use-logical */
|
||||
display: block;
|
||||
width: 33px;
|
||||
height: 2px;
|
||||
|
|
@ -107,11 +105,11 @@
|
|||
background-color: var(--color--gray-30);
|
||||
}
|
||||
|
||||
&::before {
|
||||
&:before {
|
||||
transform: translate(-50%, -50%) rotate(45deg);
|
||||
}
|
||||
|
||||
&::after {
|
||||
&:after {
|
||||
transform: translate(-50%, -50%) rotate(-45deg);
|
||||
}
|
||||
|
||||
|
|
@ -158,5 +156,5 @@
|
|||
|
||||
.js-form-managed-file .messages {
|
||||
margin-block-end: var(--sp1);
|
||||
border-inline-start: var(--form-element-border-size-left) solid var(--color--red);
|
||||
border-inline-start: solid 6px var(--color--red);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
overflow: hidden;
|
||||
height: 1.125rem;
|
||||
border: 1px solid #0d77b5;
|
||||
border-radius: 2px;
|
||||
border-radius: 0.1875rem;
|
||||
}
|
||||
|
||||
.progress__bar {
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="10.5" viewBox="0 0 18 10.5">
|
||||
<path fill="#fff" d="M18,1.5c0-0.1-0.1-0.3-0.2-0.4l-0.9-0.9c-0.2-0.2-0.6-0.2-0.8,0L9,7.3L1.9,0.2c-0.2-0.2-0.6-0.2-0.8,0L0.2,1.1c-0.2,0.2-0.2,0.6,0,0.8l8.4,8.4c0.2,0.2,0.6,0.2,0.8,0l8.4-8.4C17.9,1.8,18,1.6,18,1.5z"/>
|
||||
<svg width="18" height="11" viewBox="0 0 18 11" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M18 1.49699C18 1.35271 17.9279 1.19038 17.8196 1.08216L16.9178 0.18036C16.8096 0.0721439 16.6473 0 16.503 0C16.3587 0 16.1964 0.0721439 16.0882 0.18036L9 7.26854L1.91182 0.18036C1.80361 0.0721439 1.64128 0 1.49699 0C1.33467 0 1.19038 0.0721439 1.08216 0.18036L0.180361 1.08216C0.0721442 1.19038 0 1.35271 0 1.49699C0 1.64128 0.0721442 1.80361 0.180361 1.91182L8.58517 10.3166C8.69339 10.4248 8.85571 10.497 9 10.497C9.14429 10.497 9.30661 10.4248 9.41483 10.3166L17.8196 1.91182C17.9279 1.80361 18 1.64128 18 1.49699Z" fill="#5D7585"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 313 B After Width: | Height: | Size: 648 B |
|
|
@ -1,3 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="54" height="54" viewBox="0 0 54 54">
|
||||
<path fill="#7e96a7" d="M0 0h54v54H0z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 134 B |
|
|
@ -1,3 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="54" height="54" viewBox="0 0 54 54">
|
||||
<path fill="#e33f1e" d="M0 0h54v54H0z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 134 B |
|
|
@ -1,3 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="54" height="54" viewBox="0 0 54 54">
|
||||
<path fill="#53b0eb" d="M0 0h54v54H0z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 134 B |
Loading…
Reference in New Issue