style: font-colors-dropdown

nshenderov · Feb 2, 2023 · 4996264 · 4996264
1 parent 9485759
commit 4996264
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 45 deletions.
diff --git a/admin/src/components/Input/CKEditor/theme/additional.js b/admin/src/components/Input/CKEditor/theme/additional.js
@@ -11,6 +11,52 @@ export const additional = css`
   	max-height: 700px;
   }
 
+/* --- color-grid --- */
+
+.ck.ck-color-ui-dropdown {
+	--ck-color-grid-tile-size: 22px !important;
+}
+.ck.ck-color-grid__tile{
+	width:auto;
+}
+.ck.ck-color-ui-dropdown .ck-color-grid {
+	grid-gap: 2px;
+}
+.ck.ck-color-ui-dropdown .ck-color-grid .ck-button {
+	border-radius: 2px;
+}
+.ck.ck-color-ui-dropdown .ck.ck-color-grid .ck-color-grid__tile:hover:not(.ck-disabled),
+.ck.ck-color-ui-dropdown .ck.ck-color-grid .ck-color-grid__tile:focus:not(.ck-disabled) {
+	z-index: 1;
+	transform: scale(1.1);
+	border-radius: 2px;
+}
+
+/* --- color-picker --- */
+
+.ck[dir=rtl] .ck-color-input{
+  margin: 0 8px 8px 0 !important;
+  padding: 3px 5px 0 0 !important;
+}
+
+.ck .ck-color-input{
+  margin: 0 0 8px 8px ;
+  padding: 3px 0 0 6px;
+  border-radius:2px ;
+  font-size:.77rem !important;
+  width: 58px !important;
+}
+.ck .ck-color-picker{
+  margin: 0 3px 8px 3px;
+  border-radius:2px !important;
+  width: 27px !important;
+}
+.ck .ck-color-picker-save{
+  margin: 0 0 8px 0;
+  border-radius:2px !important;
+  width:27px !important;
+}
+
 
 /* ---- Style feature config ------------------------------------------------------ */
 

diff --git a/admin/src/components/Input/CKEditor/theme/common.js b/admin/src/components/Input/CKEditor/theme/common.js
@@ -217,10 +217,6 @@ export const common = css`
     .ck-block-toolbar-button {
       margin-left: 2px !important ;
     }
-    .ck-color-input{
-      margin: 0 8px 8px 0 !important;
-      padding: 3px 5px 0 0 !important;
-    }
     & + div{
       justify-content: flex-start;
       & > .ck-word-count {
@@ -233,45 +229,4 @@ export const common = css`
       }
     }
   }
-
-
-  .ck .ck-color-input{
-    margin: 0 0 8px 8px !important;
-    padding: 3px 0 0 5px !important;
-    border-radius:0px !important;
-    width: 115px !important;
-    z-index: 1;
-  }
-
-  .ck .ck-color-picker{
-    margin: 0 3px 8px 3px !important;
-    border-radius:0px !important;
-    width: 80px !important;
-  }
-
-  .ck .ck-color-picker-save{
-    margin: 0 0 8px 0 !important;
-    border-radius:0px !important;
-    width: 50px !important;
-  }
-
-
-  .ck.ck-color-ui-dropdown {
-	--ck-color-grid-tile-size: 20px;
-  }
-
-  .ck.ck-color-ui-dropdown .ck-color-grid {
-  	grid-gap: 1px;
-  }
-
-  .ck.ck-color-ui-dropdown .ck-color-grid .ck-button {
-  	border-radius: 0;
-  }
-
-  .ck.ck-color-ui-dropdown .ck.ck-color-grid .ck-color-grid__tile:hover:not(.ck-disabled),
-  .ck.ck-color-ui-dropdown .ck.ck-color-grid .ck-color-grid__tile:focus:not(.ck-disabled) {
-  	z-index: 1;
-  	transform: scale(1.3);
-  }
-
 `;