bootstrap-markdown.less 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180
  1. /**
  2. * Bootstrap-Markdown.less
  3. *
  4. * @author Taufan Aditya @taufanaditya
  5. * @copyright 2013-2015 Taufan Aditya
  6. */
  7. .md-editor {
  8. display: block;
  9. border: 1px solid @table-border-color;
  10. > .md-header, .md-footer {
  11. display: block;
  12. padding: 6px 4px;
  13. background: @panel-default-heading-bg;
  14. }
  15. > .md-header {
  16. margin: 0;
  17. }
  18. > .md-preview {
  19. background: @panel-bg;
  20. border-top: 1px dashed @table-border-color;
  21. border-bottom: 1px dashed @table-border-color;
  22. min-height: 10px;
  23. overflow: auto;
  24. }
  25. > textarea {
  26. font-family: @font-family-monospace;
  27. font-size: @font-size-base;
  28. outline: 0;
  29. outline: thin dotted \9; /* IE6-9 */
  30. margin: 0;
  31. display: block;
  32. padding: 0;
  33. width: 100%;
  34. border: 0;
  35. border-top: 1px dashed @table-border-color;
  36. border-bottom: 1px dashed @table-border-color;
  37. border-radius: 0;
  38. box-shadow: none;
  39. background: @input-bg-disabled;
  40. &:focus {
  41. box-shadow: none;
  42. background: @input-bg;
  43. }
  44. }
  45. // Hover state
  46. @color: @input-border-focus;
  47. @color-rgba: rgba(red(@color), green(@color), blue(@color), .6);
  48. &.active {
  49. border-color: @color;
  50. outline: 0;
  51. .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}");
  52. }
  53. .md-controls {
  54. float: right;
  55. padding: 3px;
  56. .md-control {
  57. right: 5px;
  58. color: #bebebe;
  59. padding: 3px 3px 3px 10px;
  60. &:hover {
  61. color: #333;
  62. }
  63. }
  64. }
  65. // fullscreen mode styles
  66. &.md-fullscreen-mode {
  67. width: 100%;
  68. height: 100%;
  69. position: fixed;
  70. top: 0;
  71. left: 0;
  72. z-index: 99999;
  73. padding: 60px 30px 15px;
  74. background: #fff !important;
  75. border: 0 !important;
  76. .md-footer {
  77. display: none;
  78. }
  79. .md-input,
  80. .md-preview {
  81. margin: 0 auto !important;
  82. height: 100% !important;
  83. font-size: 20px !important;
  84. padding: 20px !important;
  85. color: #999;
  86. line-height: 1.6em !important;
  87. resize: none !important;
  88. box-shadow: none !important;
  89. background: #fff !important;
  90. border: 0 !important;
  91. }
  92. .md-preview {
  93. color: #333;
  94. overflow: auto;
  95. }
  96. .md-input {
  97. &:hover,
  98. &:focus {
  99. color: #333;
  100. background: #fff !important;
  101. }
  102. }
  103. .md-header {
  104. background: none;
  105. text-align: center;
  106. position: fixed;
  107. width: 100%;
  108. top: 20px;
  109. }
  110. .btn-group {
  111. float: none;
  112. }
  113. .btn {
  114. border: 0;
  115. background: none;
  116. color: #b3b3b3;
  117. &:hover,
  118. &:focus,
  119. &.active,
  120. &:active {
  121. box-shadow: none;
  122. color: #333;
  123. }
  124. }
  125. .md-fullscreen-controls {
  126. position: absolute;
  127. top: 20px;
  128. right: 20px;
  129. text-align: right;
  130. z-index: 1002;
  131. display: block;
  132. a {
  133. color: #b3b3b3;
  134. clear: right;
  135. margin: 10px;
  136. width: 30px;
  137. height: 30px;
  138. text-align: center;
  139. &:hover {
  140. color: #333;
  141. text-decoration: none;
  142. }
  143. }
  144. }
  145. .md-editor {
  146. height: 100% !important;
  147. position: relative;
  148. }
  149. }
  150. .md-fullscreen-controls {
  151. display: none;
  152. }
  153. }
  154. .md-nooverflow {
  155. overflow: hidden;
  156. position: fixed;
  157. width: 100%;
  158. }