8
0

linkform.css 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
  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 "@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css";
  6. @import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
  7. .ck.ck-link-form {
  8. padding: var(--ck-spacing-standard);
  9. &:focus {
  10. /* https://github.com/ckeditor/ckeditor5-link/issues/90 */
  11. outline: none;
  12. }
  13. @mixin ck-dir ltr {
  14. & > :not(:first-child) {
  15. margin-left: var(--ck-spacing-standard);
  16. }
  17. }
  18. @mixin ck-dir rtl {
  19. & > :not(:last-child) {
  20. margin-left: var(--ck-spacing-standard);
  21. }
  22. }
  23. @mixin ck-media-phone {
  24. padding: 0;
  25. width: calc(.8 * var(--ck-input-text-width));
  26. & .ck-labeled-field-view {
  27. margin: var(--ck-spacing-standard) var(--ck-spacing-standard) 0;
  28. & .ck-input-text {
  29. min-width: 0;
  30. width: 100%;
  31. }
  32. }
  33. & .ck-button {
  34. padding: var(--ck-spacing-standard);
  35. margin-top: var(--ck-spacing-standard);
  36. border-radius: 0;
  37. border: 0;
  38. border-top: 1px solid var(--ck-color-base-border);
  39. @mixin ck-dir ltr {
  40. margin-left: 0;
  41. &:first-of-type {
  42. border-right: 1px solid var(--ck-color-base-border);
  43. }
  44. }
  45. @mixin ck-dir rtl {
  46. margin-left: 0;
  47. &:last-of-type {
  48. border-right: 1px solid var(--ck-color-base-border);
  49. }
  50. }
  51. }
  52. }
  53. }
  54. /*
  55. * Style link form differently when manual decorators are available.
  56. * See: https://github.com/ckeditor/ckeditor5-link/issues/186.
  57. */
  58. .ck.ck-link-form_layout-vertical {
  59. padding: 0;
  60. min-width: var(--ck-input-text-width);
  61. & .ck-labeled-field-view {
  62. margin: var(--ck-spacing-standard) var(--ck-spacing-standard) var(--ck-spacing-small);
  63. & .ck-input-text {
  64. min-width: 0;
  65. width: 100%;
  66. }
  67. }
  68. & .ck-button {
  69. padding: var(--ck-spacing-standard);
  70. margin: 0;
  71. border-radius: 0;
  72. border: 0;
  73. border-top: 1px solid var(--ck-color-base-border);
  74. width: 50%;
  75. @mixin ck-dir ltr {
  76. margin-left: 0;
  77. &:first-of-type {
  78. border-right: 1px solid var(--ck-color-base-border);
  79. }
  80. }
  81. @mixin ck-dir rtl {
  82. margin-left: 0;
  83. &:last-of-type {
  84. border-right: 1px solid var(--ck-color-base-border);
  85. }
  86. }
  87. }
  88. /* Using additional `.ck` class for stronger CSS specificity than `.ck.ck-link-form > :not(:first-child)`. */
  89. & .ck.ck-list {
  90. margin-left: 0;
  91. & .ck-button.ck-switchbutton {
  92. border: 0;
  93. width: 100%;
  94. &:hover {
  95. background: none;
  96. }
  97. }
  98. }
  99. }