Ver Fonte

deal with semitransparent list view headers

Adam Shaw há 5 anos atrás
pai
commit
ee26fb56ba
2 ficheiros alterados com 22 adições e 4 exclusões
  1. 4 2
      packages/list/src/ListViewHeaderRow.tsx
  2. 18 2
      packages/list/src/main.scss

+ 4 - 2
packages/list/src/ListViewHeaderRow.tsx

@@ -53,8 +53,10 @@ export default class ListViewHeaderRow extends BaseComponent<ListViewHeaderRowPr
             className={classNames.concat(customClassNames).join(' ')}
             className={classNames.concat(customClassNames).join(' ')}
             data-date={formatDayString(dayDate)}
             data-date={formatDayString(dayDate)}
           >
           >
-            <th colSpan={3} className={theme.getClass('tableCellShaded')} ref={innerElRef}>
-              {innerContent}
+            <th colSpan={3}>
+              <div className={'fc-list-day-frame ' + theme.getClass('tableCellShaded')} ref={innerElRef}>
+                {innerContent}
+              </div>
             </th>
             </th>
           </tr>
           </tr>
         )}
         )}

+ 18 - 2
packages/list/src/main.scss

@@ -1,5 +1,6 @@
 
 
 @import '../../core/src/styles/vars';
 @import '../../core/src/styles/vars';
+@import '../../core/src/styles/mixins';
 
 
 
 
 // the view wrapper
 // the view wrapper
@@ -22,7 +23,6 @@
   border-style: hidden !important; // kill outer border on theme. OVERCOME BOOTSTRAP
   border-style: hidden !important; // kill outer border on theme. OVERCOME BOOTSTRAP
 
 
   tr > * {
   tr > * {
-    padding: 8px 14px;
     border-left: 0 !important; // OVERCOME BOOTSTRAP
     border-left: 0 !important; // OVERCOME BOOTSTRAP
     border-right: 0 !important; // OVERCOME BOOTSTRAP
     border-right: 0 !important; // OVERCOME BOOTSTRAP
     border-top: 0 !important; // OVERCOME BOOTSTRAP
     border-top: 0 !important; // OVERCOME BOOTSTRAP
@@ -42,10 +42,26 @@
 }
 }
 
 
 
 
+.fc-list-table th {
+  background: #fff; // for when headers are styled to be transparent and sticky. TODO: var
+  padding: 0; // uses an inner-wrapper instead...
+}
+.fc-list-table td,
+.fc-list-day-frame {
+  padding: 8px 14px;
+}
+
+
 // date heading rows
 // date heading rows
 // ----------------------------------------------------------------------------------------------------
 // ----------------------------------------------------------------------------------------------------
 
 
-.fc-theme-standard .fc-list-day th {
+.fc-list-day-frame {
+  &:after {
+    @include clearfix; // clear floating
+  }
+}
+
+.fc-theme-standard .fc-list-day-frame {
   background: $fc-theme-standard-muted-bg-color;
   background: $fc-theme-standard-muted-bg-color;
   background: var(--fc-theme-standard-muted-bg-color, $fc-theme-standard-muted-bg-color);
   background: var(--fc-theme-standard-muted-bg-color, $fc-theme-standard-muted-bg-color);
 }
 }