Unverified Commit 7e04d241 authored by lauriii's avatar lauriii
Browse files

Issue #3078524 by huzooka, kostyashupenko, thalles, katrienc, pranav45,...

Issue #3078524 by huzooka, kostyashupenko, thalles, katrienc, pranav45, 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
parent 2989dd00
......@@ -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;
}
......@@ -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);
}
......@@ -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.
*/
......
......@@ -183,7 +183,6 @@ _:-ms-fullscreen,
}
.form-element[disabled] {
-webkit-opacity: 1;
color: #82828c;
border-color: #bababf;
background-color: #f2f2f3;
......
......@@ -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);
......
......@@ -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;
}
......@@ -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,21 +33,21 @@
}
.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 */
......@@ -46,36 +55,26 @@
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. */
......
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