bootstrap-markdown.less 3.5 KB

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