1// TODO: replace cert table with table component
2.certificate__table {
3  border-left: 1px solid $border-color-01;
4  border-right: 1px solid $border-color-01;
5  .table__row-header {
6    width: 100%;
7    border-bottom: 1px solid $border-color-01;
8    background-color: $primary-dark;
9    color: $primary-light;
10    font-weight: 700;
11  }
12  .table__row-value {
13    width: 100%;
14    border-bottom: 1px solid $border-color-01;
15  }
16  .certificate__type-header {
17    @include mediaQuery(small) {
18      width: 18%;
19      background: transparent;
20    }
21    width: 100%;
22    padding: 0.8em;
23    padding-left: 1.5em;
24  }
25  .certificate__issue-header {
26    display: none;
27    padding: 0.8em;
28    @include mediaQuery(small) {
29      width: 18%;
30      display: block;
31    }
32  }
33  .certificate__date-header {
34    padding: 0.8em;
35    @include mediaQuery(small) {
36      width: 11%;
37      display: block;
38    }
39    display: none;
40  }
41  .certificate__status-header {
42    padding: 0.8em;
43    @include mediaQuery(small) {
44      width: 5%;
45      display: block;
46    }
47    display: none;
48  }
49  .certificate__actions-header {
50    padding: 0.8em;
51    @include mediaQuery(small) {
52      width: auto;
53      padding-left: 30px;
54      display: block;
55    }
56    display: none;
57  }
58  .certificate__type-cell {
59    width: 100%;
60    padding: 0.8em 0.8em 0.8em 1.5em;
61    word-wrap: break-word;
62    background: $background-02;
63    @include mediaQuery(small) {
64      width: 18%;
65      background: transparent;
66    }
67  }
68  .certificate__issue-cell {
69    padding: 0.8em;
70    word-wrap: break-word;
71    @include mediaQuery(small) {
72      width: 18%;
73    }
74    width: 70%;
75  }
76  .certificate__date-cell {
77    width: 70%;
78    padding: 0.8em;
79    word-wrap: break-word;
80    @include mediaQuery(small) {
81      width: 11%;
82    }
83  }
84  .certificate__status-cell {
85    padding: 0.8em;
86    @include mediaQuery(small) {
87      display: block;
88      width: 5%;
89    }
90    display: none;
91  }
92  .certificate__status-icon {
93    width: 1.2em;
94    svg {
95      margin-bottom: .2em;
96    }
97  }
98  .certificate__buttons-cell {
99    @include mediaQuery(small) {
100      padding: 0.2em 0 0 2em;
101      .btn {
102        padding-left: 40px;
103        padding-right: 5px;
104      }
105    }
106    display:  block;
107    text-align: right;
108    padding: 0.3em 0.8em 0.8em 1.0em;
109    .btn {
110      padding-left: 5px;
111      padding-right: 5px;
112    }
113  }
114  .certificate__title-inline {
115    @include mediaQuery(small) {
116      display: none;
117    }
118    width: 30%;
119    display: block;
120    padding: 0.8em 0.8em 0.8em 1.5em;
121  }
122  .upload__certificate {
123    width: 100%;
124    background: $background-02;
125    padding: 0.8em 1.8em 0.8em 0.8em;
126    height: 4rem;
127    display: flex;
128  }
129  .replace-btn {
130    margin-left: auto;
131  }
132}
133
134.cert-dropdown{
135  margin-bottom: 0;
136}
137
138// TODO: Update CSR modal with global form-field styles
139.add-csr__section:first-of-type {
140  padding-left: 0;
141}
142
143.add-csr__section:last-of-type {
144  margin-top: 2rem;
145  padding-right: 0;
146
147  @media (min-width: 640px) {
148    margin-top: 0;
149  }
150}
151
152.add-csr__section--border {
153  @media (min-width: 640px) {
154    padding-left: 2rem;
155    border-left: 1px solid $base-02--04;
156  }
157}
158
159.add-csr__text-helper {
160  color: $base-02--02;
161  font-weight: 400;
162  font-size: 14px;
163  line-height: 1.2;
164  margin-bottom: .5em;
165}
166
167input.add-csr__input,
168select.add-csr__select {
169  width: 100%;
170  margin-bottom: 0;
171  max-height: none;
172  height: auto;
173}
174
175.select.add-csr__select  {
176  line-height: 1.15;
177}
178
179input.add-csr__input-no-validation {
180  margin-bottom: 1.7rem;
181}
182
183.add-csr__additional-alt-names {
184  display: flex;
185}
186
187.add-csr__alt-name-add-btn {
188  padding: 0;
189  @media (min-width: 640px) {
190    margin: 1.9rem 0;
191  }
192}
193
194.add-csr__alt-name-delete-btn {
195  height: 34px;
196  padding: 0 0 0 1rem;
197  icon {
198    margin-right: 0;
199  }
200}
201
202.add-csr-code__header {
203  margin-top: 1em;
204}
205
206.add-csr__container-csr-code {
207  white-space: pre-wrap;
208}
209
210.add-csr__text-download {
211  color: $base-02--08;
212}
213
214select.add-csr__multiselect {
215  height: 14rem;
216}
217