pdf.js/web/xfa_layer_builder.css
calixteman b3528868c1
XFA - Add support for few ui elements (#13115)
- input;
  - layout;
  - border;
  - margin;
  - color.
2021-03-31 15:42:21 +02:00

176 lines
2.8 KiB
CSS

*/* Copyright 2021 Mozilla Foundation
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.xfaLayer {
position: absolute;
top: 0;
left: 0;
z-index: 200;
transform-origin: 0 0;
}
.xfaLayer * {
color: inherit;
font: inherit;
font-kerning: inherit;
letter-spacing: inherit;
text-align: inherit;
text-decoration: inherit;
vertical-align: inherit;
box-sizing: border-box;
}
.xfaFont {
color: black;
font-weight: normal;
font-kerning: none;
font-size: 10px;
font-style: normal;
letter-spacing: 0;
text-decoration: none;
vertical-align: 0;
}
.xfaDraw {
z-index: 200;
}
.xfaExclgroup {
z-index: 300;
}
.xfaField {
z-index: 300;
}
.xfaSubform {
z-index: 100;
}
.xfaLabel {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
height: 100%;
}
.xfaCaption {
flex: 1 1 auto;
}
.xfaTextfield,
.xfaSelect {
width: 100%;
height: 100%;
flex: 1 1 auto;
border: none;
}
.xfaLabel > input[type="checkbox"] {
/* Use this trick to make the checkbox invisible but
but still focusable. */
position: absolute;
left: -99999px;
}
.xfaLabel > input[type="checkbox"]:focus + .xfaCheckboxMark {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
}
.xfaCheckboxMark {
cursor: pointer;
flex: 0 0 auto;
border-style: solid;
border-width: 2px;
border-color: #8f8f9d;
font-size: 10px;
line-height: 10px;
width: 10px;
height: 10px;
text-align: center;
vertical-align: middle;
display: flex;
flex-direction: row;
align-items: center;
}
.xfaCheckbox:checked + .xfaCheckboxMark::after {
content: attr(mark);
}
.xfaButton {
cursor: pointer;
width: 100%;
height: 100%;
border: none;
text-align: center;
}
.xfaButton:hover {
background: Highlight;
}
.xfaLrTb,
.xfaRlTb,
.xfaTb,
.xfaPosition {
display: block;
}
.xfaPosition {
position: relative;
}
.xfaValignMiddle {
display: flex;
align-items: center;
}
.xfaLrTb > div {
display: inline;
float: left;
}
.xfaRlTb > div {
display: inline;
float: right;
}
.xfaTable {
display: flex;
flex-direction: column;
}
.xfaTable .xfaRow {
display: flex;
flex-direction: row;
flex: 1 1 auto;
}
.xfaTable .xfaRow > div {
flex: 1 1 auto;
}
.xfaTable .xfaRlRow {
display: flex;
flex-direction: row-reverse;
flex: 1;
}
.xfaTable .xfaRlRow > div {
flex: 1;
}