Commit 1b9a758b authored by ckrina's avatar ckrina
Browse files

Issue #3251709 by cindytwilliams, andregp, ankithashetty, ckrina, saschaeggi:...

Issue #3251709 by cindytwilliams, andregp, ankithashetty, ckrina, saschaeggi: Define Blue scale for Claro
parent 05b4b091
......@@ -24,7 +24,7 @@ body {
a,
.link {
color: #003cc5;
color: #003ecc;
}
a:hover,
......@@ -42,7 +42,7 @@ a:hover,
a:active,
.link:active {
color: #00339a;
color: #002e9a;
}
hr {
......@@ -144,7 +144,7 @@ blockquote::before {
position: absolute;
left: -2.5rem; /* LTR */
content: open-quote;
color: #003cc5;
color: #003ecc;
font-family: "Times New Roman", times, serif;
font-size: 3rem;
line-height: 1em;
......
......@@ -79,7 +79,7 @@
}
#drupal-off-canvas .ui-widget-content a {
color: #85bef4;
color: #99b8ff;
}
#drupal-off-canvas .form-actions {
......
......@@ -67,7 +67,7 @@
font-weight: normal;
}
#drupal-off-canvas .ui-widget-content a {
color: #85bef4;
color: var(--color-blue-200);
}
#drupal-off-canvas .form-actions {
......
......@@ -9,8 +9,9 @@
* Color Palette.
*/
/* Secondary. */
/* Variations. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
/* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 2% darker than base. */ /* 5% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
/* Gray variations. */
/* Blue variations. */
/*
* Base.
*/
......@@ -28,7 +29,7 @@
*/
/*
* Inputs.
*/ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
*/ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
/*
* Details.
*/
......
......@@ -2,7 +2,7 @@
/*
* Color Palette.
*/
--color-absolutezero: #003cc5;
--color-absolutezero: var(--color-blue-600);
--color-white: #fff;
--color-text: var(--color-gray);
--color-text-light: var(--color-gray-500);
......@@ -15,12 +15,12 @@
--color-lightninggreen: #26a769;
--color-focus: var(--color-lightninggreen);
/* Variations. */
--color-absolutezero-hover: #0036b1; /* 10% darker than base. */
--color-absolutezero-active: #00339a; /* 20% darker than base. */
--color-absolutezero-hover: var(--color-blue-650); /* 5% darker than base. */
--color-absolutezero-active: var(--color-blue-700); /* 10% darker than base. */
--color-maximumred-hover: #c11f1f; /* 5% darker than base. */
--color-maximumred-active: #ab1b1b; /* 10% darker than base. */
--color-bgblue-hover: #f0f5fd; /* 5% darker than base. */
--color-bgblue-active: #e6ecf8; /* 10% darker than base. */
--color-bgblue-hover: var(--color-blue-020); /* 2% darker than base. */
--color-bgblue-active: var(--color-blue-050); /* 5% darker than base. */
--color-bgred-hover: #fdf5f5; /* 5% darker than base. */
--color-bgred-active: #fceded; /* 10% darker than base. */
/* Gray variations. */
......@@ -36,6 +36,21 @@
--color-gray-100: #dedfe4;
--color-gray-050: #f3f4f9;
--color-gray-025: #f9faff;
/* Blue variations. */
--color-blue: var(--color-blue-600);
--color-blue-900: #000f33;
--color-blue-800: #001f66;
--color-blue-700: #002e9a;
--color-blue-650: #0036b1;
--color-blue-600: #003ecc;
--color-blue-500: #004eff;
--color-blue-400: #3371ff;
--color-blue-300: #6694ff;
--color-blue-200: #99b8ff;
--color-blue-100: #ccdbff;
--color-blue-070: #f3f4f9;
--color-blue-050: #e5edff;
--color-blue-020: #f5f8ff;
/*
* Base.
*/
......@@ -98,7 +113,6 @@
--input-border-color: var(--color-gray-500);
--input--hover-border-color: var(--color-text);
--input--focus-border-color: var(--color-absolutezero);
--input--focus-shadow-color: rgba(0, 74, 220, 0.3); /* Absolute zero with opacity. */
--input--error-color: var(--color-maximumred);
--input--error-border-color: var(--color-maximumred);
--input--disabled-color: rgba(84, 85, 96, 0.6); /* Davy's gray with 0.6 opacity. */
......@@ -143,7 +157,7 @@
/**
* Buttons.
*/
--button--focus-border-color: #5a8bed;
--button--focus-border-color: var(--color-blue-300);
--button-border-radius-size: var(--base-border-radius);
--button-fg-color: var(--color-text);
--button-bg-color: var(--color-gray-200);
......
......@@ -117,7 +117,7 @@
.action-link:hover {
text-decoration: none;
color: #0036b1;
background-color: #f0f5fd;
background-color: #f5f8ff;
}
.action-link:focus {
......@@ -127,8 +127,8 @@
}
.action-link:active {
color: #00339a;
background-color: #e6ecf8;
color: #002e9a;
background-color: #e5edff;
}
/**
......@@ -220,7 +220,7 @@
}
.action-link--icon-plus:active::before {
background-image: url("data:image/svg+xml,%3csvg height='16' stroke='%2300309e' stroke-width='2' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M3 8h10M8 3v10'/%3e%3c/svg%3e");
background-image: url("data:image/svg+xml,%3csvg height='16' stroke='%23002E9A' stroke-width='2' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M3 8h10M8 3v10'/%3e%3c/svg%3e");
}
/* Plus — danger */
......@@ -265,7 +265,7 @@
}
.action-link--icon-trash:active::before {
background-image: url("data:image/svg+xml,%3csvg height='16' width='16' fill='%2300309E' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M14.9 2.9c-.1-.4-.2-.6-.2-.6-.1-.4-.4-.4-.8-.5l-2.3-.3c-.3 0-.3 0-.4-.3-.4-.7-.5-1.2-.9-1.2H5.7c-.4 0-.5.5-.9 1.3-.1.2-.1.2-.4.3l-2.3.3c-.4 0-.7.1-.8.4 0 0-.1.2-.2.5-.1.6-.2.5.3.5h13.2c.5 0 .4.1.3-.4zm-1.5 1.8H2.6c-.7 0-.8.1-.7.6l.8 10.1c.1.5.1.6.8.6h9.1c.6 0 .7-.1.8-.6l.8-10.1c0-.5-.1-.6-.8-.6z'/%3e%3c/svg%3e");
background-image: url("data:image/svg+xml,%3csvg height='16' width='16' fill='%23002E9A' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M14.9 2.9c-.1-.4-.2-.6-.2-.6-.1-.4-.4-.4-.8-.5l-2.3-.3c-.3 0-.3 0-.4-.3-.4-.7-.5-1.2-.9-1.2H5.7c-.4 0-.5.5-.9 1.3-.1.2-.1.2-.4.3l-2.3.3c-.4 0-.7.1-.8.4 0 0-.1.2-.2.5-.1.6-.2.5.3.5h13.2c.5 0 .4.1.3-.4zm-1.5 1.8H2.6c-.7 0-.8.1-.7.6l.8 10.1c.1.5.1.6.8.6h9.1c.6 0 .7-.1.8-.6l.8-10.1c0-.5-.1-.6-.8-.6z'/%3e%3c/svg%3e");
}
/* Trash — danger */
......@@ -310,7 +310,7 @@
}
.action-link--icon-ex:active::before {
background-image: url("data:image/svg+xml,%3csvg height='16' stroke='%2300309e' stroke-width='1.5' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13 3L3 13M13 13L3 3'/%3e%3c/svg%3e");
background-image: url("data:image/svg+xml,%3csvg height='16' stroke='%23002E9A' stroke-width='1.5' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13 3L3 13M13 13L3 3'/%3e%3c/svg%3e");
}
/* Ex — danger */
......@@ -355,7 +355,7 @@
}
.action-link--icon-checkmark:active::before {
background-image: url("data:image/svg+xml,%3csvg fill='none' height='16' stroke='%2300309E' stroke-width='2' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2 8.571L5.6 12 14 4'/%3e%3c/svg%3e");
background-image: url("data:image/svg+xml,%3csvg fill='none' height='16' stroke='%23002E9A' stroke-width='2' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2 8.571L5.6 12 14 4'/%3e%3c/svg%3e");
}
/* Checkmark — danger */
......@@ -400,7 +400,7 @@
}
.action-link--icon-cog:active::before {
background-image: url("data:image/svg+xml,%3csvg height='16' fill='%2300309e' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M15.426 9.249a7.29 7.29 0 00.076-.998c0-.36-.035-.71-.086-1.056l-2.275-.293a5.039 5.039 0 00-.498-1.201l1.396-1.808a7.3 7.3 0 00-1.459-1.452l-1.807 1.391a5.058 5.058 0 00-1.2-.499l-.292-2.252C8.943 1.033 8.604 1 8.252 1s-.694.033-1.032.082l-.291 2.251a5.076 5.076 0 00-1.2.499L3.924 2.441a7.3 7.3 0 00-1.459 1.452L3.86 5.701a5.076 5.076 0 00-.499 1.2l-2.276.294A7.35 7.35 0 001 8.251c0 .34.031.671.077.998l2.285.295c.115.426.284.826.499 1.2L2.444 12.58c.411.55.896 1.038 1.443 1.452l1.842-1.42c.374.215.774.383 1.2.498l.298 2.311c.337.047.677.08 1.025.08s.688-.033 1.021-.08l.299-2.311a5.056 5.056 0 001.201-.498l1.842 1.42a7.326 7.326 0 001.443-1.452l-1.416-1.837c.215-.373.383-.773.498-1.199zm-7.174 1.514a2.54 2.54 0 110-5.082 2.542 2.542 0 010 5.082z'/%3e%3c/svg%3e");
background-image: url("data:image/svg+xml,%3csvg height='16' fill='%23002E9A' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M15.426 9.249a7.29 7.29 0 00.076-.998c0-.36-.035-.71-.086-1.056l-2.275-.293a5.039 5.039 0 00-.498-1.201l1.396-1.808a7.3 7.3 0 00-1.459-1.452l-1.807 1.391a5.058 5.058 0 00-1.2-.499l-.292-2.252C8.943 1.033 8.604 1 8.252 1s-.694.033-1.032.082l-.291 2.251a5.076 5.076 0 00-1.2.499L3.924 2.441a7.3 7.3 0 00-1.459 1.452L3.86 5.701a5.076 5.076 0 00-.499 1.2l-2.276.294A7.35 7.35 0 001 8.251c0 .34.031.671.077.998l2.285.295c.115.426.284.826.499 1.2L2.444 12.58c.411.55.896 1.038 1.443 1.452l1.842-1.42c.374.215.774.383 1.2.498l.298 2.311c.337.047.677.08 1.025.08s.688-.033 1.021-.08l.299-2.311a5.056 5.056 0 001.201-.498l1.842 1.42a7.326 7.326 0 001.443-1.452l-1.416-1.837c.215-.373.383-.773.498-1.199zm-7.174 1.514a2.54 2.54 0 110-5.082 2.542 2.542 0 010 5.082z'/%3e%3c/svg%3e");
}
/* Cog — danger */
......@@ -445,7 +445,7 @@
}
.action-link--icon-show:active::before {
background-image: url("data:image/svg+xml,%3csvg fill-rule='evenodd' height='16' fill='%2300309E' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8 3C4.364 3 1.258 5.073 0 8c1.258 2.927 4.364 5 8 5s6.742-2.073 8-5c-1.258-2.927-4.364-5-8-5zm0 8a3 3 0 100-6 3 3 0 000 6z'/%3e%3c/svg%3e");
background-image: url("data:image/svg+xml,%3csvg fill-rule='evenodd' height='16' fill='%23002E9A' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8 3C4.364 3 1.258 5.073 0 8c1.258 2.927 4.364 5 8 5s6.742-2.073 8-5c-1.258-2.927-4.364-5-8-5zm0 8a3 3 0 100-6 3 3 0 000 6z'/%3e%3c/svg%3e");
}
/* Show - danger */
......@@ -490,7 +490,7 @@
}
.action-link--icon-hide:active::before {
background-image: url("data:image/svg+xml,%3csvg fill-rule='evenodd' height='16' fill='%2300309E' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2.01 1.696L2 1.707 14.072 13.78l-.696.697-2.078-2.078A9.232 9.232 0 018 13c-3.636 0-6.742-2.073-8-5 .647-1.505 1.783-2.784 3.228-3.672L1 2.1l.707-.707zM5 8c0-.546.146-1.058.4-1.5l4.1 4.1A3 3 0 015 8zM5.151 3.444l1.76 1.76a3 3 0 013.885 3.885l2.344 2.344C14.41 10.561 15.41 9.375 16 8c-1.258-2.927-4.364-5-8-5-.999 0-1.958.156-2.849.444z'/%3e%3c/svg%3e");
background-image: url("data:image/svg+xml,%3csvg fill-rule='evenodd' height='16' fill='%23002E9A' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2.01 1.696L2 1.707 14.072 13.78l-.696.697-2.078-2.078A9.232 9.232 0 018 13c-3.636 0-6.742-2.073-8-5 .647-1.505 1.783-2.784 3.228-3.672L1 2.1l.707-.707zM5 8c0-.546.146-1.058.4-1.5l4.1 4.1A3 3 0 015 8zM5.151 3.444l1.76 1.76a3 3 0 013.885 3.885l2.344 2.344C14.41 10.561 15.41 9.375 16 8c-1.258-2.927-4.364-5-8-5-.999 0-1.958.156-2.849.444z'/%3e%3c/svg%3e");
}
/* Hide - danger */
......@@ -535,7 +535,7 @@
}
.action-link--icon-key:active::before {
background-image: url("data:image/svg+xml,%3csvg width='15' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13.727 6.714A4.239 4.239 0 008.9 5.896L3.001 0H0v2h1v1.618L1.378 4H3v1h1v1.622h1.622l.864.862L5.5 8.5l.992.99a4.227 4.227 0 001.223 3.234 4.264 4.264 0 006.012 0 4.253 4.253 0 000-6.01zm-.829 5.182a1.653 1.653 0 11-2.338-2.338 1.653 1.653 0 112.338 2.338z' fill='%2300309e'/%3e%3c/svg%3e");
background-image: url("data:image/svg+xml,%3csvg width='15' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13.727 6.714A4.239 4.239 0 008.9 5.896L3.001 0H0v2h1v1.618L1.378 4H3v1h1v1.622h1.622l.864.862L5.5 8.5l.992.99a4.227 4.227 0 001.223 3.234 4.264 4.264 0 006.012 0 4.253 4.253 0 000-6.01zm-.829 5.182a1.653 1.653 0 11-2.338-2.338 1.653 1.653 0 112.338 2.338z' fill='%23002E9A'/%3e%3c/svg%3e");
}
/* Key — danger */
......@@ -580,7 +580,7 @@
}
.action-link--icon-questionmark:active::before {
background-image: url("data:image/svg+xml,%3csvg width='15' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7.002 0a7 7 0 100 14 7 7 0 000-14zm3 5c0 .551-.16 1.085-.477 1.586l-.158.22c-.07.093-.189.241-.361.393a9.67 9.67 0 01-.545.447l-.203.189-.141.129-.096.17L8 8.369v.63H5.999v-.704c.026-.396.078-.73.204-.999a2.83 2.83 0 01.439-.688l.225-.21-.01-.015.176-.14.137-.128c.186-.139.357-.277.516-.417l.148-.18A.948.948 0 008.002 5 1.001 1.001 0 006 5H4a3 3 0 016.002 0zm-1.75 6.619a.627.627 0 01-.625.625h-1.25a.627.627 0 01-.626-.625v-1.238c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625v1.238z' fill='%2300309e'/%3e%3c/svg%3e");
background-image: url("data:image/svg+xml,%3csvg width='15' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7.002 0a7 7 0 100 14 7 7 0 000-14zm3 5c0 .551-.16 1.085-.477 1.586l-.158.22c-.07.093-.189.241-.361.393a9.67 9.67 0 01-.545.447l-.203.189-.141.129-.096.17L8 8.369v.63H5.999v-.704c.026-.396.078-.73.204-.999a2.83 2.83 0 01.439-.688l.225-.21-.01-.015.176-.14.137-.128c.186-.139.357-.277.516-.417l.148-.18A.948.948 0 008.002 5 1.001 1.001 0 006 5H4a3 3 0 016.002 0zm-1.75 6.619a.627.627 0 01-.625.625h-1.25a.627.627 0 01-.626-.625v-1.238c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625v1.238z' fill='%23002E9A'/%3e%3c/svg%3e");
}
/* Question Mark - danger */
......
......@@ -191,7 +191,7 @@
background-image: url(../../images/icons/0036b1/plus.svg);
}
.action-link--icon-plus:active::before {
background-image: url(../../images/icons/00309e/plus.svg);
background-image: url(../../images/icons/002e9a/plus.svg);
}
/* Plus — danger */
......@@ -228,7 +228,7 @@
background-image: url(../../images/icons/0036b1/trash.svg);
}
.action-link--icon-trash:active::before {
background-image: url(../../images/icons/00309e/trash.svg);
background-image: url(../../images/icons/002e9a/trash.svg);
}
/* Trash — danger */
......@@ -265,7 +265,7 @@
background-image: url(../../images/icons/0036b1/ex.svg);
}
.action-link--icon-ex:active::before {
background-image: url(../../images/icons/00309e/ex.svg);
background-image: url(../../images/icons/002e9a/ex.svg);
}
/* Ex — danger */
......@@ -302,7 +302,7 @@
background-image: url(../../images/icons/0036b1/checkmark.svg);
}
.action-link--icon-checkmark:active::before {
background-image: url(../../images/icons/00309e/checkmark.svg);
background-image: url(../../images/icons/002e9a/checkmark.svg);
}
/* Checkmark — danger */
......@@ -339,7 +339,7 @@
background-image: url(../../images/icons/0036b1/cog.svg);
}
.action-link--icon-cog:active::before {
background-image: url(../../images/icons/00309e/cog.svg);
background-image: url(../../images/icons/002e9a/cog.svg);
}
/* Cog — danger */
......@@ -376,7 +376,7 @@
background-image: url(../../images/icons/0036b1/show.svg);
}
.action-link--icon-show:active::before {
background-image: url(../../images/icons/00309e/show.svg);
background-image: url(../../images/icons/002e9a/show.svg);
}
/* Show - danger */
......@@ -413,7 +413,7 @@
background-image: url(../../images/icons/0036b1/hide.svg);
}
.action-link--icon-hide:active::before {
background-image: url(../../images/icons/00309e/hide.svg);
background-image: url(../../images/icons/002e9a/hide.svg);
}
/* Hide - danger */
......@@ -450,7 +450,7 @@
background-image: url("../../images/icons/0036b1/key.svg");
}
.action-link--icon-key:active::before {
background-image: url("../../images/icons/00309e/key.svg");
background-image: url("../../images/icons/002e9a/key.svg");
}
/* Key — danger */
......@@ -487,7 +487,7 @@
background-image: url("../../images/icons/0036b1/questionmark.svg");
}
.action-link--icon-questionmark:active::before {
background-image: url("../../images/icons/00309e/questionmark.svg");
background-image: url("../../images/icons/002e9a/questionmark.svg");
}
/* Question Mark - danger */
......
......@@ -72,7 +72,7 @@
width: 1.125rem;
height: 1.125rem;
animation: claro-throbber 0.75s linear infinite;
border: 2px solid #003cc5;
border: 2px solid #003ecc;
border-right: 2px dotted transparent;
border-radius: 50%;
}
......@@ -117,7 +117,7 @@
height: 1.75rem; /* 28px */
margin: -0.875rem;
content: "";
border: 3px solid #003cc5;
border: 3px solid #003ecc;
border-right: 3px dotted transparent;
}
......
......@@ -47,11 +47,11 @@
}
.js .form-autocomplete.is-autocompleting {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' height='20' width='40'%3e%3cstyle%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%7dto%7btransform:rotate(720deg) translate(-50%25,-50%25)%7d%7d%3c/style%3e%3ccircle fill='none' cy='5' cx='5' stroke='%23004adc' stroke-dashoffset='6.125' stroke-dasharray='25' style='animation:s 1s linear infinite' r='4'/%3e%3c/svg%3e");
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' height='20' width='40'%3e%3cstyle%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%7dto%7btransform:rotate(720deg) translate(-50%25,-50%25)%7d%7d%3c/style%3e%3ccircle fill='none' cy='5' cx='5' stroke='%23003ecc' stroke-dashoffset='6.125' stroke-dasharray='25' style='animation:s 1s linear infinite' r='4'/%3e%3c/svg%3e");
}
.js[dir="rtl"] .form-autocomplete.is-autocompleting {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' height='20' width='40'%3e%3cstyle%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%7dto%7btransform:rotate(-720deg) translate(-50%25,-50%25)%7d%7d%3c/style%3e%3ccircle fill='none' cy='5' cx='5' stroke='%23004adc' stroke-dashoffset='6.125' stroke-dasharray='25' style='animation:s 1s linear infinite' r='4'/%3e%3c/svg%3e");
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' height='20' width='40'%3e%3cstyle%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%7dto%7btransform:rotate(-720deg) translate(-50%25,-50%25)%7d%7d%3c/style%3e%3ccircle fill='none' cy='5' cx='5' stroke='%23003ecc' stroke-dashoffset='6.125' stroke-dasharray='25' style='animation:s 1s linear infinite' r='4'/%3e%3c/svg%3e");
}
/* IE11 does not animate inline SVG. */
......@@ -87,7 +87,7 @@ _:-ms-fullscreen,
bottom: 100%;
max-width: 100%;
margin-bottom: 0.15rem;
color: #003cc5;
color: #003ecc;
font-size: 0.702rem; /* ~11px */
font-weight: bold;
line-height: 1.125rem; /* 18px */
......
......@@ -39,10 +39,10 @@
background-position: 0 50%;
}
.js .form-autocomplete.is-autocompleting {
background-image: url(../../images/icons/004adc/spinner.svg);
background-image: url(../../images/icons/003ecc/spinner.svg);
}
.js[dir="rtl"] .form-autocomplete.is-autocompleting {
background-image: url(../../images/icons/004adc/spinner-rtl.svg);
background-image: url(../../images/icons/003ecc/spinner-rtl.svg);
}
/* IE11 does not animate inline SVG. */
/* stylelint-disable-next-line selector-type-no-unknown */
......
......@@ -126,7 +126,7 @@ a.button:active {
.button--primary {
color: #fff;
background-color: #003cc5;
background-color: #003ecc;
}
.button--primary:hover {
......@@ -135,7 +135,7 @@ a.button:active {
}
.button--primary:active {
background-color: #00339a;
background-color: #002e9a;
}
a.button--primary:hover,
......
......@@ -265,7 +265,7 @@
[open] .claro-details__summary--accordion,
[open] .claro-details__summary--accordion-item,
[open] .claro-details__summary--vertical-tabs-item {
color: #003cc5;
color: #003ecc;
}
.claro-details__summary:hover::before,
......@@ -307,8 +307,8 @@
}
.claro-details__summary:hover {
color: #003cc5;
background-color: #f0f5fd;
color: #003ecc;
background-color: #f5f8ff;
}
/**
......@@ -327,7 +327,7 @@
[open] > .claro-details__summary--vertical-tabs-item:not(:focus):not(:active)::after,
.collapse-processed[open] > .claro-details__summary--vertical-tabs-item .details-title:not(:focus)::after {
opacity: 1;
border: 3px solid #003cc5;
border: 3px solid #003ecc;
border-width: 0 0 0 3px; /* LTR */
box-shadow: none;
}
......@@ -362,7 +362,7 @@
}
.claro-details[open] > .claro-details__summary:focus {
color: #003cc5;
color: #003ecc;
}
/**
......
......@@ -143,7 +143,7 @@
height: 0.5625rem;
content: "";
transform: translate(50%, -50%) rotate(0);
background: url("data:image/svg+xml,%3csvg width='14' height='9' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M.238 1.938L1.647.517 7 5.819 12.354.517l1.408 1.421L7 8.636z' fill='%23222330'/%3e%3c/svg%3e") no-repeat center;
background: url("data:image/svg+xml,%3csvg width='14' height='9' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M.238 1.938L1.647.517 7 5.819 12.354.517l1.408 1.421L7 8.636z' fill='%23000f33'/%3e%3c/svg%3e") no-repeat center;
background-size: contain;
}
......
......@@ -142,7 +142,7 @@
height: 0.5625rem;
content: "";
transform: translate(50%, -50%) rotate(0);
background: url(../../images/icons/222330/chevron-down.svg) no-repeat center;
background: url(../../images/icons/000f33/chevron-down.svg) no-repeat center;
background-size: contain;
}
......
......@@ -48,8 +48,8 @@
.form-boolean--type-checkbox:checked::-ms-check {
color: transparent; /* IE */
border-color: #003cc5;
background-color: #003cc5;
border-color: #003ecc;
background-color: #003ecc;
background-image: url("data:image/svg+xml,%3csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M3.795 7.096l2.387 2.506 6.023-6.327 1.484 1.56-7.507 7.89L2.31 8.656z' fill='%23fff'/%3e%3c/svg%3e");
}
......@@ -61,9 +61,9 @@
.form-boolean--type-radio:checked::-ms-check {
color: transparent; /* IE */
border-color: #003cc5;
background-image: url("data:image/svg+xml,%3csvg width='17' height='17' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle r='4.5' cx='8.5' cy='8.5' fill='%23004adc'/%3e%3c/svg%3e");
box-shadow: inset 0 0 0 1px #003cc5;
border-color: #003ecc;
background-image: url("data:image/svg+xml,%3csvg width='17' height='17' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle r='4.5' cx='8.5' cy='8.5' fill='%23003ecc'/%3e%3c/svg%3e");
box-shadow: inset 0 0 0 1px #003ecc;
}
.form-boolean--type-checkbox:checked:active::-ms-check,
......@@ -73,19 +73,19 @@
}
.form-boolean--type-radio:checked::-ms-check {
border-color: #003cc5;
background-image: url("data:image/svg+xml,%3csvg width='17' height='17' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle r='4.5' cx='8.5' cy='8.5' fill='%23004adc'/%3e%3c/svg%3e");
box-shadow: inset 0 0 0 1px #003cc5;
border-color: #003ecc;
background-image: url("data:image/svg+xml,%3csvg width='17' height='17' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle r='4.5' cx='8.5' cy='8.5' fill='%23003ecc'/%3e%3c/svg%3e");
box-shadow: inset 0 0 0 1px #003ecc;
}
.form-boolean--type-radio:checked:focus::-ms-check {
box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #003cc5;
box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #003ecc;
}
.form-boolean--type-radio:checked:active::-ms-check,
.form-boolean--type-radio:checked:hover::-ms-check {
border-color: #232429;
background-image: url("data:image/svg+xml,%3csvg width='17' height='17' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle r='4.5' cx='8.5' cy='8.5' fill='%23222330'/%3e%3c/svg%3e");
background-image: url("data:image/svg+xml,%3csvg width='17' height='17' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle r='4.5' cx='8.5' cy='8.5' fill='%23000f33'/%3e%3c/svg%3e");
box-shadow: inset 0 0 0 1px #232429;
}
......
......@@ -50,7 +50,7 @@
.form-boolean--type-radio:checked::-ms-check {
color: transparent; /* IE */
border-color: var(--input--focus-border-color);
background-image: url(../../images/icons/004adc/circle.svg);
background-image: url(../../images/icons/003ecc/circle.svg);
box-shadow: inset 0 0 0 1px var(--input--focus-border-color);
}
.form-boolean--type-checkbox:checked:active::-ms-check,
......@@ -60,7 +60,7 @@
}
.form-boolean--type-radio:checked::-ms-check {
border-color: var(--input--focus-border-color);
background-image: url(../../images/icons/004adc/circle.svg);
background-image: url(../../images/icons/003ecc/circle.svg);
box-shadow: inset 0 0 0 1px var(--input--focus-border-color);
}
.form-boolean--type-radio:checked:focus::-ms-check {
......@@ -69,7 +69,7 @@
.form-boolean--type-radio:checked:active::-ms-check,
.form-boolean--type-radio:checked:hover::-ms-check {
border-color: var(--input-fg-color);
background-image: url(../../images/icons/222330/circle.svg);
background-image: url(../../images/icons/000f33/circle.svg);
box-shadow: inset 0 0 0 1px var(--input-fg-color);
}
.form-boolean--type-radio:checked:focus:active::-ms-check,
......
......@@ -113,8 +113,8 @@
}
.form-boolean--type-checkbox:checked {
border-color: #003cc5;
background-color: #003cc5;
border-color: #003ecc;
background-color: #003ecc;
background-image: url("data:image/svg+xml,%3csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M3.795 7.096l2.387 2.506 6.023-6.327 1.484 1.56-7.507 7.89L2.31 8.656z' fill='%23fff'/%3e%3c/svg%3e");
}
......@@ -125,19 +125,19 @@
}
.form-boolean--type-radio:checked {
border-color: #003cc5;
background-image: url("data:image/svg+xml,%3csvg width='17' height='17' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle r='4.5' cx='8.5' cy='8.5' fill='%23004adc'/%3e%3c/svg%3e");
box-shadow: inset 0 0 0 1px #003cc5;
border-color: #003ecc;
background-image: url("data:image/svg+xml,%3csvg width='17' height='17' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle r='4.5' cx='8.5' cy='8.5' fill='%23003ecc'/%3e%3c/svg%3e");
box-shadow: inset 0 0 0 1px #003ecc;
}
.form-boolean--type-radio:checked:focus {
box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #003cc5;
box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #003ecc;
}
.form-boolean--type-radio:checked:active,
.form-boolean--type-radio:checked:hover {
border-color: #232429;
background-image: url("data:image/svg+xml,%3csvg width='17' height='17' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle r='4.5' cx='8.5' cy='8.5' fill='%23222330'/%3e%3c/svg%3e");
background-image: url("data:image/svg+xml,%3csvg width='17' height='17' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle r='4.5' cx='8.5' cy='8.5' fill='%23000f33'/%3e%3c/svg%3e");
box-shadow: inset 0 0 0 1px #232429;
}
......
......@@ -106,7 +106,7 @@
}
.form-boolean--type-radio:checked {
border-color: var(--input--focus-border-color);
background-image: url(../../images/icons/004adc/circle.svg);
background-image: url(../../images/icons/003ecc/circle.svg);
box-shadow: inset 0 0 0 1px var(--input--focus-border-color);
}
.form-boolean--type-radio:checked:focus {
......@@ -115,7 +115,7 @@
.form-boolean--type-radio:checked:active,
.form-boolean--type-radio:checked:hover {
border-color: var(--input-fg-color);
background-image: url(../../images/icons/222330/circle.svg);
background-image: url(../../images/icons/000f33/circle.svg);
box-shadow: inset 0 0 0 1px var(--input-fg-color);
}
.form-boolean--type-radio:checked:focus:active,
......
......@@ -45,7 +45,7 @@
*/
.form-element--type-select:focus {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3e%3cpath fill='none' stroke-width='1.5' d='M1 1l6 6 6-6' stroke='%23004adc'/%3e%3c/svg%3e");
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3e%3cpath fill='none' stroke-width='1.5' d='M1 1l6 6 6-6' stroke='%23003ecc'/%3e%3c/svg%3e");
}
.form-element--type-select[disabled] {
......
......@@ -38,7 +38,7 @@
* Select states.
*/
.form-element--type-select:focus {
background-image: url(../../images/icons/004adc/chevron-down.svg);
background-image: url(../../images/icons/003ecc/chevron-down.svg);
}
.form-element--type-select[disabled] {
background-image: url(../../images/icons/8e929c/chevron-down.svg);
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment