xref: /openbmc/phosphor-webui/app/common/styles/components/table.scss (revision 8af8d24f272510f942f8a413e8ba3a7139dc9ec5)
1 
2 // Table Header
3 .table-header {
4   width: 100%;
5   color: $black;
6   line-height: 30px;
7   padding: .8em 0 0;
8   margin-bottom: .8em;
9   border-bottom: 1px solid $medgrey;
10   font-size: 1.25em;
11   @include mediaQuery(medium) {
12     margin: 1.8em 0;
13   }
14 }
15 
16 // Table
17 .table {
18   width: 100%;
19 }
20 
21 .table__row {
22   display: flex;
23   width: 100%;
24   max-width: calc(100vw - 10px);
25   flex-wrap: wrap;
26   font-weight: 400;
27   position: relative;
28   &.disabled {
29     background-color: $disabled-row;
30     color: $disabled-row-txt;
31   }
32 }
33 
34 .table__row-save {
35   position: absolute;
36   top: 0;
37   left: 0;
38   width: 100%;
39   height:100%;
40   background: $darkbg__primary;
41   z-index:200;
42   color: $white;
43   padding: .8em 1em;
44   text-align: center;
45   font-size: 1.5em;
46   font-weight: bold;
47 }
48 
49 .table__cell {
50   flex: 0 0 100%;
51   line-height: 2.8em;
52   padding: .5em 1em;
53   white-space: nowrap;
54   overflow: hidden;
55   text-overflow: ellipsis;
56   border-bottom: 1px solid $medgrey;
57   @include mediaQuery(small) {
58     flex: 1;
59   }
60   //
61   //@include mediaQuery(large) {
62   //  padding: 15px 30px;
63   //}
64 }
65 
66 .table__cell-label {
67   display: inline-block;
68   font-weight: 700;
69   min-width: 50%;
70   padding-right: 15px;
71 
72   @include mediaQuery(small) {
73     display: none;
74   }
75 }
76 
77 // Table Head
78 .table__head {
79   .table__row {
80     display: none;
81     font-weight: 700;
82     border-bottom: 1px solid $medgrey;
83     background-color: $darkbg__primary;
84     color: $white;
85 
86     @include mediaQuery(small) {
87       display: flex;
88     }
89 
90     .table__cell {
91       @include fastTransition-all();
92       position: relative;
93       border: 0;
94       &:last-child {
95         border: 0;
96       }
97     }
98   }
99 }
100 
101 .table__row-uploading {
102   color: $darkgrey;
103   font-weight: 700;
104   @include indeterminate-bar;
105 }
106 
107 .sort-heading {
108 
109 }
110