Issue #3078524 by huzooka, kostyashupenko, thalles, katrienc, pranav4…

…5, neelam_wadhwani, prabha1997, ckrina, emma.maria, Maithri Shetty, Meenakshi.g, pminf, shimpy, fhaeberle, KondratievaS, Vinodhini.E, lauriii, cedric_a, bnjmnm, mradcliffe, DyanneNova, katannshaw: Focus styling of WYSIWYG field inputs should be consistent with other inputs (cherry picked from commit 7e04d241c36af0decca03a3985f1770ef07d2dc9)
drupal · Apr 16, 2020 · b6f8c48 · b6f8c48
1 parent be1a0ff
commit b6f8c48
Show file tree

Hide file tree

Showing 7 changed files with 84 additions and 89 deletions.
diff --git a/themes/claro/css/base/elements.css b/themes/claro/css/base/elements.css
@@ -310,6 +310,18 @@ img {
 
 .page-wrapper *:focus,
 .ui-dialog *:focus {
-  outline: 2px dotted transparent;
-  box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769;
+  outline: 2px
+dotted
+transparent;
+  box-shadow: 0
+0
+0
+2px
+#fff
+,
+0
+0
+0
+5px
+#26a769;
 }
diff --git a/themes/claro/css/base/elements.pcss.css b/themes/claro/css/base/elements.pcss.css
@@ -208,6 +208,6 @@ img {
  */
 .page-wrapper *:focus,
 .ui-dialog *:focus {
-  outline: 2px dotted transparent;
-  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus);
+  outline: var(--focus-outline);
+  box-shadow: var(--focus-box-shadow);
 }
diff --git a/themes/claro/css/base/variables.pcss.css b/themes/claro/css/base/variables.pcss.css
@@ -73,7 +73,10 @@
   --transition: all var(--speed-transition) ease-out;
   --base-border-radius: 2px;
   --focus-border-size: 3px;
+  --focus-border-offset-size: 2px;
   --outline-size: 2px;
+  --focus-outline: var(--outline-size) dotted transparent;
+  --focus-box-shadow: 0 0 0 var(--focus-border-offset-size) var(--color-white), 0 0 0 calc(var(--focus-border-size) + var(--focus-border-offset-size)) var(--color-focus);
   /*
    * Inputs.
    */

diff --git a/themes/claro/css/components/form--text.css b/themes/claro/css/components/form--text.css
@@ -183,7 +183,6 @@ _:-ms-fullscreen,
 }
 
 .form-element[disabled] {
-  -webkit-opacity: 1;
   color: #82828c;
   border-color: #bababf;
   background-color: #f2f2f3;

diff --git a/themes/claro/css/components/form--text.pcss.css b/themes/claro/css/components/form--text.pcss.css
@@ -114,7 +114,6 @@ _:-ms-fullscreen,
 }
 
 .form-element[disabled] {
-  -webkit-opacity: 1;
   color: var(--input--disabled-fg-color);
   border-color: var(--input--disabled-border-color);
   background-color: var(--input--disabled-bg-color);

diff --git a/themes/claro/css/theme/ckeditor-editor.css b/themes/claro/css/theme/ckeditor-editor.css
@@ -4,12 +4,10 @@
  * https://www.drupal.org/node/2815083
  * @preserve
  */
-
 /**
  * @file
  * CKEditor appearance overrides.
  */
-
 :root {
   /*
    * Color Palette.
@@ -53,15 +51,17 @@
    * Breadcrumb.
    */
 }
-
+:root { /* 1px */
+  /* Inner border size must be based on chrome border size. */ /* 1px */
+  /* Inner border radius must be based on chrome border radius and size. */
+}
 .cke.cke_chrome {
-  border-radius: 0.125em; /* (2 / 16) */
+  border-width: 1px;
+  border-radius: 2px;
 }
-
 .cke .cke_inner {
-  border-radius: 0.0625em; /* (1 / 16) */
+  border-radius: 1px;
 }
-
 .cke_path_empty:only-child::after {
   position: absolute;
   top: 0;
@@ -71,97 +71,80 @@
   content: "";
   background: #fff;
 }
-
 .cke .cke_top {
-  border: 0.0833em solid transparent; /* Moono lisa skin uses font-size 12px */
+  border: 1px solid transparent;
   border-bottom: 0;
-  border-radius: 0.0833em 0.0833em 0 0;
+  border-radius: 1px 1px 0 0;
 }
-
 .cke .cke_contents {
-  border: 0.0625em solid transparent;
+  border: 1px solid transparent;
   border-top: 0;
   border-bottom: 0;
 }
-
 .cke .cke_bottom {
-  border: 0.0833em solid transparent; /* Moono lisa skin uses font-size 12px */
+  border: 1px solid transparent;
   border-top: 0;
-  border-radius: 0 0 0.0833em 0.0833em;
+  border-radius: 0 0 1px 1px;
 }
-
 /* Default */
-
 .cke.cke_chrome {
   border-color: #8e929c;
 }
-
-/* Error. */
-
-.error + .cke.cke_chrome,
-.error + .cke .cke_contents,
-.error + .cke .cke_top,
-.error + .cke .cke_bottom {
-  border-color: #d72222;
-}
-
 /* Hover. */
-
 .cke.cke_chrome:hover,
 .cke:hover .cke_contents,
 .cke:hover .cke_top,
-.cke:hover .cke_bottom,
-.error + .cke.cke_chrome:hover,
-.error + .cke:hover .cke_contents,
-.error + .cke:hover .cke_top,
-.error + .cke:hover .cke_bottom {
+.cke:hover .cke_bottom {
   border-color: #222330;
 }
-
 /* Focus. */
-
-.cke.cke_chrome.cke_focus,
-.cke.cke_focus .cke_contents,
-.cke.cke_focus .cke_top,
-.cke.cke_focus .cke_bottom,
-.error + .cke.cke_chrome.cke_focus,
-.error + .cke.cke_focus .cke_contents,
-.error + .cke.cke_focus .cke_top,
-.error + .cke.cke_focus .cke_bottom {
-  border-color: #003cc5;
-}
-
+.cke.cke_chrome.cke_focus {
+  outline: 2px
+dotted
+transparent;
+  box-shadow: 0
+0
+0
+2px
+#fff
+,
+0
+0
+0
+5px
+#26a769;
+}
+/* Error. */
+.error + .cke.cke_chrome,
+.error + .cke .cke_contents,
+.error + .cke .cke_top,
+.error + .cke .cke_bottom {
+  border-color: #d72222;
+}
 /* Disabled. */
-
 [disabled] + .cke.cke_chrome {
   border-color: #bababf;
 }
-
 [disabled] + .cke .cke_contents,
 [disabled] + .cke .cke_top,
 [disabled] + .cke .cke_bottom {
   border-color: transparent;
 }
-
 [disabled] + .cke .cke_contents {
   border-color: #f2f2f3;
   background: hsl(240, 4%, 90%); /* Calculated from disabled input bg and iframe opacity. */
 }
-
 [disabled] + .cke iframe,
 [disabled] + .cke .cke_source {
   opacity: 0.505;
 }
-
 [disabled] + .cke .cke_bottom {
   background: #f2f2f3;
 }
-
 [disabled] + .cke .cke_bottom > * {
   /* Don't show element path dor disabled editor. */
   opacity: 0;
 }
-
 [disabled] + .cke .cke_path_empty::after {
   content: none;
 }
diff --git a/themes/claro/css/theme/ckeditor-editor.pcss.css b/themes/claro/css/theme/ckeditor-editor.pcss.css
@@ -2,15 +2,24 @@
  * @file
  * CKEditor appearance overrides.
  */
-
 @import "../base/variables.pcss.css";
 
+:root {
+  --ckeditor-chrome-border-size: var(--input-border-size); /* 1px */
+  --ckeditor-chrome-border-radius: var(--base-border-radius);
+  /* Inner border size must be based on chrome border size. */
+  --ckeditor-inner-border-size: calc(var(--input--error-border-size) - var(--ckeditor-chrome-border-size)); /* 1px */
+  /* Inner border radius must be based on chrome border radius and size. */
+  --ckeditor-inner-border-radius: calc(var(--ckeditor-chrome-border-radius) - var(--ckeditor-chrome-border-size));
+}
+
 .cke.cke_chrome {
-  border-radius: 0.125em; /* (2 / 16) */
+  border-width: var(--ckeditor-chrome-border-size);
+  border-radius: var(--ckeditor-chrome-border-radius);
 }
 
 .cke .cke_inner {
-  border-radius: 0.0625em; /* (1 / 16) */
+  border-radius: var(--ckeditor-inner-border-radius);
 }
 
 .cke_path_empty:only-child::after {
@@ -24,58 +33,48 @@
 }
 
 .cke .cke_top {
-  border: 0.0833em solid transparent; /* Moono lisa skin uses font-size 12px */
+  border: var(--ckeditor-inner-border-size) solid transparent;
   border-bottom: 0;
-  border-radius: 0.0833em 0.0833em 0 0;
+  border-radius: var(--ckeditor-inner-border-size) var(--ckeditor-inner-border-size) 0 0;
 }
 
 .cke .cke_contents {
-  border: 0.0625em solid transparent;
+  border: var(--ckeditor-inner-border-size) solid transparent;
   border-top: 0;
   border-bottom: 0;
 }
 
 .cke .cke_bottom {
-  border: 0.0833em solid transparent; /* Moono lisa skin uses font-size 12px */
+  border: var(--ckeditor-inner-border-size) solid transparent;
   border-top: 0;
-  border-radius: 0 0 0.0833em 0.0833em;
+  border-radius: 0 0 var(--ckeditor-inner-border-size) var(--ckeditor-inner-border-size);
 }
 
 /* Default */
 .cke.cke_chrome {
   border-color: var(--input-border-color);
 }
 
-/* Error. */
-.error + .cke.cke_chrome,
-.error + .cke .cke_contents,
-.error + .cke .cke_top,
-.error + .cke .cke_bottom {
-  border-color: var(--input--error-border-color);
-}
-
 /* Hover. */
 .cke.cke_chrome:hover,
 .cke:hover .cke_contents,
 .cke:hover .cke_top,
-.cke:hover .cke_bottom,
-.error + .cke.cke_chrome:hover,
-.error + .cke:hover .cke_contents,
-.error + .cke:hover .cke_top,
-.error + .cke:hover .cke_bottom {
+.cke:hover .cke_bottom {
   border-color: var(--input--hover-border-color);
 }
 
 /* Focus. */
-.cke.cke_chrome.cke_focus,
-.cke.cke_focus .cke_contents,
-.cke.cke_focus .cke_top,
-.cke.cke_focus .cke_bottom,
-.error + .cke.cke_chrome.cke_focus,
-.error + .cke.cke_focus .cke_contents,
-.error + .cke.cke_focus .cke_top,
-.error + .cke.cke_focus .cke_bottom {
-  border-color: var(--input--focus-border-color);
+.cke.cke_chrome.cke_focus {
+  outline: var(--focus-outline);
+  box-shadow: var(--focus-box-shadow);
+}
+
+/* Error. */
+.error + .cke.cke_chrome,
+.error + .cke .cke_contents,
+.error + .cke .cke_top,
+.error + .cke .cke_bottom {
+  border-color: var(--input--error-border-color);
 }
 
 /* Disabled. */