Replace all css spacing by variables in theme files

Change-Id: Ie776237eb8d402e8de10525aaaed45748cc4bc7f
This commit is contained in:
Ben Rohlfs 2019-10-20 19:26:48 +02:00
parent 28cc2b609a
commit 501f9d98de
96 changed files with 366 additions and 354 deletions

View File

@ -34,7 +34,7 @@ limitations under the License.
<style include="shared-styles">
:host {
display: block;
margin-bottom: 1em;
margin-bottom: var(--spacing-l);
}
fieldset {
border: 1px solid var(--border-color);
@ -51,13 +51,13 @@ limitations under the License.
display: flex;
justify-content: space-between;
min-height: 3em;
padding: 0 .7em;
padding: 0 var(--spacing-m);
}
#deletedContainer {
border-bottom: 0;
}
.sectionContent {
padding: .7em;
padding: var(--spacing-m);
}
#editBtn,
.editing #editBtn.global,
@ -83,7 +83,7 @@ limitations under the License.
}
.editing #deleteBtn,
#undoRemoveBtn {
padding-right: .7em;
padding-right: var(--spacing-m);
}
</style>
<style include="gr-form-styles"></style>

View File

@ -56,7 +56,7 @@ limitations under the License.
padding: 5px 4px;
}
iron-icon {
margin: 0 .2em;
margin: 0 var(--spacing-xs);
}
.breadcrumb {
align-items: center;
@ -74,7 +74,7 @@ limitations under the License.
display: inline-block;
}
main.breadcrumbs:not(.table) {
margin-top: 1em;
margin-top: var(--spacing-l);
}
</style>
<gr-page-nav class="navStyles">

View File

@ -43,7 +43,7 @@ limitations under the License.
}
gr-autocomplete {
--gr-autocomplete: {
padding: 0 .15em;
padding: 0 var(--spacing-xs);
}
}
.hide {

View File

@ -44,7 +44,7 @@ limitations under the License.
border-radius: 2px;
font-size: var(--font-size-normal);
height: 2em;
padding: 0 .15em;
padding: 0 var(--spacing-xs);
width: 20em;
}
}

View File

@ -35,7 +35,7 @@ limitations under the License.
content: ' *';
}
.inputUpdateBtn {
margin-top: .3em;
margin-top: var(--spacing-s);
}
</style>
<style include="gr-form-styles"></style>

View File

@ -32,13 +32,13 @@ limitations under the License.
<style include="shared-styles">
:host {
display: block;
margin-bottom: .7em;
margin-bottom: var(--spacing-m);
}
.header {
align-items: baseline;
display: flex;
justify-content: space-between;
margin: .3em .7em;
margin: var(--spacing-s) var(--spacing-m);
}
.rules {
background: var(--table-header-background-color);
@ -49,7 +49,7 @@ limitations under the License.
border-bottom: 1px solid var(--border-color);
}
.title {
margin-bottom: .3em;
margin-bottom: var(--spacing-s);
}
#addRule,
#removeBtn {
@ -61,11 +61,11 @@ limitations under the License.
}
.editing #removeBtn {
display: block;
margin-left: 1.5em;
margin-left: var(--spacing-xl);
}
.editing #addRule {
display: block;
padding: .7em;
padding: var(--spacing-m);
}
#deletedContainer,
.deleted #mainContainer {
@ -76,7 +76,7 @@ limitations under the License.
border: 1px solid var(--border-color);
display: flex;
justify-content: space-between;
padding: .7em;
padding: var(--spacing-m);
}
#mainContainer {
display: block;

View File

@ -37,18 +37,18 @@ limitations under the License.
}
gr-button {
float: right;
margin-left: .5em;
margin-left: var(--spacing-m);
width: 4.5em;
}
.row {
align-items: center;
display: flex;
justify-content: space-between;
padding: .5em 0;
padding: var(--spacing-m) 0;
width: 100%;
}
.existingItems .row {
padding: .5em;
padding: var(--spacing-m);
}
.existingItems .row:not(:first-of-type) {
border-top: 1px solid var(--border-color);
@ -61,7 +61,7 @@ limitations under the License.
}
.placeholder {
color: var(--deemphasized-text-color);
padding-top: .75em;
padding-top: var(--spacing-m);
}
</style>
<div class="wrapper gr-form-styles">

View File

@ -49,20 +49,20 @@ limitations under the License.
align-items: center;
}
.weblink {
margin-right: .2em;
margin-right: var(--spacing-xs);
}
.weblinks.show,
.referenceContainer {
display: block;
}
.rightsText {
margin-right: .3rem;
margin-right: var(--spacing-s);
}
.editing gr-button,
.admin #editBtn {
display: inline-block;
margin: 1em 0;
margin: var(--spacing-l) 0;
}
.editing #editInheritFromInput {
display: inline-block;

View File

@ -23,7 +23,7 @@ limitations under the License.
<style include="shared-styles">
:host {
display: block;
margin-bottom: 2em;
margin-bottom: var(--spacing-xxl);
}
</style>
<h3>[[title]]</h3>

View File

@ -25,7 +25,7 @@ limitations under the License.
<style include="shared-styles">
:host {
display: block;
margin-bottom: 2em;
margin-bottom: var(--spacing-xxl);
}
.loading #dashboards,
#loadingContainer {

View File

@ -65,10 +65,10 @@ limitations under the License.
display: none;
}
.revisionEdit gr-button {
margin-left: .6em;
margin-left: var(--spacing-m);
}
.editBtn {
margin-left: 1em;
margin-left: var(--spacing-l);
}
.canEdit .revisionEdit{
align-items: center;

View File

@ -35,14 +35,14 @@ limitations under the License.
<style include="gr-subpage-styles">
.inherited {
color: var(--deemphasized-text-color);
margin-left: .5em;
margin-left: var(--spacing-m);
}
section.section:not(.ARRAY) .title {
align-items: center;
display: flex;
}
section.section.ARRAY .title {
padding-top: .75em;
padding-top: var(--spacing-m);
}
</style>
<div class="gr-form-styles">

View File

@ -31,7 +31,7 @@ limitations under the License.
<style include="shared-styles">
:host {
border-bottom: 1px solid var(--border-color);
padding: .7em;
padding: var(--spacing-m);
display: block;
}
#removeBtn {
@ -45,7 +45,7 @@ limitations under the License.
display: flex;
}
#options > * {
margin-right: .5em;
margin-right: var(--spacing-m);
}
#mainContainer {
align-items: baseline;

View File

@ -76,7 +76,7 @@ limitations under the License.
display: inline-flex;
}
.status .comma {
padding-right: .2rem;
padding-right: var(--spacing-xs);
}
/* Used to hide the leading separator comma for statuses. */
.status .comma:first-of-type {
@ -85,7 +85,7 @@ limitations under the License.
.size gr-tooltip-content {
margin: -.4rem -.6rem;
max-width: 2.5rem;
padding: .4rem .6rem;
padding: var(--spacing-m) var(--spacing-l);
}
a {
color: inherit;

View File

@ -36,7 +36,7 @@ limitations under the License.
}
.loading {
color: var(--deemphasized-text-color);
padding: 1em var(--default-horizontal-margin);
padding: var(--spacing-l);
}
gr-change-list {
width: 100%;
@ -68,7 +68,7 @@ limitations under the License.
@media only screen and (max-width: 50em) {
.loading,
.error {
padding: 0 var(--default-horizontal-margin);
padding: 0 var(--spacing-l);
}
}
</style>

View File

@ -30,7 +30,7 @@ limitations under the License.
#graphic,
#help {
display: inline-block;
margin: .5em;
margin: var(--spacing-m);
}
#graphic #circle {
align-items: center;
@ -51,14 +51,14 @@ limitations under the License.
text-align: center;
}
#help {
padding-top: 1.35em;
padding-top: var(--spacing-xl);
vertical-align: top;
}
#help h1 {
font-size: var(--font-size-large);
}
#help p {
margin-bottom: .6em;
margin-bottom: var(--spacing-m);
max-width: 35em;
}
@media only screen and (max-width: 50em) {

View File

@ -25,10 +25,10 @@ limitations under the License.
<style include="shared-styles">
ol {
list-style: decimal;
margin-left: 1em;
margin-left: var(--spacing-l);
}
p {
margin-bottom: .75em;
margin-bottom: var(--spacing-m);
}
#commandsDialog {
max-width: 40em;

View File

@ -39,7 +39,7 @@ limitations under the License.
}
.loading {
color: var(--deemphasized-text-color);
padding: 1em var(--default-horizontal-margin);
padding: var(--spacing-l);
}
gr-change-list {
width: 100%;
@ -53,7 +53,7 @@ limitations under the License.
border-bottom: 1px solid var(--border-color);
display: flex;
justify-content: space-between;
padding: .25em var(--default-horizontal-margin);
padding: var(--spacing-xs) var(--spacing-l);
}
.banner gr-button {
--gr-button: {
@ -68,7 +68,7 @@ limitations under the License.
}
@media only screen and (max-width: 50em) {
.loading {
padding: 0 var(--default-horizontal-margin);
padding: 0 var(--spacing-l);
}
}
</style>

View File

@ -63,13 +63,13 @@ limitations under the License.
color: var(--deemphasized-text-color);
}
#confirmSubmitDialog .changeSubject {
margin: 1em;
margin: var(--spacing-l);
text-align: center;
}
iron-icon {
color: inherit;
height: 1.2rem;
margin-right: .2rem;
margin-right: var(--spacing-xs);
width: 1.2rem;
}
gr-button {
@ -93,7 +93,7 @@ limitations under the License.
}
gr-button {
--gr-button: {
padding: .5em;
padding: var(--spacing-m);
white-space: nowrap;
}
}
@ -102,7 +102,7 @@ limitations under the License.
margin: 0;
}
#actionLoadingMessage {
margin: .5em;
margin: var(--spacing-m);
text-align: center;
}
#moreMessage {

View File

@ -79,14 +79,14 @@ limitations under the License.
pointer-events: none;
}
.hashtagChip {
margin-bottom: .5em;
margin-bottom: var(--spacing-m);
}
#externalStyle {
display: block;
}
.parentList.merge {
list-style-type: decimal;
padding-left: 1em;
padding-left: var(--spacing-l);
}
.parentList gr-commit-info {
display: inline-block;
@ -96,7 +96,7 @@ limitations under the License.
display: none;
}
.icon {
margin: -.25em 0;
margin: -3px 0;
}
.icon.help,
.icon.notTrusted {
@ -114,8 +114,8 @@ limitations under the License.
}
.separatedSection {
border-top: 1px solid var(--border-color);
margin-top: .5em;
padding: .5em 0;
margin-top: var(--spacing-m);
padding: var(--spacing-m) 0;
}
.hashtag gr-linked-chip,
.topic gr-linked-chip {

View File

@ -57,11 +57,11 @@ limitations under the License.
}
.title {
min-width: 10em;
padding: .75em .5em 0 var(--requirements-horizontal-padding);
padding: var(--spacing-m) var(--spacing-m) 0 var(--requirements-horizontal-padding);
vertical-align: top;
}
.value {
padding: .6em .5em 0 0;
padding: var(--spacing-m) var(--spacing-m) 0 0;
vertical-align: middle;
}
.title,
@ -76,8 +76,8 @@ limitations under the License.
}
.showHide .title {
border-top: 1px solid var(--border-color);
padding-bottom: .5em;
padding-top: .5em;
padding-bottom: var(--spacing-m);
padding-top: var(--spacing-m);
}
.showHide .value {
border-top: 1px solid var(--border-color);

View File

@ -63,25 +63,25 @@ limitations under the License.
}
.container.loading {
color: var(--deemphasized-text-color);
padding: 1em var(--default-horizontal-margin);
padding: var(--spacing-l);
}
.header {
align-items: center;
background-color: var(--table-header-background-color);
border-bottom: 1px solid var(--border-color);
display: flex;
padding: .55em var(--default-horizontal-margin);
padding: var(--spacing-m) var(--spacing-l);
z-index: 99; /* Less than gr-overlay's backdrop */
}
.header.editMode {
background-color: var(--edit-mode-background-color);
}
.header .download {
margin-right: 1em;
margin-right: var(--spacing-l);
}
gr-change-status {
display: initial;
margin: .1em .1em .1em .4em;
margin: var(--spacing-xxs) var(--spacing-xxs) var(--spacing-xxs) var(--spacing-s);
}
gr-change-status:first-child {
margin-left: 0;
@ -96,11 +96,11 @@ limitations under the License.
font-weight: var(--font-weight-bold);
}
#replyBtn {
margin-bottom: 1em;
margin-bottom: var(--spacing-l);
}
gr-change-star {
font-size: var(--font-size-normal);
margin-right: .25em;
margin-right: var(--spacing-xs);
}
gr-reply-dialog {
width: 60em;
@ -116,7 +116,7 @@ limitations under the License.
.changeId {
color: var(--deemphasized-text-color);
font-family: var(--font-family);
margin-top: 1em;
margin-top: var(--spacing-l);
}
.changeMetadata {
border-right: 1px solid var(--border-color);
@ -125,8 +125,8 @@ limitations under the License.
}
.commitMessage {
font-family: var(--monospace-font-family);
margin-right: 1em;
margin-bottom: 1em;
margin-right: var(--spacing-l);
margin-bottom: var(--spacing-l);
max-width: var(--commit-message-max-width, 72ch);;
}
.commitMessage gr-linked-text {
@ -136,7 +136,7 @@ limitations under the License.
min-width: 72ch;
}
.editCommitMessage {
margin-top: 1em;
margin-top: var(--spacing-l);
--gr-button: {
padding: 5px 0px;
@ -166,7 +166,7 @@ limitations under the License.
.relatedChanges {
flex: 1 1 auto;
overflow: hidden;
padding: 1em 0;
padding: var(--spacing-l) 0;
}
.mobile {
display: none;
@ -178,7 +178,7 @@ limitations under the License.
border: 0;
border-top: 1px solid var(--border-color);
height: 0;
margin-bottom: 1em;
margin-bottom: var(--spacing-l);
}
#commitMessage.collapsed {
max-height: 36em;
@ -187,7 +187,7 @@ limitations under the License.
#relatedChanges {
}
#relatedChanges.collapsed {
margin-bottom: 1.1em;
margin-bottom: var(--spacing-l);
max-height: var(--relation-chain-max-height, 2em);
overflow: hidden;
}
@ -195,8 +195,8 @@ limitations under the License.
display: flex;
flex-direction: column;
flex-shrink: 0;
margin: 1em 0;
padding: 0 1em;
margin: var(--spacing-l) 0;
padding: 0 var(--spacing-l);
}
.collapseToggleContainer {
display: flex;
@ -212,7 +212,7 @@ limitations under the License.
display: block;
}
#relatedChangesToggle {
margin-left: 1em;
margin-left: var(--spacing-l);
padding-top: var(--related-change-btn-top-padding, 0);
}
.showOnEdit {
@ -255,8 +255,8 @@ limitations under the License.
}
}
#metadata {
--metadata-horizontal-padding: 1em;
padding-top: 1em;
--metadata-horizontal-padding: var(--spacing-l);
padding-top: var(--spacing-l);
width: 100%;
}
/* NOTE: If you update this breakpoint, also update the
@ -267,7 +267,7 @@ limitations under the License.
}
#relatedChanges {
border-top: 1px solid var(--border-color);
padding-top: 1em;
padding-top: var(--spacing-l);
}
#commitAndRelated {
flex-direction: column;
@ -293,7 +293,7 @@ limitations under the License.
align-items: flex-start;
flex-direction: column;
flex: 1;
padding: .5em var(--default-horizontal-margin);
padding: var(--spacing-m) var(--spacing-l);
}
gr-change-star {
vertical-align: middle;
@ -322,7 +322,7 @@ limitations under the License.
}
.commitContainer {
margin: 0;
padding: 1em;
padding: var(--spacing-l);
}
.relatedChanges,
.changeMetadata {
@ -331,7 +331,7 @@ limitations under the License.
.changeMetadata {
border-bottom: 1px solid var(--border-color);
border-right: none;
margin-top: .25em;
margin-top: var(--spacing-xs);
max-width: none;
}
#metadata,
@ -340,7 +340,7 @@ limitations under the License.
}
.commitActions {
display: block;
margin-top: 1em;
margin-top: var(--spacing-l);
width: 100%;
}
.commitMessage {

View File

@ -43,10 +43,10 @@ limitations under the License.
}
.container {
display: flex;
margin: .5em 0;
margin: var(--spacing-m) 0;
}
.lineNum {
margin-right: .5em;
margin-right: var(--spacing-m);
min-width: 10em;
text-align: right;
}
@ -57,7 +57,7 @@ limitations under the License.
@media screen and (max-width: 50em) {
.container {
flex-direction: column;
margin: 0 0 .5em .5em;
margin: 0 0 var(--spacing-m) var(--spacing-m);
}
.lineNum {
min-width: initial;

View File

@ -45,10 +45,10 @@ limitations under the License.
width: 100%;
}
.parentRevisionContainer label {
margin-bottom: .2em;
margin-bottom: var(--spacing-xs);
}
.rebaseOption {
margin: .5em 0;
margin: var(--spacing-m) 0;
}
</style>
<gr-dialog

View File

@ -29,7 +29,7 @@ limitations under the License.
min-width: 40em;
}
p {
margin-bottom: 1em;
margin-bottom: var(--spacing-l);
}
@media screen and (max-width: 50em) {
#dialog {

View File

@ -32,7 +32,7 @@ limitations under the License.
}
section {
display: flex;
padding: .5em 1.5em;
padding: var(--spacing-m) var(--spacing-xl);
}
section:not(:first-of-type) {
border-top: 1px solid var(--border-color);
@ -40,7 +40,7 @@ limitations under the License.
.flexContainer {
display: flex;
justify-content: space-between;
padding-top: .75em;
padding-top: var(--spacing-m);
}
.footer {
justify-content: flex-end;
@ -53,15 +53,15 @@ limitations under the License.
}
.patchFiles,
.archivesContainer {
padding-bottom: .5em;
padding-bottom: var(--spacing-m);
}
.patchFiles {
margin-right: 2em;
margin-right: var(--spacing-xxl);
}
.patchFiles a,
.archives a {
display: inline-block;
margin-right: 1em;
margin-right: var(--spacing-l);
}
.patchFiles a:last-of-type,
.archives a:last-of-type {

View File

@ -48,7 +48,7 @@ limitations under the License.
background-color: var(--table-header-background-color);
border-top: 1px solid var(--border-color);
display: flex;
padding: 6px var(--default-horizontal-margin);
padding: 6px var(--spacing-l);
}
.patchInfo-left {
align-items: baseline;
@ -144,7 +144,7 @@ limitations under the License.
margin-right: -5px;
}
.fileViewActionsLabel {
margin-right: .2rem;
margin-right: var(--spacing-xs);
}
@media screen and (max-width: 50em) {
.patchInfo-header .desktop {

View File

@ -49,7 +49,7 @@ limitations under the License.
border-top: 1px solid var(--border-color);
display: flex;
min-height: 2.25em;
padding: .2em var(--default-horizontal-margin) .2em calc(var(--default-horizontal-margin) - .35rem);
padding: var(--spacing-xs) var(--spacing-l) var(--spacing-xs) calc(var(--spacing-l) - .35rem);
}
:host(.loading) .row {
opacity: .5;
@ -132,7 +132,7 @@ limitations under the License.
min-width: 7.5em;
}
.comments {
padding-left: 1em;
padding-left: var(--spacing-l);
min-width: 7.5em;
}
.row:not(.header-row) .stats,
@ -141,7 +141,7 @@ limitations under the License.
display: flex;
}
.sizeBars {
margin-left: .5em;
margin-left: var(--spacing-m);
min-width: 7em;
text-align: center;
}
@ -160,18 +160,18 @@ limitations under the License.
color: var(--vote-text-color-disliked);
text-align: left;
min-width: 4em;
padding-left: 0.5em;
padding-left: var(--spacing-s);
}
.drafts {
color: #C62828;
font-weight: var(--font-weight-bold);
}
.show-hide {
margin-left: .35em;
margin-left: var(--spacing-s);
width: 1.9em;
}
.fileListButton {
margin: .5em;
margin: var(--spacing-m);
}
.totalChanges {
justify-content: flex-end;
@ -203,7 +203,7 @@ limitations under the License.
display: none;
}
.reviewed {
margin-left: 2em;
margin-left: var(--spacing-xxl);
width: 15em;
}
.reviewed label {
@ -229,7 +229,7 @@ limitations under the License.
}
.reviewedLabel {
color: var(--deemphasized-text-color);
margin-right: 1em;
margin-right: var(--spacing-l);
opacity: 0;
}
.reviewedLabel.isReviewed {
@ -242,8 +242,8 @@ limitations under the License.
.markReviewed,
.pathLink {
display: inline-block;
margin: -.2em 0;
padding: .4em 0;
margin: -2px 0;
padding: var(--spacing-s) 0;
}
@media screen and (max-width: 50em) {
.desktop {

View File

@ -29,13 +29,13 @@ limitations under the License.
display: block;
max-height: 80vh;
overflow-y: auto;
padding: 4.5em 1em 1em 1em;
padding: 4.5em var(--spacing-l) var(--spacing-l) var(--spacing-l);
}
header {
background-color: var(--dialog-background-color);
border-bottom: 1px solid var(--border-color);
left: 0;
padding: 1em;
padding: var(--spacing-l);
position: absolute;
right: 0;
top: 0;
@ -43,7 +43,7 @@ limitations under the License.
#title {
display: inline-block;
font-size: 1.2rem;
margin-top: .2em;
margin-top: var(--spacing-xs);
}
h2 {
font-size: 1rem;
@ -51,22 +51,22 @@ limitations under the License.
#filterInput {
display: inline-block;
float: right;
margin: 0 1em;
padding: .2em;
margin: 0 var(--spacing-l);
padding: var(--spacing-xs);
}
.closeButtonContainer {
float: right;
}
ul {
margin-bottom: 1em;
margin-bottom: var(--spacing-l);
}
ul li {
border: 1px solid var(--border-color);
border-radius: .2em;
background: var(--chip-background-color);
display: inline-block;
margin: 0 .2em .4em .2em;
padding: .2em .4em;
margin: 0 var(--spacing-xs) var(--spacing-s) var(--spacing-xs);
padding: var(--spacing-xs) var(--spacing-s);
}
.loading.loaded {
display: none;

View File

@ -28,12 +28,12 @@ limitations under the License.
.labelContainer {
align-items: center;
display: flex;
margin-bottom: .5em;
margin-bottom: var(--spacing-m);
}
.labelName {
display: inline-block;
flex: 0 0 auto;
margin-right: .5em;
margin-right: var(--spacing-m);
min-width: 7em;
text-align: left;
width: 20%;
@ -47,7 +47,7 @@ limitations under the License.
.selectedValueText {
color: var(--deemphasized-text-color);
font-style: italic;
margin: 0 .5em 0 .5em;
margin: 0 var(--spacing-m);
}
.selectedValueText.hidden {
display: none;
@ -60,7 +60,7 @@ limitations under the License.
--gr-button: {
background-color: var(--button-background-color, var(--table-header-background-color));
color: var(--primary-text-color);
padding: .2em .85em;
padding: var(--spacing-xs) var(--spacing-m);
@apply --vote-chip-styles;
}
}

View File

@ -43,11 +43,11 @@ limitations under the License.
cursor: auto;
}
:host > div {
padding: 0 var(--default-horizontal-margin);
padding: 0 var(--spacing-l);
}
gr-avatar {
position: absolute;
left: var(--default-horizontal-margin);
left: var(--spacing-l);
}
.collapsed .contentContainer {
align-items: baseline;
@ -56,11 +56,11 @@ limitations under the License.
white-space: nowrap;
}
.contentContainer {
margin-left: calc(var(--default-horizontal-margin) + 2.5em);
margin-left: calc(var(--spacing-l) + 2.5em);
padding: 10px 0;
}
.showAvatar.collapsed .contentContainer {
margin-left: calc(var(--default-horizontal-margin) + 1.75em);
margin-left: calc(var(--spacing-l) + 1.75em);
}
.hideAvatar.collapsed .contentContainer,
.hideAvatar.expanded .contentContainer {
@ -69,10 +69,10 @@ limitations under the License.
.showAvatar.collapsed .contentContainer,
.hideAvatar.collapsed .contentContainer,
.hideAvatar.expanded .contentContainer {
padding: .75em 0;
padding: var(--spacing-m) 0;
}
.collapsed gr-avatar {
top: .5em;
top: var(--spacing-m);
height: 1.75em;
width: 1.75em;
}
@ -113,7 +113,7 @@ limitations under the License.
}
.collapsed .content {
flex: 1;
margin-right: .25em;
margin-right: var(--spacing-xs);
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
@ -124,15 +124,15 @@ limitations under the License.
.collapsed .author {
overflow: hidden;
color: var(--primary-text-color);
margin-right: .4em;
margin-right: var(--spacing-s);
}
.expanded .author {
cursor: pointer;
margin-bottom: .4em;
margin-bottom: var(--spacing-s);
}
.dateContainer {
position: absolute;
right: var(--default-horizontal-margin);
right: var(--spacing-l);
top: 10px;
}
span.date {
@ -145,15 +145,15 @@ limitations under the License.
cursor: pointer;
}
.replyContainer {
padding: .5em 0 0 0;
padding: var(--spacing-m) 0 0 0;
}
.score {
border: 1px solid rgba(0,0,0,.12);
border-radius: 3px;
color: var(--primary-text-color);
display: inline-block;
margin: -.1em 0;
padding: 0 .1em;
margin: -1px 0;
padding: 0 var(--spacing-xxs);
}
.score.negative {
background-color: var(--vote-color-disliked);

View File

@ -38,10 +38,10 @@ limitations under the License.
display: flex;
justify-content: space-between;
min-height: 3.2em;
padding: .5em var(--default-horizontal-margin);
padding: var(--spacing-m) var(--spacing-l);
}
#messageControlsContainer {
padding: 0 var(--default-horizontal-margin);
padding: 0 var(--spacing-l);
}
.highlighted {
animation: 3s fadeOut;
@ -58,7 +58,7 @@ limitations under the License.
justify-content: center;
}
#messageControlsContainer gr-button {
padding: 0.4em 0;
padding: var(--spacing-s) 0;
}
.container {
align-items: center;

View File

@ -30,7 +30,7 @@ limitations under the License.
display: block;
}
h3 {
margin: .5em 0 0;
margin: var(--spacing-m) 0 0;
}
section {
margin-bottom: 1.4em; /* Same as line height for collapse purposes */
@ -75,7 +75,7 @@ limitations under the License.
.status {
color: var(--deemphasized-text-color);
font-weight: var(--font-weight-bold);
margin-left: .25em;
margin-left: var(--spacing-xs);
}
.notCurrent {
color: #e65100;

View File

@ -60,7 +60,7 @@ limitations under the License.
section {
border-top: 1px solid var(--border-color);
flex-shrink: 0;
padding: .5em 1.5em;
padding: var(--spacing-m) var(--spacing-xl);
width: 100%;
}
.actions {
@ -73,7 +73,7 @@ limitations under the License.
z-index: 1;
}
.actions .right gr-button {
margin-left: 1em;
margin-left: var(--spacing-l);
}
.peopleContainer,
.labelsContainer {
@ -85,13 +85,13 @@ limitations under the License.
}
.peopleList {
display: flex;
padding-top: .1em;
padding-top: var(--spacing-xxs);
}
.peopleListLabel {
color: var(--deemphasized-text-color);
margin-top: .2em;
margin-top: var(--spacing-xs);
min-width: 7em;
padding-right: .5em;
padding-right: var(--spacing-m);
}
gr-account-list {
display: flex;
@ -100,11 +100,11 @@ limitations under the License.
min-height: 1.8em;
}
#reviewerConfirmationOverlay {
padding: 1em;
padding: var(--spacing-l);
text-align: center;
}
.reviewerConfirmationButtons {
margin-top: 1em;
margin-top: var(--spacing-l);
}
.groupName {
font-weight: var(--font-weight-bold);
@ -127,14 +127,14 @@ limitations under the License.
}
.previewContainer gr-formatted-text {
background: var(--table-header-background-color);
padding: 1em;
padding: var(--spacing-l);
}
.draftsContainer h3 {
margin-top: .25em;
margin-top: var(--spacing-xs);
}
#checkingStatusLabel,
#notLatestLabel {
margin-left: 1em;
margin-left: var(--spacing-l);
}
#checkingStatusLabel {
color: var(--deemphasized-text-color);
@ -152,8 +152,8 @@ limitations under the License.
}
#pluginMessage {
color: var(--deemphasized-text-color);
margin-left: 1em;
margin-bottom: .5em;
margin-left: var(--spacing-l);
margin-bottom: var(--spacing-m);
}
#pluginMessage:empty {
display: none;

View File

@ -36,18 +36,18 @@ limitations under the License.
position: relative;
}
.hiddenReviewers {
margin-top: .3em;
margin-top: var(--spacing-s);
}
.inputContainer {
display: flex;
margin-top: .25em;
margin-top: var(--spacing-xs);
}
.inputContainer input {
flex: 1;
font: inherit;
}
gr-account-chip {
margin-top: .3em;
margin-top: var(--spacing-s);
}
gr-button {
--gr-button: {

View File

@ -26,11 +26,11 @@ limitations under the License.
#threads {
display: block;
min-height: 20rem;
padding: 1rem;
padding: var(--spacing-l);
}
gr-comment-thread {
display: block;
margin-bottom: .5rem;
margin-bottom: var(--spacing-m);
max-width: 80ch;
}
.header {
@ -41,7 +41,7 @@ limitations under the License.
display: flex;
justify-content: left;
min-height: 3.2em;
padding: .5em var(--default-horizontal-margin);
padding: var(--spacing-m) var(--spacing-l);
}
.toggleItem.draftToggle {
display: none;
@ -52,7 +52,7 @@ limitations under the License.
.toggleItem {
align-items: center;
display: flex;
margin-right: 1rem;
margin-right: var(--spacing-l);
}
.draftsOnly:not(.unresolvedOnly) gr-comment-thread[has-draft],
.unresolvedOnly:not(.draftsOnly) gr-comment-thread[unresolved],

View File

@ -33,11 +33,11 @@ limitations under the License.
width: 100%;
}
ol {
margin-left: 1em;
margin-left: var(--spacing-l);
list-style: decimal;
}
p {
margin-bottom: .75em;
margin-bottom: var(--spacing-m);
}
</style>
<gr-dialog

View File

@ -26,7 +26,7 @@ limitations under the License.
<template>
<style include="shared-styles">
gr-dropdown {
padding: 0 .5em;
padding: 0 var(--spacing-m);
--gr-button: {
color: var(--header-text-color);
}

View File

@ -27,7 +27,7 @@ limitations under the License.
border-radius: 3px;
display: inline-block;
font-weight: var(--font-weight-bold);
padding: .1em .5em;
padding: var(--spacing-xxs) var(--spacing-m);
text-align: center;
}
</style>

View File

@ -31,11 +31,11 @@ limitations under the License.
overflow-y: auto;
}
header{
padding: 1em;
padding: var(--spacing-l);
}
main {
display: flex;
padding: 0 2em 2em;
padding: 0 var(--spacing-xxl) var(--spacing-xxl);
}
header {
align-items: center;
@ -44,18 +44,18 @@ limitations under the License.
justify-content: space-between;
}
table:last-of-type {
margin-left: 3em;
margin-left: var(--spacing-xxl);
}
td {
padding: .2em 0;
padding: var(--spacing-xs) 0;
}
td:first-child {
padding-right: .5em;
padding-right: var(--spacing-m);
text-align: right;
}
.header {
font-weight: var(--font-weight-bold);
padding-top: 1em;
padding-top: var(--spacing-l);
}
.modifier {
font-weight: normal;

View File

@ -63,7 +63,7 @@ limitations under the License.
}
ul {
list-style: none;
padding-left: 1em;
padding-left: var(--spacing-l);
}
.links > li {
cursor: default;
@ -87,16 +87,16 @@ limitations under the License.
justify-content: flex-end;
}
.rightItems gr-endpoint-decorator:not(:empty) {
margin-left: 1em;
margin-left: var(--spacing-l);
}
gr-smart-search {
flex-grow: 1;
margin-left: .5em;
margin-left: var(--spacing-m);
max-width: 500px;
}
gr-dropdown,
.browse {
padding: .6em .5em;
padding: var(--spacing-m);
}
gr-dropdown {
--gr-dropdown-item: {
@ -104,7 +104,7 @@ limitations under the License.
}
}
.settingsButton {
margin-left: .5em;
margin-left: var(--spacing-m);
}
.browse {
color: var(--header-text-color);
@ -129,13 +129,13 @@ limitations under the License.
.accountContainer {
align-items: center;
display: flex;
margin: 0 -.5em 0 .5em;
margin: 0 calc(0 - var(--spacing-m)) 0 var(--spacing-m);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.loginButton, .registerButton {
padding: .5em 1em;
padding: var(--spacing-m) var(--spacing-l);
}
.dropdown-trigger {
text-decoration: none;
@ -174,10 +174,10 @@ limitations under the License.
display: inline-flex;
}
.accountContainer {
margin-left: .5em !important;
margin-left: var(--spacing-m) !important;
}
gr-dropdown {
padding: .5em 0 .5em .5em;
padding: var(--spacing-m) 0 var(--spacing-m) var(--spacing-m);
}
}
</style>

View File

@ -34,7 +34,7 @@ limitations under the License.
flex: 1;
font: inherit;
outline: none;
padding: .25em;
padding: var(--spacing-xs);
}
</style>
<form>

View File

@ -27,7 +27,7 @@ limitations under the License.
<style include="shared-styles">
.diffHeader,
.diffActions {
padding: 1em 1.5em;
padding: var(--spacing-l) var(--spacing-xl);
}
.diffHeader,
.diffActions {
@ -43,7 +43,7 @@ limitations under the License.
justify-content: flex-end;
}
.diffPrefsOverlay gr-button {
margin-left: 1em;
margin-left: var(--spacing-l);
}
div.edited:after {
color: var(--deemphasized-text-color);
@ -51,7 +51,7 @@ limitations under the License.
}
#diffPreferences {
display: flex;
padding: .35em 1.5em;
padding: var(--spacing-s) var(--spacing-xl);
}
</style>
<gr-overlay id="diffPrefsOverlay" with-backdrop>

View File

@ -72,7 +72,7 @@ limitations under the License.
justify-content: space-between;
}
header {
padding: .75em var(--default-horizontal-margin);
padding: var(--spacing-m) var(--spacing-l);
}
.patchRangeLeft {
align-items: center;
@ -87,11 +87,11 @@ limitations under the License.
white-space: nowrap;
}
.navLink {
padding: 0 .25em;
padding: 0 var(--spacing-xs);
}
.reviewed {
display: inline-block;
margin: 0 .25em;
margin: 0 var(--spacing-xs);
vertical-align: .15em;
}
.jumpToFileContainer {
@ -101,22 +101,22 @@ limitations under the License.
display: none;
}
gr-button {
padding: .3em 0;
padding: var(--spacing-s) 0;
text-decoration: none;
}
.loading {
color: var(--deemphasized-text-color);
font-size: 2rem;
height: 100%;
padding: 1em var(--default-horizontal-margin);
padding: var(--spacing-l);
text-align: center;
}
.subHeader {
flex-wrap: wrap;
padding: 0 var(--default-horizontal-margin) .75em;
padding: 0 var(--spacing-l) var(--spacing-m);
}
.subHeader > div {
margin-top: .25em;
margin-top: var(--spacing-xs);
}
.prefsButton {
text-align: right;
@ -145,7 +145,7 @@ limitations under the License.
display: flex;
}
.diffModeSelector span {
margin-right: .2rem;
margin-right: var(--spacing-xs);
}
.diffModeSelector.hide,
.separator.hide {
@ -158,7 +158,7 @@ limitations under the License.
}
@media screen and (max-width: 50em) {
header {
padding: .5em var(--default-horizontal-margin);
padding: var(--spacing-m) var(--spacing-l);
}
.dash {
display: none;
@ -169,19 +169,19 @@ limitations under the License.
.fileNav {
align-items: flex-start;
display: flex;
margin: 0 .25em;
margin: 0 var(--spacing-xs);
}
.fullFileName {
display: block;
font-style: italic;
min-width: 50%;
padding: 0 .1em;
padding: 0 var(--spacing-xxs);
text-align: center;
width: 100%;
word-wrap: break-word;
}
.reviewed {
vertical-align: -.1em;
vertical-align: -1px;
}
.mobileNavLink {
color: var(--primary-text-color);

View File

@ -54,7 +54,7 @@ limitations under the License.
@apply --diff-container-styles;
}
.diffContainer.hiddenscroll {
margin-bottom: .8em;
margin-bottom: var(--spacing-m);
}
table {
border-collapse: collapse;
@ -119,7 +119,7 @@ limitations under the License.
user-select: none;
color: var(--deemphasized-text-color);
padding: 0 .5em;
padding: 0 var(--spacing-m);
text-align: right;
}
.canComment .lineNum {
@ -190,7 +190,7 @@ limitations under the License.
text-decoration: none;
--gr-button: {
color: var(--diff-context-control-color);
padding: .2em;
padding: var(--spacing-xs);
}
}
.contextControl td:not(.lineNum) {
@ -227,12 +227,12 @@ limitations under the License.
color: var(--link-color);
font-family: var(--monospace-font-family);
font-size: var(--font-size, var(--font-size-normal));
padding: 0.5em 0 0.5em 4em;
padding: var(--spacing-m) 0 var(--spacing-m) 48px;
}
#loadingError,
#sizeWarning {
display: none;
margin: 1em auto;
margin: var(--spacing-l) auto;
max-width: 60em;
text-align: center;
}
@ -240,7 +240,7 @@ limitations under the License.
color: var(--error-text-color);
}
#sizeWarning gr-button {
margin: 1em;
margin: var(--spacing-l);
}
#loadingError.showError,
#sizeWarning.warn {
@ -256,7 +256,7 @@ limitations under the License.
display: none;
font-family: var(--font-family);
font-size: var(--font-size, var(--font-size-normal));
padding: 0 .5em;
padding: 0 var(--spacing-m);
white-space: pre;
}
:host(.showBlame) col.blame {

View File

@ -34,7 +34,7 @@ limitations under the License.
}
.arrow {
color: var(--deemphasized-text-color);
margin: 0 .5em;
margin: 0 var(--spacing-m);
}
gr-dropdown-list {
--trigger-style: {

View File

@ -43,7 +43,7 @@ limitations under the License.
display: none;
}
gr-button {
margin-left: 1em;
margin-left: var(--spacing-l);
text-decoration: none;
}
gr-dialog {
@ -61,7 +61,7 @@ limitations under the License.
border-radius: 2px;
font-size: var(--font-size-normal);
height: 2em;
padding: 0 .15em;
padding: 0 var(--spacing-xs);
}
}
input {
@ -69,8 +69,8 @@ limitations under the License.
border-radius: 2px;
font-size: var(--font-size-normal);
height: 2em;
margin: .5em 0;
padding: 0 .15em;
margin: var(--spacing-m) 0;
padding: 0 var(--spacing-xs);
width: 100%;
}
@media screen and (max-width: 50em) {

View File

@ -32,7 +32,7 @@ limitations under the License.
justify-content: flex-end;
}
#actions {
margin-right: 1em;
margin-right: var(--spacing-l);
}
gr-button,
gr-dropdown {

View File

@ -48,7 +48,7 @@ limitations under the License.
align-items: center;
display: flex;
justify-content: space-between;
padding: .75em var(--default-horizontal-margin);
padding: var(--spacing-m) var(--spacing-l);
}
header gr-editable-label {
font-size: var(--font-size-large);
@ -58,13 +58,13 @@ limitations under the License.
word-break: break-all;
}
--input-style: {
margin-top: 1em;
margin-top: var(--spacing-l);
}
}
.textareaWrapper {
border: 1px solid var(--border-color);
border-radius: 3px;
margin: var(--default-horizontal-margin);
margin: var(--spacing-l);
}
.textareaWrapper .editButtons {
display: none;

View File

@ -69,7 +69,7 @@ limitations under the License.
}
gr-main-header {
background: var(--header-background, var(--header-background-color, #eee));
padding: 0 var(--default-horizontal-margin);
padding: 0 var(--spacing-l);
border-bottom: var(--header-border-bottom);
border-image: var(--header-border-image);
border-right: 0;
@ -81,12 +81,12 @@ limitations under the License.
border-top: var(--footer-border-top);
display: flex;
justify-content: space-between;
padding: .5rem var(--default-horizontal-margin);
padding: var(--spacing-m) var(--spacing-l);
z-index: 100;
}
main {
flex: 1;
padding-bottom: 2em;
padding-bottom: var(--spacing-xxl);
position: relative;
}
.errorView {
@ -108,7 +108,7 @@ limitations under the License.
}
.errorText,
.errorMoreInfo {
margin-top: .75em;
margin-top: var(--spacing-m);
}
.errorText {
font-size: 1.2rem;

View File

@ -26,7 +26,7 @@ limitations under the License.
vertical-align: middle;
}
.title {
margin-left: .25em;
margin-left: var(--spacing-xs);
}
</style>
<span>

View File

@ -32,7 +32,7 @@ limitations under the License.
gr-avatar {
height: 120px;
width: 120px;
margin-right: .15em;
margin-right: var(--spacing-xs);
vertical-align: -.25em;
}
div section.hide {

View File

@ -28,17 +28,17 @@ limitations under the License.
<template>
<style include="shared-styles">
h1 {
margin-bottom: .6em;
margin-bottom: var(--spacing-m);
}
h3 {
margin-bottom: .5em;
margin-bottom: var(--spacing-m);
}
.agreementsUrl {
border: 0.1em solid #b0bdcc;
margin-bottom: 1.25em;
margin-left: 1.25em;
margin-right: 1.25em;
padding: 0.3em;
border: 1px solid #b0bdcc;
margin-bottom: var(--spacing-xl);
margin-left: var(--spacing-xl);
margin-right: var(--spacing-xl);
padding: var(--spacing-s);
}
#claNewAgreementsLabel {
font-weight: var(--font-weight-bold);
@ -54,15 +54,15 @@ limitations under the License.
}
.alreadySubmittedText {
color: var(--error-text-color);
margin: 0 2em;
padding: .5em;
margin: 0 var(--spacing-xxl);
padding: var(--spacing-m);
}
.alreadySubmittedText.hide,
.hideAgreementsTextBox {
display: none;
}
main {
margin: 2em auto;
margin: var(--spacing-xxl) auto;
max-width: 50em;
}
</style>

View File

@ -35,7 +35,7 @@ limitations under the License.
width: 15em;
}
#viewKeyOverlay {
padding: 2em;
padding: var(--spacing-xxl);
width: 50em;
}
.publicKey {
@ -50,7 +50,7 @@ limitations under the License.
right: 2em;
}
#existing {
margin-bottom: 1em;
margin-bottom: var(--spacing-l);
}
</style>
<div class="gr-form-styles">

View File

@ -29,11 +29,11 @@ limitations under the License.
font-family: var(--monospace-font-family);
}
#generatedPasswordOverlay {
padding: 2em;
padding: var(--spacing-xxl);
width: 50em;
}
#generatedPasswordDisplay {
margin: 1em 0;
margin: var(--spacing-l) 0;
}
#generatedPasswordDisplay .value {
font-family: var(--monospace-font-family);

View File

@ -50,7 +50,7 @@ limitations under the License.
display: none;
}
.space {
margin-bottom: 1em;
margin-bottom: var(--spacing-l);
}
</style>
<div class="gr-form-styles">

View File

@ -45,23 +45,23 @@ limitations under the License.
display: block;
}
hr {
margin-top: 1em;
margin-bottom: 1em;
margin-top: var(--spacing-l);
margin-bottom: var(--spacing-l);
}
header {
border-bottom: 1px solid var(--border-color);
font-weight: var(--font-weight-bold);
margin-bottom: 1em;
margin-bottom: var(--spacing-l);
}
.container {
padding: .5em 1.5em;
padding: var(--spacing-m) var(--spacing-xl);
}
footer {
display: flex;
justify-content: flex-end;
}
footer gr-button {
margin-left: 1em;
margin-left: var(--spacing-l);
}
input {
width: 20em;

View File

@ -22,7 +22,7 @@ limitations under the License.
<style>
:host {
display: block;
margin-bottom: 2em;
margin-bottom: var(--spacing-xxl);
}
</style>
<h2 id="[[anchor]]">[[title]]</h2>

View File

@ -55,14 +55,14 @@ limitations under the License.
width: 20em;
}
#email {
margin-bottom: 1em;
margin-bottom: var(--spacing-l);
}
main section.darkToggle {
display: block;
}
.filters p,
.darkToggle p {
margin-bottom: 1em;
margin-bottom: var(--spacing-l);
}
.queryExample em {
color: violet;
@ -70,8 +70,8 @@ limitations under the License.
.toggle {
align-items: center;
display: flex;
margin-bottom: 1rem;
margin-right: 1rem;
margin-bottom: var(--spacing-l);
margin-right: var(--spacing-l);
}
</style>
<style include="gr-form-styles"></style>

View File

@ -35,7 +35,7 @@ limitations under the License.
width: 7.5em;
}
#viewKeyOverlay {
padding: 2em;
padding: var(--spacing-xxl);
width: 50em;
}
.publicKey {
@ -50,7 +50,7 @@ limitations under the License.
right: 2em;
}
#existing {
margin-bottom: 1em;
margin-bottom: var(--spacing-l);
}
#existing .commentColumn {
min-width: 27em;

View File

@ -28,7 +28,7 @@ limitations under the License.
<style include="gr-form-styles">
#watchedProjects .notifType {
text-align: center;
padding: 0 0.4em;
padding: 0 var(--spacing-s);
}
.notifControl {
cursor: pointer;
@ -40,7 +40,7 @@ limitations under the License.
.projectFilter {
color: var(--deemphasized-text-color);
font-style: italic;
margin-left: 1em;
margin-left: var(--spacing-l);
}
.newFilterInput {
width: 100%;

View File

@ -35,7 +35,7 @@ limitations under the License.
background: var(--chip-background-color);
border-radius: .75em;
display: inline-flex;
padding: 0 .5em;
padding: 0 var(--spacing-m);
}
:host([show-avatar]) .container {
padding-left: 0;
@ -48,7 +48,7 @@ limitations under the License.
font-weight: normal;
height: .6em;
line-height: .6;
margin-left: .15em;
margin-left: var(--spacing-xs);
padding: 0;
text-decoration: none;
}

View File

@ -35,7 +35,7 @@ limitations under the License.
gr-avatar {
height: 1.3em;
width: 1.3em;
margin-right: .15em;
margin-right: var(--spacing-xs);
vertical-align: -.25em;
}
.text {

View File

@ -26,7 +26,7 @@ limitations under the License.
<style include="shared-styles">
gr-account-chip {
display: inline-block;
margin: .2em .2em .2em 0;
margin: var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) 0;
}
gr-account-entry {
display: flex;

View File

@ -52,7 +52,7 @@ limitations under the License.
* with the universal selector: *.
*/
.content-wrapper {
padding: 1em 1.5em;
padding: var(--spacing-l) var(--spacing-xl);
}
.text {
color: var(--tooltip-text-color);
@ -65,7 +65,7 @@ limitations under the License.
.action {
color: var(--link-color);
font-weight: var(--font-weight-bold);
margin-left: 1em;
margin-left: var(--spacing-l);
text-decoration: none;
--gr-button: {
padding: 0;

View File

@ -42,7 +42,7 @@ limitations under the License.
cursor: pointer;
display: flex;
justify-content: space-between;
padding: .5em .75em;
padding: var(--spacing-m) var(--spacing-l);
}
li:last-of-type {
border: none;
@ -69,7 +69,7 @@ limitations under the License.
}
.label {
color: var(--deemphasized-text-color);
padding-left: 1em;
padding-left: var(--spacing-l);
}
.hide {
display: none;

View File

@ -33,7 +33,7 @@ limitations under the License.
display: inline-block;
}
iron-icon {
margin: 0 .25em;
margin: 0 var(--spacing-xs);
}
paper-input:not(.borderless) {
border: 1px solid var(--border-color);

View File

@ -64,7 +64,7 @@ limitations under the License.
user-select: none;
cursor: pointer;
z-index: 0;
padding: 0.7em 0.57em;
padding: var(--spacing-m);
@apply --paper-font-common-base;
@apply --paper-button;
@ -152,8 +152,8 @@ limitations under the License.
border-top: .36em solid #ccc;
border-left: .36em solid transparent;
border-right: .36em solid transparent;
margin-bottom: .05em;
margin-left: .5em;
margin-bottom: var(--spacing-xxs);
margin-left: var(--spacing-m);
transition: border-top-color 200ms;
}
:host([down-arrow]) paper-button:hover .downArrow {

View File

@ -29,7 +29,7 @@ limitations under the License.
background-color: var(--chip-background-color);
font-family: var(--font-family);
font-size: var(--font-size-normal);
padding: .1em .5em;
padding: var(--spacing-xxs) var(--spacing-m);
white-space: nowrap;
}
:host(.merged) .chip {
@ -66,7 +66,7 @@ limitations under the License.
}
:host([flat]) .chip {
background-color: transparent;
padding: .1em;
padding: var(--spacing-xxs);
}
:host(:not([flat])) .chip {
color: white;

View File

@ -29,11 +29,11 @@ limitations under the License.
<template>
<style include="shared-styles">
gr-button {
margin-left: .5em;
margin-left: var(--spacing-m);
}
#actions {
margin-left: auto;
padding: .5em .7em;
padding: var(--spacing-m);
}
#container {
background-color: var(--comment-background-color);
@ -59,14 +59,14 @@ limitations under the License.
#unresolvedLabel {
font-family: var(--font-family);
margin: auto 0;
padding: .5em .7em;
padding: var(--spacing-m);
}
.pathInfo {
display: flex;
align-items: baseline;
}
.descriptionText {
margin-left: .5rem;
margin-left: var(--spacing-m);
font-style: italic;
}
</style>

View File

@ -42,7 +42,7 @@ limitations under the License.
:host {
display: block;
font-family: var(--font-family);
padding: .7em .7em;
padding: var(--spacing-m);
--iron-autogrow-textarea: {
box-sizing: border-box;
padding: 2px;
@ -64,11 +64,11 @@ limitations under the License.
cursor: pointer;
display: flex;
font-family: 'Open Sans', sans-serif;
margin: -.7em -.7em 0 -.7em;
padding: .7em;
margin: calc(0px - var(--spacing-m)) calc(0px - var(--spacing-m)) 0 calc(0px - var(--spacing-m));
padding: var(--spacing-m);
}
.container.collapsed .header {
margin-bottom: -.7em;
margin-bottom: calc(0 - var(--spacing-m));
}
.headerMiddle {
color: var(--deemphasized-text-color);
@ -104,7 +104,7 @@ limitations under the License.
padding-top: 0;
}
.action {
margin-left: 1em;
margin-left: var(--spacing-l);
}
.robotActions {
display: flex;
@ -113,8 +113,8 @@ limitations under the License.
}
.robotActions .action {
/* Keep button text lined up with output text */
margin-left: -.3rem;
margin-right: 1em;
margin-left: -4px;
margin-right: var(--spacing-l);
}
.rightActions {
display: flex;
@ -122,7 +122,7 @@ limitations under the License.
}
.editMessage {
display: none;
margin: .5em 0;
margin: var(--spacing-m) 0;
width: 100%;
}
.container:not(.draft) .actions .hideOnPublished {
@ -156,27 +156,27 @@ limitations under the License.
display: block;
}
.show-hide {
margin-left: .4em;
margin-left: var(--spacing-s);
}
.robotId {
color: var(--deemphasized-text-color);
margin-bottom: .8em;
margin-bottom: var(--spacing-m);
margin-top: -.4em;
}
.robotIcon {
margin-right: .2em;
margin-right: var(--spacing-xs);
/* because of the antenna of the robot, it looks off center even when it
is centered. artificially adjust margin to account for this. */
margin-top: -.3em;
margin-top: -4px;
}
.runIdInformation {
margin: .7em 0;
margin: var(--spacing-m) 0;
}
.robotRun {
margin-left: .5em;
margin-left: var(--spacing-m);
}
.robotRunLink {
margin-left: .5em;
margin-left: var(--spacing-m);
}
input.show-hide {
display: none;
@ -187,7 +187,7 @@ limitations under the License.
display: block;
font-size: .8rem;
height: 1.1em;
margin-top: .1em;
margin-top: var(--spacing-xxs);
}
#container .collapsedContent {
display: none;

View File

@ -31,7 +31,7 @@ limitations under the License.
}
.copyText {
flex-grow: 1;
margin-right: .3em;
margin-right: var(--spacing-s);
}
.hideInput {
display: none;

View File

@ -46,10 +46,10 @@ limitations under the License.
header,
main,
footer {
padding: .5em 1.5em;
padding: var(--spacing-m) var(--spacing-xl);
}
gr-button {
margin-left: 1em;
margin-left: var(--spacing-l);
}
footer {
display: flex;

View File

@ -29,7 +29,7 @@ limitations under the License.
<style include="shared-styles">
paper-tabs {
height: 3rem;
margin-bottom: .5em;
margin-bottom: var(--spacing-m);
--paper-tabs-selection-bar-color: var(--link-color);
}
paper-tab {
@ -54,7 +54,7 @@ limitations under the License.
}
gr-shell-command {
width: 60em;
margin-bottom: .5em;
margin-bottom: var(--spacing-m);
}
.hidden {
display: none;

View File

@ -46,7 +46,7 @@ limitations under the License.
background-color: var(--dropdown-background-color);
box-shadow: 0 1px 5px rgba(0, 0, 0, .3);
max-height: 70vh;
margin-top: 2em;
margin-top: var(--spacing-xxl);
min-width: 266px;
@apply --dropdown-content-style;
}
@ -103,7 +103,7 @@ limitations under the License.
}
gr-date-formatter {
color: var(--deemphasized-text-color);
margin-left: 2em;
margin-left: var(--spacing-xxl);
white-space: nowrap;
}
gr-select {

View File

@ -63,7 +63,7 @@ limitations under the License.
li .itemAction {
cursor: pointer;
display: block;
padding: .85em 1em;
padding: var(--spacing-m) var(--spacing-l);
}
li .itemAction {
@apply --gr-dropdown-item;
@ -90,7 +90,7 @@ limitations under the License.
}
.topContent {
display: block;
padding: .85em 1em;
padding: var(--spacing-m) var(--spacing-l);
@apply --gr-dropdown-item;
}
.bold-text {

View File

@ -57,17 +57,17 @@ limitations under the License.
}
.inputContainer {
background-color: var(--dialog-background-color);
padding: .8em;
padding: var(--spacing-m);
@apply --input-style;
}
.buttons {
display: flex;
justify-content: flex-end;
padding-top: 1.2em;
padding-top: var(--spacing-l);
width: 100%;
}
.buttons gr-button {
margin-left: .5em;
margin-left: var(--spacing-m);
}
paper-input {
--paper-input-container: {

View File

@ -29,7 +29,7 @@ limitations under the License.
ul,
blockquote,
gr-linked-text.pre {
margin: 0 0 .8em 0;
margin: 0 0 var(--spacing-m) 0;
}
p,
ul,
@ -44,11 +44,11 @@ limitations under the License.
}
blockquote {
border-left: 1px solid #aaa;
padding: 0 .7em;
padding: 0 var(--spacing-m);
}
li {
list-style-type: disc;
margin-left: 1.4em;
margin-left: var(--spacing-xl);
}
gr-linked-text.pre {
font-family: var(--monospace-font-family);

View File

@ -37,7 +37,7 @@ limitations under the License.
#hovercard {
background: var(--dialog-background-color);
box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
padding: 1em;
padding: var(--spacing-l);
}
</style>
<div id="hovercard" role="tooltip" tabindex="-1">

View File

@ -31,7 +31,7 @@ limitations under the License.
<style include="shared-styles">
.placeholder {
color: var(--deemphasized-text-color);
padding-top: .2em;
padding-top: var(--spacing-xs);
}
.hidden {
display: none;
@ -39,8 +39,8 @@ limitations under the License.
.voteChip {
display: flex;
justify-content: center;
margin-right: .3em;
padding: .05em .85em;
margin-right: var(--spacing-s);
padding: var(--spacing-xxs) var(--spacing-m);
@apply --vote-chip-styles;
}
.max {
@ -75,14 +75,14 @@ limitations under the License.
color: var(--border-color);
}
gr-account-chip {
margin-right: .25em;
margin-right: var(--spacing-xs);
}
iron-icon {
height: 1.2em;
width: 1.2em;
}
.labelValueContainer:not(:first-of-type) td {
padding-top: .3em;
padding-top: var(--spacing-s);
}
</style>
<table>

View File

@ -28,7 +28,7 @@ limitations under the License.
#container {
background: var(--chip-background-color);
border-radius: 1em;
padding: .5em;
padding: var(--spacing-m);
}
#header {
color: var(--deemphasized-text-color);
@ -48,7 +48,7 @@ limitations under the License.
border-left: 1px solid var(--deemphasized-text-color);
color: var(--deemphasized-text-color);
cursor: pointer;
padding-left: .4em;
padding-left: var(--spacing-s);
}
#trigger:hover {
color: var(--primary-text-color);

View File

@ -35,7 +35,7 @@ limitations under the License.
background: var(--chip-background-color);
border-radius: .75em;
display: inline-flex;
padding: 0 .5em;
padding: 0 var(--spacing-m);
}
gr-button.remove {
--gr-remove-button-style: {
@ -45,7 +45,7 @@ limitations under the License.
font-weight: normal;
height: .6em;
line-height: .6;
margin-left: .15em;
margin-left: var(--spacing-xs);
padding: 0;
text-decoration: none;
}

View File

@ -38,7 +38,7 @@ limitations under the License.
display: flex;
height: 3rem;
justify-content: space-between;
margin: 0 1em;
margin: 0 var(--spacing-l);
}
#createNewContainer:not(.show) {
display: none;

View File

@ -33,7 +33,7 @@ limitations under the License.
display: inline-block;
}
iron-icon {
margin-bottom: 1.2em;
margin-bottom: var(--spacing-l);
}
</style>
<div>

View File

@ -23,25 +23,30 @@ limitations under the License.
<template>
<style include="shared-styles">
.commandContainer {
margin-bottom: .75em;
margin-bottom: var(--spacing-m);
}
.commandContainer {
background-color: var(--shell-command-background-color);
padding: .5em .5em .5em 2.5em;
/* Should be spacing-m larger than the :before width. */
padding: var(--spacing-m) var(--spacing-m) var(--spacing-m) calc(3*var(--spacing-m) + 0.5em);
position: relative;
width: 100%;
}
.commandContainer:before {
background: var(--shell-command-decoration-background-color);
bottom: 0;
box-sizing: border-box;
content: '$';
display: block;
left: 0;
padding: .8em;
position: absolute;
display: block;
box-sizing: border-box;
background: var(--shell-command-decoration-background-color);
top: 0;
width: 2em;
bottom: 0;
left: 0;
/* Should be spacing-m smaller than the .commandContainer padding-left. */
width: calc(2*var(--spacing-m) + 0.5em);
/* Should vertically match the padding of .commandContainer. */
padding: var(--spacing-m);
/* Should roughly match the height of .commandContainer without padding. */
line-height: 26px;
}
.commandContainer gr-copy-clipboard {
--text-container-style: {

View File

@ -34,7 +34,7 @@ limitations under the License.
max-width: var(--tooltip-max-width);
}
:host .tooltip {
padding: .5em .85em;
padding: var(--spacing-m) var(--spacing-l);
}
:host .arrowPositionBelow,
:host([position-below]) .arrowPositionAbove {

View File

@ -34,7 +34,7 @@ limitations under the License.
}
.info {
display: inline-block;
padding: 1em;
padding: var(--spacing-l);
vertical-align: top;
}
.info > div > span {

View File

@ -123,7 +123,7 @@ limitations under the License.
vertical-align: middle;
}
.leftPadding {
width: var(--default-horizontal-margin);
width: var(--spacing-l);
}
.star {
width: 30px;
@ -170,7 +170,7 @@ limitations under the License.
gr-change-list-item {
flex-wrap: wrap;
justify-content: space-between;
padding: .25em .5em;
padding: var(--spacing-xs) var(--spacing-m);
}
gr-change-list-item[selected],
gr-change-list-item:focus {
@ -199,10 +199,10 @@ limitations under the License.
}
.groupHeader .cell,
.noChanges .cell {
padding: 0 .5em;
padding: 0 var(--spacing-m);
}
.subject {
margin-bottom: .25em;
margin-bottom: var(--spacing-xs);
width: calc(100% - 2em);
}
.owner,

View File

@ -23,11 +23,7 @@ limitations under the License.
section:not(:first-of-type) .title,
section:not(:first-of-type) .value {
padding-top: .5em;
}
section:not(:first-of-type) {
margin-top: 1em;
padding-top: var(--spacing-s);
}
.title,
@ -40,7 +36,7 @@ limitations under the License.
font-weight: var(--font-weight-bold);
max-width: 20em;
padding-left: var(--metadata-horizontal-padding);
padding-right: .5em;
padding-right: var(--spacing-m);
word-break: break-word;
}
@ -49,4 +45,4 @@ limitations under the License.
}
</style>
</template>
</dom-module>
</dom-module>

View File

@ -26,18 +26,17 @@ limitations under the License.
<dom-module id="gr-change-view-integration-shared-styles">
<template>
<style>
/* TODO(taoalpha): update spacings once change 241809 submitted */
.header {
color: var(--primary-text-color);
background-color: var(--table-header-background-color);
justify-content: space-between;
padding: .5em var(--default-horizontal-margin, 1rem);
padding: var(--spacing-m) var(--spacing-l);
border-bottom: 1px solid var(--border-color);
}
.header .label {
font-weight: var(--font-weight-bold);
font-size: 1.17em;
margin: 0 1em 0 0;
font-size: var(--font-size-large);
margin: 0 var(--spacing-l) 0 0;
}
.header .note {
color: var(--deemphasized-text-color);

View File

@ -27,18 +27,18 @@ limitations under the License.
}
.gr-form-styles h1,
.gr-form-styles h2 {
margin-bottom: .3em;
margin-bottom: var(--spacing-s);
}
.gr-form-styles h4 {
font-weight: var(--font-weight-bold);
}
.gr-form-styles fieldset {
border: none;
margin-bottom: 2em;
margin-bottom: var(--spacing-xxl);
}
.gr-form-styles section {
display: flex;
margin: .25em 0;
margin: var(--spacing-s) 0;
min-height: 2em;
}
.gr-form-styles section * {
@ -51,7 +51,7 @@ limitations under the License.
.gr-form-styles .title {
color: var(--deemphasized-text-color);
font-weight: var(--font-weight-bold);
padding-right: .5em;
padding-right: var(--spacing-m);
width: 15em;
}
.gr-form-styles iron-autogrow-textarea {
@ -65,7 +65,7 @@ limitations under the License.
.gr-form-styles td,
.gr-form-styles tfoot th {
height: 2em;
padding: .25em 0;
padding: var(--spacing-s) 0;
vertical-align: middle;
}
.gr-form-styles .emptyHeader {
@ -89,7 +89,7 @@ limitations under the License.
border-radius: 2px;
font-size: var(--font-size-normal);
height: 2em;
padding: 0 .15em;
padding: 0 var(--spacing-xs);
}
.gr-form-styles td:last-child {
width: 5em;
@ -107,7 +107,7 @@ limitations under the License.
border-radius: 2px;
box-sizing: border-box;
font-size: var(--font-size-normal);
padding: .25em .15em 0 .15em;
padding: var(--spacing-s) var(--spacing-xs) 0 var(--spacing-xs);
}
}
.gr-form-styles gr-autocomplete {
@ -117,13 +117,13 @@ limitations under the License.
border-radius: 2px;
font-size: var(--font-size-normal);
height: 2em;
padding: 0 .15em;
padding: 0 var(--spacing-xs);
width: 14em;
}
}
@media only screen and (max-width: 40em) {
.gr-form-styles section {
margin-bottom: 1em;
margin-bottom: var(--spacing-l);
}
.gr-form-styles .title,
.gr-form-styles .value {

View File

@ -22,12 +22,12 @@ limitations under the License.
display: block;
}
main {
margin: 2em auto;
margin: var(--spacing-xxl) auto;
max-width: 50em;
}
.mainHeader {
margin-left: 14em;
padding: 1em 0 1em 2em;
padding: var(--spacing-l) 0 var(--spacing-l) var(--spacing-xxl);
}
main.table,
.mainHeader {
@ -42,11 +42,11 @@ limitations under the License.
}
.loading {
color: var(--deemphasized-text-color);
padding: 1em var(--default-horizontal-margin);
padding: var(--spacing-l);
}
@media only screen and (max-width: 67em) {
main {
margin: 2em 0 2em 15em;
margin: var(--spacing-xxl) 0 var(--spacing-xxl) 15em;
}
main.table {
margin-left: 14em;
@ -54,17 +54,17 @@ limitations under the License.
}
@media only screen and (max-width: 53em) {
.loading {
padding: 0 var(--default-horizontal-margin);
padding: 0 var(--spacing-l);
}
main {
margin: 2em 1em;
margin: var(--spacing-xxl) var(--spacing-l);
}
main.table {
margin: 0;
}
.mainHeader {
margin-left: 0;
padding: .5em 0 .5em 1em;
padding: var(--spacing-m) 0 var(--spacing-m) var(--spacing-l);
}
}
</style>

View File

@ -18,13 +18,13 @@ limitations under the License.
<template>
<style>
.navStyles ul {
padding: 1em 0;
padding: var(--spacing-l) 0;
}
.navStyles li {
border-bottom: 1px solid transparent;
border-top: 1px solid transparent;
display: block;
padding: 0 calc(var(--default-horizontal-margin) + 0.5em);
padding: 0 var(--spacing-xl);
}
.navStyles li a {
display: block;
@ -33,20 +33,20 @@ limitations under the License.
white-space: nowrap;
}
.navStyles .subsectionItem {
padding-left: calc(var(--default-horizontal-margin) + 1.5em);
padding-left: var(--spacing-xxl);
}
.navStyles .hideSubsection {
display: none;
}
.navStyles li.sectionTitle {
padding: 0 2em 0 var(--default-horizontal-margin);
padding: 0 var(--spacing-xxl) 0 var(--spacing-l);
}
.navStyles li.sectionTitle:not(:first-child) {
margin-top: 1em;
margin-top: var(--spacing-l);
}
.navStyles .title {
font-weight: var(--font-weight-bold);
margin: .4em 0;
margin: var(--spacing-s) 0;
}
.navStyles .selected {
background-color: var(--view-background-color);
@ -57,7 +57,7 @@ limitations under the License.
.navStyles a {
color: var(--primary-text-color);
display: inline-block;
margin: .4em 0;
margin: var(--spacing-s) 0;
}
</style>
</template>

View File

@ -18,7 +18,7 @@ limitations under the License.
<template>
<style>
main {
margin: 1em 1em;
margin: var(--spacing-l);
}
.loading {
display: none;

View File

@ -24,7 +24,7 @@ limitations under the License.
}
.genericList td {
height: 2.25rem;
padding: .3rem 0;
padding: var(--spacing-s) 0;
vertical-align: middle;
}
.genericList tr {
@ -38,11 +38,11 @@ limitations under the License.
}
.genericList th,
.genericList td {
padding-right: 1rem;
padding-right: var(--spacing-l);
}
.genericList tr th:first-of-type,
.genericList tr td:first-of-type {
padding-left: 1rem;
padding-left: var(--spacing-l);
}
.genericList tr:first-of-type {
border-top: 1px solid var(--border-color);
@ -51,7 +51,7 @@ limitations under the License.
.genericList tr td:last-of-type {
border-left: 1px solid var(--border-color);
text-align: center;
padding: 0 1em;
padding: 0 var(--spacing-l);
}
.genericList tr th.delete,
.genericList tr td.delete,
@ -93,7 +93,7 @@ limitations under the License.
.genericList .loadingMsg {
color: var(--deemphasized-text-color);
display: block;
padding: .3em var(--default-horizontal-margin);
padding: var(--spacing-s) var(--spacing-l);
}
.genericList .loadingMsg:not(.loading) {
display: none;

View File

@ -82,7 +82,13 @@ html {
--monospace-font-family: 'Roboto Mono', Menlo, 'Lucida Console', Monaco, monospace;
/* spacing */
--default-horizontal-margin: 1rem;
--spacing-xxs: 1px;
--spacing-xs: 2px;
--spacing-s: 4px;
--spacing-m: 8px;
--spacing-l: 12px;
--spacing-xl: 16px;
--spacing-xxl: 24px;
/* header and footer */
--footer-background-color: #eee;
@ -150,7 +156,13 @@ html {
}
@media screen and (max-width: 50em) {
html {
--default-horizontal-margin: .7rem;
--spacing-xxs: 1px;
--spacing-xs: 1px;
--spacing-s: 2px;
--spacing-m: 4px;
--spacing-l: 8px;
--spacing-xl: 12px;
--spacing-xxl: 16px;
}
}
</style></custom-style>