theme.scss 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201
  1. /*!
  2. * bootstrap-fileinput v4.5.2
  3. * http://plugins.krajee.com/file-input
  4. *
  5. * Krajee Explorer Font Awesome theme style for bootstrap-fileinput. Load this theme file after loading `fileinput.css`.
  6. *
  7. * Author: Kartik Visweswaran
  8. * Copyright: 2014 - 2018, Kartik Visweswaran, Krajee.com
  9. *
  10. * Licensed under the BSD 3-Clause
  11. * https://github.com/kartik-v/bootstrap-fileinput/blob/master/LICENSE.md
  12. */
  13. //colors
  14. $boston-blue: #428bca !default;
  15. $alto: #ddd !default;
  16. $tapa: #777 !default;
  17. $mystic: #e1edf7 !default;
  18. $perano: #a1abff !default;
  19. //fonts
  20. $font-0: Menlo !default;
  21. $font-1: Monaco !default;
  22. $font-2: Consolas !default;
  23. $font-3: "Courier New" !default;
  24. $font-4: monospace !default;
  25. //standard measures
  26. $pad: 5px !default;
  27. $border: 1px !default;
  28. $tablet: 767px !default;
  29. //operations
  30. @function multiply($pixels, $multiplier) {
  31. @return $pixels * $multiplier;
  32. }
  33. //@extend-elements
  34. %set_text_center {
  35. text-align: center;
  36. }
  37. %set_progress {
  38. height: multiply($pad, 2.6);
  39. font-size: multiply($pad, 2.2);
  40. line-height: multiply($pad, 2.6);
  41. }
  42. %set_indicator {
  43. position: absolute;
  44. display: inline-block;
  45. top: 0;
  46. right: multiply($pad, 0.6);
  47. width: multiply($pad, 3.2);
  48. height: multiply($pad, 3.2);
  49. font-size: multiply($pad, 3.2);
  50. @extend %set_text_center;
  51. }
  52. %set_block {
  53. display: block;
  54. }
  55. .theme-explorer-fa {
  56. .explorer-frame {
  57. td {
  58. vertical-align: middle;
  59. text-align: left;
  60. }
  61. .kv-file-content {
  62. width: multiply($pad, 16);
  63. height: multiply($pad, 16);
  64. padding: $pad;
  65. @extend %set_text_center;
  66. }
  67. }
  68. .file-actions-cell {
  69. position: relative;
  70. width: multiply($pad, 24);
  71. padding: 0;
  72. }
  73. .file-thumb-progress {
  74. .progress {
  75. @extend %set_block;
  76. @extend %set_progress;
  77. margin-top: $pad;
  78. }
  79. .progress-bar {
  80. @extend %set_progress;
  81. }
  82. }
  83. .file-upload-indicator {
  84. @extend %set_indicator;
  85. }
  86. .file-drag-handle {
  87. @extend %set_indicator;
  88. }
  89. .explorer-caption {
  90. @extend %set_block;
  91. color: $tapa;
  92. }
  93. .file-actions {
  94. @extend %set_text_center;
  95. }
  96. .kvsortable-ghost {
  97. opacity: 0.6;
  98. background: $mystic;
  99. border: multiply($border, 2) solid $perano;
  100. }
  101. .file-preview .table {
  102. margin: 0;
  103. }
  104. .file-error-message ul {
  105. padding: $pad 0 0 multiply($pad, 4);
  106. }
  107. }
  108. .explorer-frame {
  109. .file-preview-text {
  110. display: inline-block;
  111. color: $boston-blue;
  112. border: $border solid $alto;
  113. font-family: $font-0, $font-1, $font-2, $font-3, $font-4;
  114. outline: none;
  115. padding: multiply($pad, 1.6);
  116. resize: none;
  117. }
  118. .file-preview-html {
  119. display: inline-block;
  120. border: $border solid $alto;
  121. padding: multiply($pad, 1.6);
  122. overflow: auto;
  123. }
  124. .file-preview-other {
  125. @extend %set_text_center;
  126. }
  127. .file-other-icon {
  128. font-size: 2.6em;
  129. }
  130. }
  131. @media only screen and(max-width: $tablet) {
  132. //@extend-elements
  133. %set_block_full {
  134. display: block;
  135. width: 100% !important;
  136. }
  137. .theme-explorer-fa {
  138. .table {
  139. @extend %set_block_full;
  140. border: none;
  141. tbody {
  142. @extend %set_block_full;
  143. }
  144. tr {
  145. @extend %set_block_full;
  146. margin-top: $pad;
  147. &:first-child {
  148. margin-top: 0;
  149. }
  150. }
  151. td {
  152. @extend %set_block_full;
  153. text-align: center;
  154. }
  155. .kv-file-content {
  156. border-bottom: none;
  157. padding: multiply($pad, 0.8);
  158. margin: 0;
  159. .file-preview-image {
  160. max-width: 100%;
  161. font-size: multiply($pad, 4);
  162. }
  163. }
  164. }
  165. .file-details-cell {
  166. border-top: none;
  167. border-bottom: none;
  168. padding-top: 0;
  169. margin: 0;
  170. }
  171. .file-actions-cell {
  172. border-top: none;
  173. padding-bottom: multiply($pad, 0.8);
  174. }
  175. .explorer-frame .explorer-caption {
  176. white-space: nowrap;
  177. text-overflow: ellipsis;
  178. overflow: hidden;
  179. left: 0;
  180. right: 0;
  181. margin: auto;
  182. }
  183. }
  184. }
  185. .file-zoom-dialog .explorer-frame .file-other-icon {
  186. //noinspection CssOverwrittenProperties
  187. font-size: 22em;
  188. //noinspection CssOverwrittenProperties
  189. font-size: 50vmin;
  190. }