gerrit/polygerrit-ui/app/styles/gr-form-styles.html
Ben Rohlfs 285e40e1d9 Sanitize height, border and padding of gr-autocomplete
Remove --gr-autocomplete. Always put border, border-radius, padding
on gr-autocomplete, unless it is classified as "borderless".

Add a border-radius also to the gr-autocomplete-dropdown. Makes it
look nicer.

Adjust the vertical offset of where the dropdown is shown in
gr-autocomplete to 31px, which matches the default styles. Only needs
a different value in gr-account-entry, where no border and no padding
is used.

Drop height:2em from gr-autocomplete usages, which makes it fall back
to height being calculated from border, padding, line-height as usual.

Also drop height:2em from input,select,textarea form styles, and
align their padding to 4px as used everywhere else.

Align also the standard border-radius and padding of input with that
of gr-autocomplete.

Change-Id: If3e1434f206f50577b926b3f35b624636534926b
2019-11-21 13:17:42 +01:00

124 lines
3.4 KiB
HTML

<!--
@license
Copyright (C) 2016 The Android Open Source Project
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.
-->
<dom-module id="gr-form-styles">
<template>
<style>
.gr-form-styles input {
background-color: var(--view-background-color);
color: var(--primary-text-color);
}
.gr-form-styles select {
background-color: var(--select-background-color);
color: var(--primary-text-color);
}
.gr-form-styles h1,
.gr-form-styles h2 {
margin-bottom: var(--spacing-s);
}
.gr-form-styles h4 {
font-weight: var(--font-weight-bold);
}
.gr-form-styles fieldset {
border: none;
margin-bottom: var(--spacing-xxl);
}
.gr-form-styles section {
display: flex;
margin: var(--spacing-s) 0;
min-height: 2em;
}
.gr-form-styles section * {
vertical-align: middle;
}
.gr-form-styles .title,
.gr-form-styles .value {
display: inline-block;
}
.gr-form-styles .title {
color: var(--deemphasized-text-color);
font-weight: var(--font-weight-bold);
padding-right: var(--spacing-m);
width: 15em;
}
.gr-form-styles th {
color: var(--deemphasized-text-color);
text-align: left;
vertical-align: bottom;
}
.gr-form-styles td,
.gr-form-styles tfoot th {
padding: var(--spacing-s) 0;
vertical-align: middle;
}
.gr-form-styles .emptyHeader {
text-align: right;
}
.gr-form-styles table {
width: 50em;
}
.gr-form-styles th:first-child,
.gr-form-styles td:first-child {
width: 15em;
}
.gr-form-styles th:first-child input,
.gr-form-styles td:first-child input {
width: 14em;
}
.gr-form-styles input:not([type="checkbox"]),
.gr-form-styles select,
.gr-form-styles textarea {
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
padding: var(--spacing-s);
}
.gr-form-styles td:last-child {
width: 5em;
}
.gr-form-styles th:last-child gr-button,
.gr-form-styles td:last-child gr-button {
width: 100%;
}
.gr-form-styles iron-autogrow-textarea {
border: none;
height: auto;
min-height: 4em;
--iron-autogrow-textarea: {
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
box-sizing: border-box;
padding: var(--spacing-s);
}
}
.gr-form-styles gr-autocomplete {
width: 14em;
}
@media only screen and (max-width: 40em) {
.gr-form-styles section {
margin-bottom: var(--spacing-l);
}
.gr-form-styles .title,
.gr-form-styles .value {
display: block;
}
.gr-form-styles table {
width: 100%;
}
}
</style>
</template>
</dom-module>