dags.css 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
  1. /*!
  2. * Licensed to the Apache Software Foundation (ASF) under one
  3. * or more contributor license agreements. See the NOTICE file
  4. * distributed with this work for additional information
  5. * regarding copyright ownership. The ASF licenses this file
  6. * to you under the Apache License, Version 2.0 (the
  7. * "License"); you may not use this file except in compliance
  8. * with the License. You may obtain a copy of the License at
  9. *
  10. * http://www.apache.org/licenses/LICENSE-2.0
  11. *
  12. * Unless required by applicable law or agreed to in writing,
  13. * software distributed under the License is distributed on an
  14. * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  15. * KIND, either express or implied. See the License for the
  16. * specific language governing permissions and limitations
  17. * under the License.
  18. */
  19. .dags-table-wrap {
  20. margin-bottom: 16px;
  21. border-radius: 4px 4px 0 0;
  22. background-color: #f0f0f0;
  23. }
  24. .dags-table-header {
  25. display: flex;
  26. flex-wrap: wrap;
  27. justify-content: space-between;
  28. align-items: center;
  29. margin: 0;
  30. padding-top: 16px;
  31. }
  32. .dags-table-body {
  33. margin: 0 1px;
  34. overflow-x: auto;
  35. padding-bottom: 34px;
  36. }
  37. .no-x-padding {
  38. padding-left: 0;
  39. padding-right: 0;
  40. }
  41. .dags-table-more {
  42. position: relative;
  43. }
  44. .dags-table-more__toggle,
  45. .dags-table-more__toggle:hover,
  46. .dags-table-more__toggle:focus {
  47. display: block;
  48. padding: 8px 16px;
  49. cursor: default;
  50. border-color: transparent;
  51. background: transparent;
  52. }
  53. .dags-table-more__menu {
  54. position: absolute;
  55. top: 0;
  56. right: 0;
  57. bottom: 0;
  58. padding-right: 4px;
  59. white-space: nowrap;
  60. display: flex;
  61. align-items: center;
  62. overflow: hidden;
  63. }
  64. .dags-table-more__menu:hover {
  65. overflow: visible;
  66. }
  67. .dags-table-more__menu::before {
  68. width: 0;
  69. height: 100%;
  70. content: "";
  71. pointer-events: none;
  72. transition: width 0.3s ease-in;
  73. }
  74. .dags-table-more__menu:hover::before {
  75. margin-left: -200px;
  76. width: 200px;
  77. background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #fff 100%);
  78. }
  79. tr:nth-child(odd) .dags-table-more__menu:hover {
  80. background-color: #fff;
  81. }
  82. tr:nth-child(2n) .dags-table-more__menu:hover {
  83. background-color: #f9f9f9;
  84. }
  85. tr:nth-child(2n) .dags-table-more__menu:hover::before {
  86. background: linear-gradient(
  87. to right,
  88. rgba(255, 255, 255, 0) 0%,
  89. #f9f9f9 100%
  90. );
  91. }
  92. tr:nth-child(odd):hover .dags-table-more__menu:hover,
  93. tr:nth-child(2n):hover .dags-table-more__menu:hover {
  94. background-color: #f5f5f5;
  95. }
  96. tr:nth-child(odd):hover .dags-table-more__menu:hover::before,
  97. tr:nth-child(2n):hover .dags-table-more__menu:hover::before {
  98. background: linear-gradient(
  99. to right,
  100. rgba(255, 255, 255, 0) 0%,
  101. #f5f5f5 100%
  102. );
  103. }
  104. .dags-table-more__links {
  105. margin-right: 16px;
  106. width: 0;
  107. overflow: hidden;
  108. }
  109. .dags-table-more__menu:hover .dags-table-more__links {
  110. width: auto;
  111. overflow: visible;
  112. }
  113. .dags-table-more__link {
  114. display: inline-block;
  115. max-width: 0;
  116. overflow: hidden;
  117. margin-right: 16px;
  118. transition: max-width 0.3s ease-in;
  119. }
  120. .dags-table-more__link:last-child {
  121. margin-right: 0;
  122. }
  123. .dags-table-more__menu:hover .dags-table-more__link {
  124. max-width: 200px;
  125. }