demo.css 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324
  1. body {
  2. opacity: 1;
  3. -webkit-transition: opacity 1s ease;
  4. -moz-transition: opacity 1s ease;
  5. transition: opacity 1s;
  6. }
  7. .ng-cloak {
  8. opacity: 0;
  9. }
  10. .ng-invalid {
  11. border: 1px solid red !important;
  12. }
  13. section {
  14. padding-top: 30px;
  15. }
  16. .page-header h1 > small > a {
  17. color: #999;
  18. }
  19. .page-header h1 > small > a:hover {
  20. text-decoration: none;
  21. }
  22. .footer {
  23. text-align: center;
  24. padding: 30px 0;
  25. margin-top: 70px;
  26. border-top: 1px solid #e5e5e5;
  27. background-color: #f5f5f5;
  28. }
  29. .bs-social {
  30. margin-top: 20px;
  31. margin-bottom: 20px;
  32. text-align: center;
  33. }
  34. @media (min-width: 768px) {
  35. .bs-social {
  36. text-align: left;
  37. }
  38. }
  39. .nav, .pagination, .carousel, .panel-title a {
  40. cursor: pointer;
  41. }
  42. .bs-social-buttons {
  43. display: inline-block;
  44. margin-bottom: 0;
  45. padding-left: 0;
  46. list-style: none;
  47. }
  48. .bs-social-buttons li {
  49. display: inline-block;
  50. padding: 5px 8px;
  51. line-height: 1;
  52. }
  53. @media (max-width: 767px) {
  54. .visible-xs.collapse.in {
  55. display: block!important;
  56. }
  57. .visible-xs.collapse {
  58. display: none!important;
  59. }
  60. }
  61. .navbar .collapse {
  62. border-top: 1px solid #e7e7e7;
  63. margin-left: -15px;
  64. margin-right: -15px;
  65. padding-right: 15px;
  66. padding-left: 15px;
  67. }
  68. .show-grid {
  69. margin-bottom: 15px;
  70. }
  71. /*
  72. * Container
  73. *
  74. * Tweak to width of container.
  75. */
  76. /*@media (min-width: 1200px) {
  77. .container{
  78. max-width: 970px;
  79. }
  80. }*/
  81. /*
  82. * Tabs
  83. *
  84. * Tweaks to the Tabs.
  85. */
  86. .code .nav-tabs {
  87. border-bottom: 1px solid #ccc;
  88. }
  89. .code pre, .code code {
  90. border-top: none;
  91. border-top-left-radius: 0;
  92. border-top-right-radius: 0;
  93. }
  94. .code .nav-tabs>li.active>a, .code .nav-tabs>li.active>a:hover, .code .nav-tabs>li.active>a:focus {
  95. background-color: #f8f8f8;
  96. border: 1px solid #ccc;
  97. border-bottom-color: transparent;
  98. }
  99. /*
  100. * Button Inverse
  101. *
  102. * Buttons in the masthead.
  103. */
  104. .btn-outline-inverse {
  105. color: #fff;
  106. background-color: transparent;
  107. border-color: #cdbfe3;
  108. margin: 10px;
  109. }
  110. @media (min-width: 768px) {
  111. .btn-outline-inverse {
  112. width: auto;
  113. margin: 20px 5px 20px 0;
  114. padding: 18px 24px;
  115. font-size: 21px;
  116. }
  117. }
  118. .btn-outline-inverse:hover, .btn-outline-inverse:focus, .btn-outline-inverse:active {
  119. color: #563d7c;
  120. text-shadow: none;
  121. background-color: #fff;
  122. border-color: #fff;
  123. }
  124. /* Page headers */
  125. .bs-header {
  126. padding: 30px 15px 40px; /* side padding builds on .container 15px, so 30px */
  127. font-size: 16px;
  128. text-align: center;
  129. text-shadow: 0 1px 0 rgba(0,0,0,.15);
  130. color: #cdbfe3;
  131. background-color: #563d7c;
  132. background-image: url(header.png);
  133. }
  134. .bs-header a {
  135. color: #fff;
  136. font-weight: normal;
  137. }
  138. .bs-header h1 {
  139. color: #fff;
  140. }
  141. .bs-header p {
  142. font-weight: 200;
  143. line-height: 1.4;
  144. }
  145. .bs-header .container {
  146. position: relative;
  147. }
  148. @media (min-width: 768px) {
  149. .bs-header {
  150. font-size: 30px;
  151. text-align: left;
  152. }
  153. .bs-header h1 {
  154. font-size: 100px;
  155. line-height: 1;
  156. }
  157. }
  158. @media (min-width: 992px) {
  159. .bs-header p {
  160. margin-right: 25%;
  161. }
  162. }
  163. .navbar-inner {
  164. -webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.175);
  165. box-shadow: 0 3px 3px rgba(0,0,0,0.175);
  166. }
  167. /*
  168. * Side navigation
  169. *
  170. * Scrollspy and affixed enhanced navigation to highlight sections and secondary
  171. * sections of docs content.
  172. */
  173. /* By default it's not affixed in mobile views, so undo that */
  174. .bs-sidebar.affix {
  175. position: static;
  176. }
  177. /* First level of nav */
  178. .bs-sidenav {
  179. margin-top: 30px;
  180. margin-bottom: 30px;
  181. padding-top: 10px;
  182. padding-bottom: 10px;
  183. text-shadow: 0 1px 0 #fff;
  184. background-color: #f7f5fa;
  185. border-radius: 5px;
  186. }
  187. /* All levels of nav */
  188. .bs-sidebar .nav > li > a {
  189. display: block;
  190. color: #716b7a;
  191. padding: 5px 20px;
  192. }
  193. .bs-sidebar .nav > li > a:hover,
  194. .bs-sidebar .nav > li > a:focus {
  195. text-decoration: none;
  196. background-color: #e5e3e9;
  197. border-right: 1px solid #dbd8e0;
  198. }
  199. .bs-sidebar .nav > .active > a,
  200. .bs-sidebar .nav > .active:hover > a,
  201. .bs-sidebar .nav > .active:focus > a {
  202. font-weight: bold;
  203. color: #563d7c;
  204. background-color: transparent;
  205. border-right: 1px solid #563d7c;
  206. }
  207. /* Nav: second level (shown on .active) */
  208. .bs-sidebar .nav .nav {
  209. display: none; /* Hide by default, but at >768px, show it */
  210. margin-bottom: 8px;
  211. }
  212. .bs-sidebar .nav .nav > li > a {
  213. padding-top: 3px;
  214. padding-bottom: 3px;
  215. padding-left: 30px;
  216. font-size: 90%;
  217. }
  218. /* Show and affix the side nav when space allows it */
  219. @media (min-width: 992px) {
  220. .bs-sidebar .nav > .active > ul {
  221. display: block;
  222. }
  223. /* Widen the fixed sidebar */
  224. .bs-sidebar.affix,
  225. .bs-sidebar.affix-bottom {
  226. width: 213px;
  227. }
  228. .bs-sidebar.affix {
  229. position: fixed; /* Undo the static from mobile first approach */
  230. top: 80px;
  231. }
  232. .bs-sidebar.affix-bottom {
  233. position: absolute; /* Undo the static from mobile first approach */
  234. }
  235. .bs-sidebar.affix-bottom .bs-sidenav,
  236. .bs-sidebar.affix .bs-sidenav {
  237. margin-top: 0;
  238. margin-bottom: 0;
  239. }
  240. }
  241. @media (min-width: 1200px) {
  242. /* Widen the fixed sidebar again */
  243. .bs-sidebar.affix-bottom,
  244. .bs-sidebar.affix {
  245. width: 263px;
  246. }
  247. }
  248. /* Not enough room on mobile for markup tab, js tab, and plunk btn.
  249. And no one cares about plunk button on a phone anyway */
  250. @media only screen and (max-device-width: 480px) {
  251. #plunk-btn {
  252. display: none;
  253. }
  254. }
  255. .navbar-nav .dropdown .navbar-brand {
  256. max-width: 100%;
  257. margin-right: inherit;
  258. margin-left: inherit;
  259. }
  260. .header-placeholder {
  261. height: 50px;
  262. }
  263. @media screen and (min-width: 768px) {
  264. .dropdown.open > .navbar-brand + .dropdown-menu {
  265. left: 10px;
  266. }
  267. .header-placeholder {
  268. height: 50px;
  269. }
  270. .navbar-nav .dropdown .navbar-brand {
  271. max-width: 200px;
  272. margin-right: 5px;
  273. margin-left: 10px;
  274. }
  275. }