tableform.css 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  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. .ck.ck-table-form {
  6. & .ck-form__row {
  7. &.ck-table-form__border-row {
  8. flex-wrap: wrap;
  9. & .ck-labeled-field-view {
  10. display: flex;
  11. flex-direction: column-reverse;
  12. & .ck.ck-dropdown {
  13. flex-grow: 0;
  14. }
  15. }
  16. & .ck-table-form__border-style {
  17. flex-grow: 0;
  18. }
  19. & .ck-table-form__border-width {
  20. flex-grow: 0;
  21. }
  22. }
  23. &.ck-table-form__background-row {
  24. flex-wrap: wrap;
  25. }
  26. &.ck-table-form__dimensions-row {
  27. flex-wrap: wrap;
  28. align-items: center;
  29. & .ck-labeled-field-view {
  30. display: flex;
  31. flex-direction: column-reverse;
  32. align-items: center;
  33. & .ck.ck-dropdown {
  34. flex-grow: 0;
  35. }
  36. }
  37. & .ck-table-form__dimension-operator {
  38. flex-grow: 0;
  39. }
  40. }
  41. }
  42. & .ck.ck-labeled-field-view {
  43. /* Allow absolute positioning of the status (error) balloons. */
  44. position: relative;
  45. & .ck.ck-labeled-field-view__status {
  46. position: absolute;
  47. left: 50%;
  48. bottom: calc( -1 * var(--ck-table-properties-error-arrow-size) );
  49. transform: translate(-50%,100%);
  50. /* Make sure the balloon status stays on top of other form elements. */
  51. z-index: 1;
  52. /* The arrow pointing towards the field. */
  53. &::after {
  54. content: "";
  55. position: absolute;
  56. top: calc( -1 * var(--ck-table-properties-error-arrow-size) );
  57. left: 50%;
  58. transform: translateX( -50% );
  59. }
  60. }
  61. }
  62. }