theme-demo.css 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284
  1. /* THEME COLORs
  2. ========================================================================== */
  3. /* Looks good on chrome default color profile */
  4. /* looks good in sRGB but washed up on chrome default
  5. $color-primary: #826bb0;
  6. $color-success: #31cb55;
  7. $color-info: #5e93ec;
  8. $color-warning: #eec559;
  9. $color-danger: #dc4b92;
  10. $color-fusion: darken(desaturate(adjust-hue($color-primary, 5), 80%), 25%); */
  11. /* Color Polarity
  12. ========================================================================== */
  13. /* PAINTBUCKET MIXER
  14. ========================================================================== */
  15. /* the grays */
  16. /* the sapphires */
  17. /* the emeralds */
  18. /* the amethyths */
  19. /* the topaz */
  20. /* the rubies */
  21. /* the graphites */
  22. /* Define universal border difition (div outlines, etc)
  23. ========================================================================== */
  24. /* MOBILE BREAKPOINT & GUTTERS (contains some bootstrap responsive overrides)
  25. ========================================================================== */
  26. /* define when mobile menu activates, here we are declearing (lg) so it targets the one after it */
  27. /* bootstrap reference xs: 0, sm: 544px, md: 768px, lg: 992px, xl: 1200px*/
  28. /* global var used for spacing*/
  29. /* Uniform Padding variable */
  30. /* Heads up! This is a global scoped variable - changing may impact the whole template */
  31. /* BOOTSTRAP OVERRIDES (bootstrap variables)
  32. ========================================================================== */
  33. /* usage: theme-colors("primary"); */
  34. /* forms */
  35. /*$input-height: calc(2.25rem + 1px); //I had to add this because the input gruops was having improper height for some reason... */
  36. /* links */
  37. /* checkbox */
  38. /*$custom-file-height-inner: calc(2.25rem - 1px);*/
  39. /* not part of bootstrap variable */
  40. /* custom checkbox */
  41. /* custom range */
  42. /* select */
  43. /* badge */
  44. /* cards */
  45. /*border radius*/
  46. /* alert */
  47. /* toast */
  48. /* breadcrumb */
  49. /* input button */
  50. /* nav link */
  51. /* nav, tabs, pills */
  52. /* tables */
  53. /* dropdowns */
  54. /* dropdowns sizes */
  55. /* popovers */
  56. /* tooltips */
  57. /* modal */
  58. /* reference guide
  59. http://www.standardista.com/px-to-rem-conversion-if-root-font-size-is-16px/
  60. 8px = 0.5rem
  61. 9px = 0.5625rem
  62. 10px = 0.625rem
  63. 11px = 0.6875rem
  64. 12px = 0.75rem
  65. 13px = 0.8125rem
  66. 14px = 0.875rem
  67. 15px = 0.9375rem
  68. 16px = 1rem (base)
  69. 17px = 1.0625rem
  70. 18px = 1.125rem
  71. 19px = 1.1875rem
  72. 20px = 1.25rem
  73. 21px = 1.3125rem
  74. 22px = 1.375rem
  75. 24px = 1.5rem
  76. 25px = 1.5625rem
  77. 26px = 1.625rem
  78. 28px = 1.75rem
  79. 30px = 1.875rem
  80. 32px = 2rem
  81. 34px = 2.125rem
  82. 36px = 2.25rem
  83. 38px = 2.375rem
  84. 40px = 2.5rem
  85. */
  86. /* Fonts */
  87. /* carousel */
  88. /* BASE VARS
  89. ========================================================================== */
  90. /* font vars below will auto change to rem values using function rem($value)*/
  91. /* 11px */
  92. /* 12px */
  93. /* 12.5px */
  94. /* 14px */
  95. /* 15px */
  96. /* 16px */
  97. /* 28px */
  98. /* Font Family
  99. ========================================================================== */
  100. /*hint: you can also try the font called 'Poppins' by replacing the font 'Roboto' */
  101. /* ANIMATIONS
  102. ========================================================================== */
  103. /* this addresses all animation related to nav hide to nav minify */
  104. /* Z-INDEX declearation
  105. ========================================================================== */
  106. /* we adjust bootstrap z-index to be higher than our higest z-index*/
  107. /* CUSTOM ICON PREFIX
  108. ========================================================================== */
  109. /* PRINT CSS (landscape or portrait)
  110. ========================================================================== */
  111. /* landscape or portrait */
  112. /* auto, letter */
  113. /* Common Element Variables
  114. ========================================================================== */
  115. /* Z-index decleartion "birds eye view"
  116. ========================================================================== */
  117. /* Components
  118. ========================================================================== */
  119. /* PAGE HEADER STUFF
  120. ========================================================================== */
  121. /* colors */
  122. /* height */
  123. /* logo */
  124. /* try not to go beywond the width of $main_nav_width value */
  125. /* you may need to change this depending on your logo design */
  126. /* adjust this as you see fit : left, right, center */
  127. /* icon font size (not button) */
  128. /* search input box */
  129. /* suggestion: #ccced0*/
  130. /* btn */
  131. /* dropdown: app list */
  132. /* badge */
  133. /* COMPONENTS & MODS */
  134. /* NAVIGATION STUFF
  135. Guide:
  136. aside.page-sidebar ($nav-width, $nav-background)
  137. .page-logo
  138. .primary-nav
  139. .info-card
  140. ul.nav-menu
  141. li
  142. a (parent level-0..., $nav-link-color, $nav-link-hover-color, $nav-link-hover-bg-color, $nav-link-hover-left-border-color)
  143. icon
  144. span
  145. collapse-sign
  146. ul.nav-menu-sub-one
  147. li
  148. a ($nav-level-1... $nav-sub-link-height)
  149. span
  150. collapse-sign
  151. ul.nav-menu-sub-two
  152. li
  153. a ($nav-level-2... $nav-sub-link-height)
  154. span
  155. p.nav-title ($nav-title-*...)
  156. ========================================================================== */
  157. /* main navigation */
  158. /* left panel */
  159. /* nav parent level-0 */
  160. /* nav icon sizes */
  161. /* badge default */
  162. /* all child */
  163. /* nav title */
  164. /* nav Minify */
  165. /* when the menu pops on hover */
  166. /* navigation Width */
  167. /* partial visibility of the menu */
  168. /* top navigation */
  169. /* nav Info Card (appears below the logo) */
  170. /* width is auto */
  171. /* nav DL labels for all child */
  172. /* will be pulled to left as a negative value */
  173. /* MISC Settings
  174. ========================================================================== */
  175. /* List Table */
  176. /* PAGE SETTINGS
  177. ========================================================================== */
  178. /* PAGE BREADCRUMB
  179. ========================================================================== */
  180. /* PAGE COMPONENT PANELS
  181. ========================================================================== */
  182. /* PAGE COMPONENT PROGRESSBARS
  183. ========================================================================== */
  184. /* PAGE COMPONENT MESSENGER
  185. ========================================================================== */
  186. /* FOOTER
  187. ========================================================================== */
  188. /* GLOBALS
  189. ========================================================================== */
  190. /* ACCESSIBILITIES */
  191. /* SHORTCUT BUTTON (appears on bottom right of the page) */
  192. /* GULP WARNINGS */
  193. .app-body-demo {
  194. height: 350px;
  195. max-width: 550px;
  196. margin: 0 auto;
  197. background-color: #fff;
  198. border: 1px solid rgba(0, 0, 0, 0.125); }
  199. .app-body-demo .app-nav-demo:not(.app-nav-demo-minify) {
  200. width: 20%; }
  201. .app-body-demo .app-nav-demo-minify {
  202. width: 7%;
  203. padding: 3px; }
  204. .app-body-demo .app-nav-demo-minify .page-logo {
  205. width: auto; }
  206. .app-body-demo .app-nav-demo-hidden {
  207. width: 10px; }
  208. .app-body-demo .app-header-demo {
  209. height: 30px; }
  210. .app-body-demo .app-nav-demo-top {
  211. height: 26px; }
  212. .app-body-demo .app-header-btn-demo {
  213. width: 26px;
  214. height: 18px;
  215. border-radius: 2px;
  216. padding: 0 !important;
  217. font-size: 10px; }
  218. .app-body-demo .app-hematite-demo {
  219. background: #434a51; }
  220. .app-body-demo .app-amethyst-demo {
  221. background: #5c4581; }
  222. .app-body-demo .app-aquamarine-demo {
  223. background: #476f85; }
  224. .app-body-demo .app-sapphire-demo {
  225. background: #334768; }
  226. #app-eventlog {
  227. height: 260px;
  228. min-height: 260px;
  229. max-height: 300px;
  230. overflow: auto;
  231. display: block;
  232. /*> div:last-child {
  233. background:#f9f4b5;
  234. }
  235. > div:nth-last-child(2) {
  236. background:#fffde1;
  237. }*/ }
  238. #app-eventlog > div:not(:last-child) {
  239. border-bottom: 1px solid #eaeaea; }
  240. #app-eventlog:empty {
  241. background: #eee; }
  242. #app-eventlog:empty:before {
  243. content: "Event Logs";
  244. font-size: 28px;
  245. font-weight: 300;
  246. color: #c7c7c7;
  247. display: -webkit-box;
  248. display: -ms-flexbox;
  249. display: flex;
  250. -webkit-box-align: center;
  251. -ms-flex-align: center;
  252. align-items: center;
  253. -webkit-box-pack: center;
  254. -ms-flex-pack: center;
  255. justify-content: center;
  256. position: absolute;
  257. top: -20px;
  258. bottom: 0;
  259. left: 0;
  260. right: 0; }
  261. #app-eventlog .fs-base .badge {
  262. font-size: 90% !important;
  263. font-weight: 400 !important;
  264. background: #a9a9a9;
  265. text-align: left;
  266. min-width: 50px; }
  267. .prettyprint {
  268. overflow: auto;
  269. background: #f7f9fa;
  270. font-size: 100%;
  271. padding: 1rem 1rem !important;
  272. border: 0 !important; }
  273. /*# sourceMappingURL=theme-demo.css.map */