8
0

balloonpanel.scss 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
  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-width: 50px;
  10. min-height: 15px;
  11. background: ck-color( 'background' );
  12. border: 1px solid ck-border-color( 'foreground' );
  13. &:before,
  14. &:after {
  15. width: 0;
  16. height: 0;
  17. border-style: solid;
  18. }
  19. &_arrow_s,
  20. &_arrow_se,
  21. &_arrow_sw {
  22. &:before,
  23. &:after {
  24. border-width: 0 $ck-balloon-arrow-half-width $ck-balloon-arrow-height $ck-balloon-arrow-half-width;
  25. }
  26. &:before {
  27. border-color: transparent transparent ck-border-color( 'foreground' ) transparent;
  28. }
  29. &:after {
  30. border-color: transparent transparent ck-color( 'background' ) transparent;
  31. margin-top: $ck-balloon-arrow-offset;
  32. }
  33. }
  34. &_arrow_n,
  35. &_arrow_ne,
  36. &_arrow_nw {
  37. &:before,
  38. &:after {
  39. border-width: $ck-balloon-arrow-height $ck-balloon-arrow-half-width 0 $ck-balloon-arrow-half-width;
  40. }
  41. &:before {
  42. border-color: ck-border-color( 'foreground' ) transparent transparent;
  43. }
  44. &:after {
  45. border-color: ck-color( 'background' ) transparent transparent transparent;
  46. margin-bottom: $ck-balloon-arrow-offset;
  47. }
  48. }
  49. &_arrow_s {
  50. &:before,
  51. &:after {
  52. left: 50%;
  53. margin-left: -$ck-balloon-arrow-half-width;
  54. top: -$ck-balloon-arrow-height;
  55. }
  56. }
  57. &_arrow_se {
  58. &:before,
  59. &:after {
  60. left: 2 * $ck-balloon-arrow-half-width;
  61. top: -$ck-balloon-arrow-height;
  62. }
  63. }
  64. &_arrow_sw {
  65. &:before,
  66. &:after {
  67. right: 2 * $ck-balloon-arrow-half-width;
  68. top: -$ck-balloon-arrow-height;
  69. }
  70. }
  71. &_arrow_n {
  72. &:before,
  73. &:after {
  74. left: 50%;
  75. margin-left: -$ck-balloon-arrow-half-width;
  76. bottom: -$ck-balloon-arrow-height;
  77. }
  78. }
  79. &_arrow_ne {
  80. &:before,
  81. &:after {
  82. left: 2 * $ck-balloon-arrow-half-width;
  83. bottom: -$ck-balloon-arrow-height;
  84. }
  85. }
  86. &_arrow_nw {
  87. &:before,
  88. &:after {
  89. right: 2 * $ck-balloon-arrow-half-width;
  90. bottom: -$ck-balloon-arrow-height;
  91. }
  92. }
  93. }