_row.scss 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. .dashboard-row {
  2. display: flex;
  3. align-items: center;
  4. height: 100%;
  5. &--collapsed {
  6. background: $panel-bg;
  7. .dashboard-row__panel_count {
  8. display: inline-block;
  9. }
  10. .dashboard-row__drag {
  11. visibility: visible;
  12. opacity: 1;
  13. }
  14. .dashboard-row__actions {
  15. visibility: hidden;
  16. }
  17. .dashboard-row__toggle-target {
  18. flex: 1;
  19. cursor: pointer;
  20. margin-right: 15px;
  21. }
  22. }
  23. &:hover {
  24. .dashboard-row__actions {
  25. visibility: visible;
  26. opacity: 1;
  27. }
  28. }
  29. }
  30. .dashboard-row__title {
  31. flex-grow: 0;
  32. font-size: $font-size-h5;
  33. font-weight: $font-weight-semi-bold;
  34. color: $text-color;
  35. .fa {
  36. color: $text-muted;
  37. font-size: $font-size-xs;
  38. padding: 0 $space-sm;
  39. }
  40. }
  41. .dashboard-row__actions {
  42. color: $text-muted;
  43. visibility: hidden;
  44. opacity: 0;
  45. transition: 200ms opacity ease-in 200ms;
  46. a {
  47. color: $text-color-weak;
  48. padding-left: $spacer;
  49. &:hover {
  50. color: $link-hover-color;
  51. }
  52. }
  53. }
  54. .dashboard-row__panel_count {
  55. padding-left: $spacer;
  56. color: $text-color-weak;
  57. font-style: italic;
  58. font-size: $font-size-sm;
  59. font-weight: normal;
  60. display: none;
  61. }
  62. .dashboard-row__drag {
  63. cursor: move;
  64. width: 16px;
  65. height: 100%;
  66. background: url('../img/grab_dark.svg') no-repeat 50% 50%;
  67. background-size: 8px;
  68. visibility: hidden;
  69. position: absolute;
  70. top: 0;
  71. right: 0;
  72. }