8
0

tableform.css 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. /*
  2. * Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  4. */
  5. @import "../mixins/_rounded.css";
  6. :root {
  7. --ck-table-properties-error-arrow-size: 6px;
  8. --ck-table-properties-min-error-width: 150px;
  9. }
  10. .ck.ck-table-form {
  11. & .ck-table-form__border-row {
  12. & .ck-labeled-view {
  13. & > .ck-label {
  14. font-size: var(--ck-font-size-tiny);
  15. }
  16. }
  17. & .ck-table-form__border-style {
  18. width: 80px;
  19. min-width: 80px;
  20. }
  21. & .ck-table-form__border-width {
  22. width: 80px;
  23. min-width: 80px;
  24. }
  25. }
  26. & .ck-table-form__dimension-operator {
  27. margin: 0;
  28. align-self: start;
  29. display: inline-block;
  30. height: var(--ck-ui-component-min-height);
  31. line-height: var(--ck-ui-component-min-height);
  32. }
  33. & .ck.ck-labeled-view {
  34. & .ck.ck-labeled-view__status {
  35. @mixin ck-rounded-corners;
  36. background: var(--ck-color-base-error);
  37. color: var(--ck-color-base-background);
  38. padding: var(--ck-spacing-small) var(--ck-spacing-medium);
  39. min-width: var(--ck-table-properties-min-error-width);
  40. text-align: center;
  41. /* The arrow pointing towards the field. */
  42. &::after {
  43. border-color: transparent transparent var(--ck-color-base-error) transparent;
  44. border-width: 0 var(--ck-table-properties-error-arrow-size) var(--ck-table-properties-error-arrow-size) var(--ck-table-properties-error-arrow-size);
  45. border-style: solid;
  46. }
  47. animation: ck-table-form-labeled-view-status-appear .15s ease both;
  48. }
  49. /* Hide the error balloon when the field is blurred. Makes the experience much more clear. */
  50. & .ck-input.ck-error:not(:focus) + .ck.ck-labeled-view__status {
  51. display: none;
  52. }
  53. }
  54. }
  55. @keyframes ck-table-form-labeled-view-status-appear {
  56. 0% {
  57. opacity: 0;
  58. }
  59. 100% {
  60. opacity: 1;
  61. }
  62. }