_sidebar.scss 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307
  1. @use "sass:string";
  2. @use "mixins";
  3. @use "variables";
  4. /*=== Tree */
  5. .tree {
  6. margin: 10px 0;
  7. &#sidebar {
  8. scrollbar-color: rgba(255,255, 0, 0.1) rgba(0, 0, 0, 0.05);
  9. scrollbar-color: string.unquote(variables.$sid-font-color + "33") string.unquote(variables.$sid-font-color + "22");
  10. }
  11. .tree-folder {
  12. border-bottom: 1px solid variables.$sid-sep;
  13. .tree-folder-title {
  14. padding: 12px 16px;
  15. background: variables.$sid-bg;
  16. position: relative;
  17. font-size: 0.85rem;
  18. letter-spacing: 1px;
  19. font-weight: 700;
  20. text-transform: uppercase;
  21. .title {
  22. background: inherit;
  23. color: variables.$sid-font-color;
  24. &:hover {
  25. text-decoration: none;
  26. }
  27. }
  28. }
  29. &.active {
  30. .tree-folder-title {
  31. background: variables.$sid-bg;
  32. font-weight: bold;
  33. }
  34. }
  35. .tree-folder-items {
  36. background: variables.$sid-bg-alt;
  37. .item {
  38. padding: 0 1rem;
  39. line-height: 2.5rem;
  40. font-size: 1rem;
  41. font-weight: 400;
  42. @include mixins.transition(all, 0.15s, ease-in-out);
  43. &.active {
  44. background: variables.$sid-active;
  45. .dropdown li a {
  46. color: variables.$main-font-color;
  47. &:hover {
  48. color: variables.$sid-font-color;
  49. }
  50. }
  51. a {
  52. color: variables.$sid-active-font;
  53. }
  54. }
  55. &:hover {
  56. background: variables.$sid-bg-dark;
  57. }
  58. a {
  59. text-decoration: none;
  60. color: variables.$sid-font-color;
  61. }
  62. }
  63. }
  64. }
  65. }
  66. /*=== Buttons */
  67. .stick {
  68. vertical-align: middle;
  69. font-size: 0;
  70. input, .btn {
  71. border-radius: 0;
  72. }
  73. .btn:first-child,
  74. input:first-child {
  75. border-radius: 5px 0 0 5px;
  76. }
  77. .btn:last-child, input:last-child, .btn + .dropdown > .btn {
  78. border-radius: 0 5px 5px 0;
  79. }
  80. .btn + .btn,
  81. .btn + input,
  82. .btn + .dropdown > .btn,
  83. input + .btn,
  84. input + input,
  85. input + .dropdown > .btn,
  86. .dropdown + .btn,
  87. .dropdown + input,
  88. .dropdown + .dropdown > .btn {
  89. border-left: 1px solid variables.$grey-medium-light;
  90. }
  91. }
  92. .aside {
  93. background: variables.$sid-bg;
  94. &.aside_feed {
  95. padding: 10px 0;
  96. text-align: center;
  97. background: variables.$sid-bg;
  98. }
  99. &.aside_feed .tree {
  100. margin: 10px 0 50px;
  101. }
  102. }
  103. /* Sidebar des pages de configuration */
  104. /*=== Navigation */
  105. .nav-list {
  106. .nav-header,
  107. .item {
  108. height: 2.5em;
  109. line-height: 2.5em;
  110. font-size: 1rem;
  111. }
  112. .item {
  113. background: variables.$sid-bg;
  114. color: variables.$white;
  115. a {
  116. padding: 0 1rem;
  117. color: variables.$sid-font-color;
  118. @include mixins.transition(all, 0.15s, ease-in-out);
  119. }
  120. .error {
  121. a {
  122. color: variables.$alert-bg;
  123. }
  124. }
  125. &:hover {
  126. .error {
  127. a {
  128. background: variables.$main-first;
  129. color: variables.$sid-font-color;
  130. }
  131. }
  132. .empty {
  133. a {
  134. background: variables.$warning-bg;
  135. color: variables.$sid-font-color;
  136. }
  137. }
  138. a {
  139. background: variables.$sid-bg-dark;
  140. text-decoration: none;
  141. }
  142. }
  143. &.active {
  144. background: variables.$main-first;
  145. color: variables.$white;
  146. .error {
  147. a {
  148. background: variables.$main-first;
  149. color: variables.$white;
  150. }
  151. }
  152. .empty {
  153. a {
  154. background: variables.$warning-bg;
  155. color: variables.$white;
  156. }
  157. }
  158. a {
  159. background: variables.$main-first;
  160. color: variables.$white;
  161. text-decoration: none;
  162. }
  163. }
  164. }
  165. &.empty {
  166. a {
  167. color: variables.$warning-bg;
  168. }
  169. }
  170. .disable {
  171. text-align: center;
  172. background: variables.$grey-lighter;
  173. color: variables.$grey-medium-dark;
  174. }
  175. .nav-header {
  176. padding: 0 10px;
  177. font-weight: bold;
  178. color: variables.$grey-dark;
  179. text-transform: uppercase;
  180. letter-spacing: 1px;
  181. margin-top: 1rem;
  182. }
  183. .nav-form {
  184. padding: 3px;
  185. text-align: center;
  186. }
  187. .nav-head {
  188. margin: 0;
  189. text-align: right;
  190. // background: #34495e;
  191. color: variables.$white;
  192. a {
  193. color: variables.$white;
  194. }
  195. .item {
  196. padding: 5px 10px;
  197. font-size: 0.9rem;
  198. line-height: 1.5rem;
  199. }
  200. }
  201. }
  202. /*=== Aside main page (categories) */
  203. .aside_feed .tree-folder-title > .title:not([data-unread="0"]) {
  204. width: calc(100% - 35px - 35px);
  205. }
  206. .aside.aside_feed .category .title:not([data-unread="0"])::after {
  207. margin: 1.5em 0 0 0;
  208. background-color: variables.$sid-pills;
  209. }
  210. .aside.aside_feed .feed .item-title:not([data-unread="0"])::after {
  211. margin: 0.5em 0 0 0;
  212. background-color: variables.$sid-pills;
  213. }
  214. .feed.item.empty.active {
  215. background: variables.$grey-dark;
  216. }
  217. .feed.item.error.active {
  218. background: variables.$grey-dark;
  219. }
  220. .feed.item.empty,
  221. .feed.item.empty > a {
  222. color: variables.$grey-dark;
  223. }
  224. .feed.item.error,
  225. .feed.item.error > a {
  226. color: variables.$grey-dark;
  227. }
  228. .feed.item.empty.active,
  229. .feed.item.error.active,
  230. .feed.item.empty.active > a,
  231. .feed.item.error.active > a {
  232. color: variables.$white;
  233. }
  234. .aside_feed .tree-folder-items .dropdown-menu::after {
  235. left: 2px;
  236. }
  237. .aside_feed .tree-folder-items .item .dropdown-target:target ~ .dropdown-toggle > .icon,
  238. .aside_feed .tree-folder-items .item:hover .dropdown-toggle > .icon,
  239. .aside_feed .tree-folder-items .item.active .dropdown-toggle > .icon {
  240. border-radius: 3px;
  241. }
  242. .aside_feed .stick #btn-add {
  243. border-left-color: variables.$sid-bg;
  244. }