labeledfieldview.css 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
  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. .ck.ck-labeled-field-view {
  7. @mixin ck-rounded-corners;
  8. & > .ck.ck-labeled-field-view__input-wrapper {
  9. position: relative;
  10. width: 100%;
  11. & > .ck-dropdown > .ck.ck-button {
  12. background: transparent;
  13. }
  14. }
  15. &.ck-labeled-field-view_empty > .ck.ck-labeled-field-view__input-wrapper > .ck-dropdown > .ck-button > .ck-button__label {
  16. opacity: 0;
  17. }
  18. &.ck-error > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label {
  19. color: var(--ck-color-base-error);
  20. }
  21. & .ck-labeled-input__wrapper {
  22. position: relative;
  23. }
  24. & .ck.ck-input {
  25. width: 100%;
  26. }
  27. & .ck.ck-label {
  28. display: block;
  29. position: absolute;
  30. top: calc(-1 * var(--ck-spacing-standard) - 1px);
  31. left: var(--ck-spacing-medium);
  32. right: auto;
  33. pointer-events: none;
  34. background: var(--ck-color-base-background);
  35. font-size: var(--ck-font-size-small);
  36. padding: 0 calc(.75 * var(--ck-font-size-tiny));
  37. line-height: initial;
  38. font-weight: normal;
  39. transform: none;
  40. /* Prevent overflow when the label is longer than the input */
  41. text-overflow: ellipsis;
  42. overflow: hidden;
  43. max-width: 100%;
  44. transition:
  45. top .1s ease-in-out,
  46. transform .1s ease-in-out,
  47. padding .1s ease-in-out,
  48. background .1s ease-in-out,
  49. font-size .1s ease-in-out;
  50. }
  51. &.ck-labeled-input_focused {
  52. & .ck-input:not([readonly]) + .ck.ck-label {
  53. color: hsl(207.9,69.4%,44.9%);
  54. }
  55. }
  56. &.ck-error {
  57. & .ck-input:not([readonly]) + .ck.ck-label {
  58. color: var(--ck-color-base-error);
  59. }
  60. }
  61. & .ck-labeled-field-view__status {
  62. font-size: var(--ck-font-size-small);
  63. margin-top: var(--ck-spacing-small);
  64. /* Let the info wrap to the next line to avoid stretching the layout horizontally.
  65. The status could be very long. */
  66. white-space: normal;
  67. }
  68. & .ck-labeled-field-view__status_error {
  69. color: var(--ck-color-base-error);
  70. }
  71. &.ck-labeled-field-view_empty:not(.ck-labeled-field-view_focused):not(.ck-labeled-field-view_placeholder) > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label,
  72. &.ck-disabled > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label {
  73. background: transparent;
  74. font-size: var(--ck-font-size-normal);
  75. right: var(--ck-spacing-medium);
  76. top: 50%;
  77. padding: 0;
  78. transform: translateY(-50%);
  79. bottom: 0;
  80. }
  81. &.ck-disabled > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label,
  82. &.ck-labeled-field-view_empty:not(.ck-labeled-field-view_focused) > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label {
  83. color: var(--ck-color-input-disabled-text);
  84. }
  85. }