tableform.css 2.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  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-form__row {
  12. &.ck-table-form__border-row {
  13. & .ck-labeled-view {
  14. & > .ck-label {
  15. font-size: var(--ck-font-size-tiny);
  16. text-align: center;
  17. }
  18. }
  19. & .ck-table-form__border-style {
  20. width: 80px;
  21. min-width: 80px;
  22. }
  23. & .ck-table-form__border-width {
  24. width: 50px;
  25. min-width: 50px;
  26. }
  27. }
  28. &.ck-table-form__dimensions-row {
  29. padding: 0;
  30. & .ck-labeled-view > .ck-label {
  31. font-size: 10px;
  32. text-align: center;
  33. }
  34. & .ck-table-form__dimensions-row__width {
  35. margin-right: var(--ck-spacing-small);
  36. }
  37. & .ck-table-form__dimensions-row__height {
  38. margin-left: var(--ck-spacing-small);
  39. }
  40. & .ck-table-form__dimension-operator {
  41. margin: 0;
  42. align-self: start;
  43. display: inline-block;
  44. height: var(--ck-ui-component-min-height);
  45. line-height: var(--ck-ui-component-min-height);
  46. }
  47. }
  48. }
  49. & .ck.ck-labeled-view {
  50. & .ck.ck-labeled-view__status {
  51. @mixin ck-rounded-corners;
  52. background: var(--ck-color-base-error);
  53. color: var(--ck-color-base-background);
  54. padding: var(--ck-spacing-small) var(--ck-spacing-medium);
  55. min-width: var(--ck-table-properties-min-error-width);
  56. text-align: center;
  57. /* The arrow pointing towards the field. */
  58. &::after {
  59. border-color: transparent transparent var(--ck-color-base-error) transparent;
  60. border-width: 0 var(--ck-table-properties-error-arrow-size) var(--ck-table-properties-error-arrow-size) var(--ck-table-properties-error-arrow-size);
  61. border-style: solid;
  62. }
  63. animation: ck-table-form-labeled-view-status-appear .15s ease both;
  64. }
  65. /* Hide the error balloon when the field is blurred. Makes the experience much more clear. */
  66. & .ck-input.ck-error:not(:focus) + .ck.ck-labeled-view__status {
  67. display: none;
  68. }
  69. }
  70. }
  71. @keyframes ck-table-form-labeled-view-status-appear {
  72. 0% {
  73. opacity: 0;
  74. }
  75. 100% {
  76. opacity: 1;
  77. }
  78. }