You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

315 lines
5.3 KiB

  1. .dashboard-wrapper {
  2. background: #282c37;
  3. border-radius: 4px;
  4. margin: 20px auto;
  5. width: 940px;
  6. display: flex;
  7. overflow: hidden;
  8. .dashboard__sidebar {
  9. width: 240px;
  10. border-radius: 4px 0 0 4px;
  11. flex-shrink: 0;
  12. .dashboard__top-bar {
  13. border-radius: 4px 0 0 0;
  14. }
  15. ul {
  16. padding: 20px 0;
  17. a {
  18. display: block;
  19. padding: 7px 20px;
  20. color: #d9e1e8;
  21. text-decoration: none;
  22. font-size: 14px;
  23. font-weight: 400;
  24. .fa {
  25. display: inline-block;
  26. width: 18px;
  27. text-align: center;
  28. margin-right: 5px;
  29. }
  30. &:hover {
  31. color: #fff;
  32. background: darken(#282c37, 1%);
  33. }
  34. }
  35. .active {
  36. a {
  37. background: darken(#282c37, 5%);
  38. border-left: 2px solid #2b90d9;
  39. padding-left: 18px;
  40. }
  41. }
  42. }
  43. }
  44. .dashboard__current-user {
  45. padding: 20px;
  46. a {
  47. text-decoration: none;
  48. color: inherit;
  49. }
  50. .dashboard__current-user__avatar {
  51. display: block;
  52. width: 50px;
  53. height: 50px;
  54. border-radius: 50px;
  55. float: left;
  56. margin-right: 15px;
  57. }
  58. .dashboard__current-user__display-name {
  59. font-weight: 500;
  60. font-size: 13px;
  61. color: #d9e1e8;
  62. display: block;
  63. margin-top: 5px;
  64. }
  65. .dashboard__current-user__username {
  66. font-size: 12px;
  67. display: block;
  68. color: #2b90d9;
  69. }
  70. }
  71. .dashboard__logo {
  72. color: #2b90d9;
  73. span {
  74. font-weight: 500;
  75. }
  76. }
  77. .dashboard__top-bar {
  78. background: #fff;
  79. padding: 20px;
  80. box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  81. color: #282c37;
  82. font-size: 16px;
  83. overflow: hidden;
  84. &.alternate {
  85. background: lighten(#282c37, 10%);
  86. text-align: center;
  87. }
  88. ul {
  89. float: right;
  90. list-style: none;
  91. display: block;
  92. li {
  93. display: inline-block;
  94. margin-left: 7px;
  95. }
  96. }
  97. a {
  98. color: #9baec8;
  99. text-decoration: none;
  100. }
  101. }
  102. .dashboard__content {
  103. flex: 1;
  104. background: #d9e1e8;
  105. border-radius: 0 4px 4px 0;
  106. .dashboard__content__content {
  107. padding: 20px;
  108. color: #282c37;
  109. line-height: 18px;
  110. h3 {
  111. font-size: 14px;
  112. font-weight: 500;
  113. margin-bottom: 15px;
  114. }
  115. p {
  116. margin-bottom: 15px;
  117. }
  118. samp {
  119. font-family: 'Roboto Mono', monospace;
  120. }
  121. ul {
  122. list-style: circle;
  123. padding-left: 15px;
  124. margin-bottom: 15px;
  125. }
  126. .table {
  127. width: 100%;
  128. th {
  129. font-weight: 500;
  130. text-align: left;
  131. border-bottom: 1px solid lighten(#282c37, 55%);
  132. }
  133. th, td {
  134. padding: 5px 0;
  135. line-height: 18px;
  136. }
  137. }
  138. a {
  139. color: #2b90d9;
  140. text-decoration: underline;
  141. &:hover {
  142. text-decoration: none;
  143. }
  144. }
  145. .btn {
  146. display: inline-block;
  147. border: 0;
  148. background: #2b90d9;
  149. border-radius: 16px;
  150. padding: 6px 16px;
  151. font-size: 12px;
  152. font-weight: 500;
  153. color: #fff;
  154. cursor: pointer;
  155. font-family: 'Roboto', sans-serif;
  156. text-decoration: none;
  157. &:hover {
  158. background: lighten(#2b90d9, 5%);
  159. }
  160. &.btn-iconized {
  161. font-size: 16px;
  162. font-weight: 400;
  163. width: 24px;
  164. text-align: center;
  165. padding: 10px 7px;
  166. border-radius: 100px;
  167. box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  168. }
  169. }
  170. }
  171. .dashboard__top-bar {
  172. border-radius: 0 4px 0 0;
  173. }
  174. }
  175. }
  176. .simple_form {
  177. .form-actions {
  178. padding-top: 20px;
  179. text-align: center;
  180. }
  181. .input {
  182. margin-bottom: 15px;
  183. label {
  184. display: block;
  185. text-transform: uppercase;
  186. font-size: 11px;
  187. font-weight: 500;
  188. margin-bottom: 10px;
  189. }
  190. input[type=text], input[type=email], input[type=password], textarea {
  191. display: block;
  192. box-sizing: border-box;
  193. width: 100%;
  194. border: 0;
  195. background: transparent;
  196. border-bottom: 1px solid lighten(#282c37, 55%);
  197. padding: 5px 0;
  198. outline: 0;
  199. padding-bottom: 6px;
  200. font-size: 14px;
  201. font-family: 'Roboto', sans-serif;
  202. &:focus {
  203. border-bottom: 2px solid #2b90d9;
  204. padding-bottom: 5px;
  205. }
  206. }
  207. input[type=file] {
  208. display: block;
  209. }
  210. }
  211. }
  212. .panel {
  213. box-sizing: border-box;
  214. padding: 10px 15px;
  215. background: lighten(#d9e1e8, 5%);
  216. margin-bottom: 20px;
  217. border-radius: 4px;
  218. .panel-heading {
  219. font-size: 13px;
  220. text-transform: uppercase;
  221. color: lighten(#282c37, 25%);
  222. margin-bottom: 10px;
  223. }
  224. &.panel-full {
  225. width: 100%;
  226. }
  227. .panel-row {
  228. display: flex;
  229. dt {
  230. color: #282c37;
  231. width: 100px;
  232. }
  233. dd {
  234. flex: 1;
  235. color: lighten(#282c37, 25%);
  236. }
  237. &.panel-row-wider {
  238. dt {
  239. width: auto;
  240. flex: 1;
  241. }
  242. }
  243. }
  244. }
  245. .row {
  246. overflow: hidden;
  247. clear: both;
  248. .panel {
  249. float: left;
  250. width: 320px;
  251. margin-right: 20px;
  252. &:last-child {
  253. margin-right: 0;
  254. }
  255. }
  256. }
  257. .page-actions {
  258. margin-top: 20px;
  259. text-align: right;
  260. .btn {
  261. margin-left: 5px;
  262. }
  263. }