Skip to content

Commit

Permalink
Convert --space-size-n CSS variables to --space-n (#12798)
Browse files Browse the repository at this point in the history
  • Loading branch information
stwlam authored Jan 6, 2024
1 parent b14d025 commit 5530d75
Show file tree
Hide file tree
Showing 17 changed files with 118 additions and 118 deletions.
34 changes: 17 additions & 17 deletions src/styles/_globals.scss
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,14 @@
/* ----------------------------------------- */

:root {
--space-size-1: 0.0625rem;
--space-size-2: 0.125rem;
--space-size-3: 0.1875rem;
--space-size-4: 0.25rem;
--space-size-5: 0.3125rem;
--space-size-6: 0.375rem;
--space-size-7: 0.4375rem;
--space-size-8: 0.5rem;
--space-1: 0.0625rem;
--space-2: 0.125rem;
--space-3: 0.1875rem;
--space-4: 0.25rem;
--space-5: 0.3125rem;
--space-6: 0.375rem;
--space-7: 0.4375rem;
--space-8: 0.5rem;
}

/* ----------------------------------------- */
Expand Down Expand Up @@ -116,13 +116,13 @@ table.pf2-table {
box-sizing: border-box;
color: var(--color-text-dark-primary);
line-height: 1.6em;
padding: var(--space-size-1) var(--space-size-4);
padding: var(--space-1) var(--space-4);
white-space: nowrap;
word-break: break-all;

> i.icon {
color: var(--color-text-dark-inactive);
margin-right: var(--space-size-4);
margin-right: var(--space-4);
}
}

Expand Down Expand Up @@ -153,7 +153,7 @@ span[data-pf2-action] {

&[data-pf2-glyph]::before {
font-family: "Pathfinder2eActions";
margin-right: var(--space-size-2);
margin-right: var(--space-2);
color: var(--color-text-dark-inactive);
}

Expand All @@ -166,8 +166,8 @@ span[data-pf2-action] {
background-repeat: no-repeat;
background-size: var(--font-size-15) var(--font-size-15);
opacity: 0.4;
margin-bottom: calc(-1 * var(--space-size-3));
margin-right: var(--space-size-2);
margin-bottom: calc(-1 * var(--space-3));
margin-right: var(--space-2);
content: "";
}

Expand Down Expand Up @@ -280,8 +280,8 @@ i[data-pf2-repost] {
color: var(--color-text-dark-inactive);
border-left: 1px solid var(--color-border-dark-tertiary);
background: #fff9;
padding: var(--space-size-2);
margin-left: var(--space-size-2);
padding: var(--space-2);
margin-left: var(--space-2);
text-shadow: none;

&:hover {
Expand All @@ -301,7 +301,7 @@ i[data-pf2-repost] {
display: inline-block;
line-height: 1em;
outline: 1px dotted rgba(75, 74, 68, 0.5);
padding: var(--space-size-1);
padding: var(--space-1);

&.message-sender {
line-height: normal;
Expand Down Expand Up @@ -336,7 +336,7 @@ a[href]:hover {
@include corner-boxes;
background: rgba(black, 0.9);
font-size: var(--font-size-14);
padding: var(--space-size-4) 0;
padding: var(--space-4) 0;
text-align: left;

h1,
Expand Down
2 changes: 1 addition & 1 deletion src/styles/_reset.scss
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
input[type="checkbox"] {
flex: 0 0 var(--font-size-20);
height: var(--font-size-20);
margin: var(--space-size-3) var(--space-size-5);
margin: var(--space-3) var(--space-5);
width: var(--font-size-20);
}

Expand Down
24 changes: 12 additions & 12 deletions src/styles/_tags.scss
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@
align-items: center;
display: flex;
flex-wrap: wrap;
gap: var(--space-size-2);
gap: var(--space-2);
list-style-type: none;
margin-bottom: var(--space-size-2);
margin-bottom: var(--space-2);
padding-left: 0;

.tag,
Expand Down Expand Up @@ -146,7 +146,7 @@
border-radius: 0;
display: flex;
font: 500 var(--font-size-10) var(--sans-serif);
padding: 0 0.09rem 0 var(--space-size-4);
padding: 0 0.09rem 0 var(--space-4);

.tagify__tag-text {
text-transform: uppercase;
Expand All @@ -155,7 +155,7 @@

hr.vr {
height: 1.25em;
margin: var(--space-size-1) var(--space-size-2);
margin: var(--space-1) var(--space-2);
}

// Tone down disabled effects so we still see trait colors
Expand Down Expand Up @@ -188,7 +188,7 @@
letter-spacing: normal;
height: 1.5em;
margin: 0;
padding: 0 var(--space-size-4);
padding: 0 var(--space-4);
white-space: nowrap;
width: auto;
}
Expand Down Expand Up @@ -267,7 +267,7 @@ tags.tags.paizo-style {

// In lieu of remove button
tag[readonly="true"] {
padding-right: var(--space-size-2);
padding-right: var(--space-2);
}
}

Expand All @@ -282,8 +282,8 @@ tags.tagify.pf2e-tagify {
align-items: center;
background-color: rgba(white, 0.5);
border-radius: 3px;
gap: var(--space-size-3);
padding: var(--space-size-2);
gap: var(--space-3);
padding: var(--space-2);

&[disabled] {
--tag-text-color: var(--color-disabled);
Expand All @@ -295,7 +295,7 @@ tags.tagify.pf2e-tagify {
}

&:hover {
box-shadow: 0 0 var(--space-size-4) var(--color-pf-secondary);
box-shadow: 0 0 var(--space-4) var(--color-pf-secondary);
}

tag {
Expand All @@ -307,7 +307,7 @@ tags.tagify.pf2e-tagify {
}

> div {
padding: 0 var(--space-size-2);
padding: 0 var(--space-2);

.tagify__tag-text {
font-weight: normal;
Expand Down Expand Up @@ -338,8 +338,8 @@ tags.tags.paizo-style {

.damage-tag {
white-space: nowrap;
margin: 0 1px 1px 0;
padding: 0 var(--space-size-3);
margin: 0 var(--space-1) var(--space-1) 0;
padding: 0 var(--space-3);
font-size: var(--font-size-10);
line-height: 1rem;
border: 1px solid var(--color-border-light-2);
Expand Down
12 changes: 6 additions & 6 deletions src/styles/actor/_item-summary.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,30 +2,30 @@
@include journal-styling;
line-height: normal;
overflow: hidden;
padding: var(--space-size-4);
padding: var(--space-4);

.tags {
padding: 0;

&.has-properties {
row-gap: var(--space-size-3);
row-gap: var(--space-3);
}

.tag.property {
margin-left: var(--space-size-2);
border-width: var(--space-size-1);
margin-left: var(--space-2);
border-width: var(--space-1);
height: 1.25em;
}

.tag:not(.property) + .tag.property {
margin-left: var(--space-size-4);
margin-left: var(--space-4);
}
}

.button-group {
align-items: start;
display: flex;
gap: var(--space-size-6);
gap: var(--space-6);
justify-content: center;
flex-direction: column;

Expand Down
34 changes: 17 additions & 17 deletions src/styles/actor/_red-action-boxes.scss
Original file line number Diff line number Diff line change
Expand Up @@ -14,15 +14,15 @@
font-size: var(--font-size-13);
justify-content: space-between;
line-height: 2em;
padding: 0 var(--space-size-8);
padding: 0 var(--space-8);
text-align: left;
width: 100%;

h4 {
align-items: baseline;
display: flex;
flex: auto;
gap: var(--space-size-4);
gap: var(--space-4);
margin-bottom: 0;
text-transform: uppercase;
}
Expand All @@ -33,7 +33,7 @@
}

.controls {
gap: var(--space-size-8);
gap: var(--space-8);
white-space: nowrap;
}
}
Expand Down Expand Up @@ -66,12 +66,12 @@
flex: 0;
flex-wrap: nowrap;
font-size: var(--font-size-12);
gap: var(--space-size-1);
gap: var(--space-1);
margin-left: auto;

.chat {
font-size: 0.9em;
margin-right: var(--space-size-2);
margin-right: var(--space-2);
}
}

Expand All @@ -85,7 +85,7 @@

.flexrow,
.sub-section {
gap: var(--space-size-2);
gap: var(--space-2);
}

.sub-section {
Expand Down Expand Up @@ -115,7 +115,7 @@
justify-content: center;
line-height: var(--font-size-18);
margin: 0;
padding: 0 var(--space-size-8);
padding: 0 var(--space-8);
white-space: nowrap;
width: auto;

Expand Down Expand Up @@ -149,8 +149,8 @@
display: flex;
flex-direction: row;
justify-content: start;
gap: var(--space-size-4);
padding: var(--space-size-4) 0;
gap: var(--space-4);
padding: var(--space-4) 0;

&:last-child {
border-bottom: none;
Expand All @@ -162,23 +162,23 @@
flex-wrap: wrap;
font-size: 0.9rem;
font-weight: 500;
gap: var(--space-size-2);
margin: 0 var(--space-size-4) 0 0;
gap: var(--space-2);
margin: 0 var(--space-4) 0 0;
white-space: nowrap;

> span,
> a {
display: flex;
gap: var(--space-size-3);
gap: var(--space-3);
line-height: 1.125rem;
margin-right: var(--space-size-4);
margin-right: var(--space-4);
}
}
}

li.action {
display: flex;
gap: var(--space-size-4);
gap: var(--space-4);

&:not(:last-child) {
border-bottom: 1px solid var(--color-border-light-tertiary);
Expand All @@ -187,7 +187,7 @@
> h4 {
align-items: center;
display: flex;
gap: var(--space-size-4);
gap: var(--space-4);
flex: auto;
font-size: 0.9rem;
margin: 0;
Expand All @@ -202,7 +202,7 @@
.button-group > button.use-action {
background-color: var(--color-pf-secondary);
color: var(--color-text-light-0);
margin-right: var(--space-size-8);
margin-right: var(--space-8);
}

.action-traits {
Expand All @@ -224,7 +224,7 @@
font-family: inherit;
font-size: 0.9rem;
height: auto;
padding: 0 var(--space-size-3);
padding: 0 var(--space-3);
text-align: center;
width: 0;
}
Expand Down
4 changes: 2 additions & 2 deletions src/styles/actor/character/_attribute-builder.scss
Original file line number Diff line number Diff line change
Expand Up @@ -419,8 +419,8 @@
align-items: center;

i {
font-size: var(--space-size-5);
margin-right: var(--space-size-5);
font-size: var(--space-5);
margin-right: var(--space-5);
}
}
}
Expand Down
Loading

0 comments on commit 5530d75

Please sign in to comment.