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.

130 lines
2.2 KiB

  1. .dashboard-wrapper {
  2. background: #282c37;
  3. border-radius: 4px;
  4. margin: 20px auto;
  5. width: 940px;
  6. display: flex;
  7. .dashboard__sidebar {
  8. width: 240px;
  9. border-radius: 4px 0 0 4px;
  10. .dashboard__top-bar {
  11. border-radius: 4px 0 0 0;
  12. }
  13. ul {
  14. padding: 20px 0;
  15. a {
  16. display: block;
  17. padding: 7px 20px;
  18. color: #d9e1e8;
  19. text-decoration: none;
  20. font-size: 14px;
  21. font-weight: 400;
  22. .fa {
  23. display: inline-block;
  24. width: 18px;
  25. text-align: center;
  26. margin-right: 5px;
  27. }
  28. }
  29. .active {
  30. a {
  31. background: darken(#282c37, 5%);
  32. border-left: 2px solid #2b90d9;
  33. padding-left: 18px;
  34. }
  35. }
  36. }
  37. }
  38. .dashboard__current-user {
  39. padding: 20px;
  40. a {
  41. text-decoration: none;
  42. color: inherit;
  43. }
  44. .dashboard__current-user__avatar {
  45. display: block;
  46. width: 50px;
  47. height: 50px;
  48. border-radius: 50px;
  49. float: left;
  50. margin-right: 15px;
  51. }
  52. .dashboard__current-user__display-name {
  53. font-weight: 500;
  54. font-size: 13px;
  55. color: #d9e1e8;
  56. display: block;
  57. margin-top: 5px;
  58. }
  59. .dashboard__current-user__username {
  60. font-size: 12px;
  61. display: block;
  62. color: #2b90d9;
  63. }
  64. }
  65. .dashboard__logo {
  66. color: #2b90d9;
  67. span {
  68. font-weight: 500;
  69. }
  70. }
  71. .dashboard__top-bar {
  72. background: #fff;
  73. padding: 20px;
  74. box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  75. border-bottom: 1px solid #d9e1e8;
  76. color: #282c37;
  77. font-size: 16px;
  78. overflow: hidden;
  79. &.alternate {
  80. background: lighten(#282c37, 10%);
  81. border-bottom: 1px solid lighten(#282c37, 10%);
  82. text-align: center;
  83. }
  84. ul {
  85. float: right;
  86. list-style: none;
  87. display: block;
  88. li {
  89. display: inline-block;
  90. }
  91. }
  92. a {
  93. color: #9baec8;
  94. text-decoration: none;
  95. }
  96. }
  97. .dashboard__content {
  98. flex: 1;
  99. background: #d9e1e8;
  100. border-radius: 0 4px 4px 0;
  101. .dashboard__content__content {
  102. //padding: 20px;
  103. }
  104. .dashboard__top-bar {
  105. border-radius: 0 4px 0 0;
  106. }
  107. }
  108. }