_sidebar.scss 4.8 KB

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