balloonpanel.scss 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. // Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
  2. // For licensing, see LICENSE.md or http://ckeditor.com/license
  3. $ck-balloon-arrow-offset: 2px;
  4. $ck-balloon-arrow-height: 15px;
  5. $ck-balloon-arrow-half-width: 10px;
  6. .ck-balloon-panel {
  7. @include ck-rounded-corners();
  8. @include ck-drop-shadow();
  9. min-height: 15px;
  10. background: ck-color( 'panel-background' );
  11. border: 1px solid ck-color( 'panel-border' );
  12. &.ck-balloon-panel_with-arrow {
  13. &:before,
  14. &:after {
  15. width: 0;
  16. height: 0;
  17. border-style: solid;
  18. }
  19. }
  20. &.ck-balloon-panel_arrow {
  21. &_n,
  22. &_ne,
  23. &_nw {
  24. &:before,
  25. &:after {
  26. border-width: 0 $ck-balloon-arrow-half-width $ck-balloon-arrow-height $ck-balloon-arrow-half-width;
  27. }
  28. &:before {
  29. border-color: transparent transparent ck-color( 'panel-border' ) transparent;
  30. }
  31. &:after {
  32. border-color: transparent transparent ck-color( 'panel-background' ) transparent;
  33. margin-top: $ck-balloon-arrow-offset;
  34. }
  35. }
  36. &_s,
  37. &_se,
  38. &_sw {
  39. &:before,
  40. &:after {
  41. border-width: $ck-balloon-arrow-height $ck-balloon-arrow-half-width 0 $ck-balloon-arrow-half-width;
  42. }
  43. &:before {
  44. border-color: ck-color( 'panel-border' ) transparent transparent;
  45. }
  46. &:after {
  47. border-color: ck-color( 'panel-background' ) transparent transparent transparent;
  48. margin-bottom: $ck-balloon-arrow-offset;
  49. }
  50. }
  51. &_n {
  52. &:before,
  53. &:after {
  54. left: 50%;
  55. margin-left: -$ck-balloon-arrow-half-width;
  56. top: -$ck-balloon-arrow-height;
  57. }
  58. }
  59. &_nw {
  60. &:before,
  61. &:after {
  62. left: 2 * $ck-balloon-arrow-half-width;
  63. top: -$ck-balloon-arrow-height;
  64. }
  65. }
  66. &_ne {
  67. &:before,
  68. &:after {
  69. right: 2 * $ck-balloon-arrow-half-width;
  70. top: -$ck-balloon-arrow-height;
  71. }
  72. }
  73. &_s {
  74. &:before,
  75. &:after {
  76. left: 50%;
  77. margin-left: -$ck-balloon-arrow-half-width;
  78. bottom: -$ck-balloon-arrow-height;
  79. }
  80. }
  81. &_sw {
  82. &:before,
  83. &:after {
  84. left: 2 * $ck-balloon-arrow-half-width;
  85. bottom: -$ck-balloon-arrow-height;
  86. }
  87. }
  88. &_se {
  89. &:before,
  90. &:after {
  91. right: 2 * $ck-balloon-arrow-half-width;
  92. bottom: -$ck-balloon-arrow-height;
  93. }
  94. }
  95. }
  96. }